Cuprins:

Vizualizator 3D: 4 pași
Vizualizator 3D: 4 pași

Video: Vizualizator 3D: 4 pași

Video: Vizualizator 3D: 4 pași
Video: Which Visualizer Should I Use - (4) 3d Stage Visualizers Compared! (Pt 1) 2024, Noiembrie
Anonim
Vizualizator 3D
Vizualizator 3D

Buna! Pentru a-mi satisface interesul pentru programare și, sperăm, pentru a vă ajuta să vă satisfaceți, aș dori să vă arăt un vizualizator 3D pe care l-am codat în javascript. Dacă doriți să vă înțelegeți mai mult jocurile 3D sau chiar să vă creați propriul joc 3D, acest prototip vizualizator 3D este perfect pentru dvs.

Pasul 1: Teoria

Teoria
Teoria

Pentru a înțelege teoria acestui vizualizator 3D, puteți examina pur și simplu modul în care vă vedeți împrejurimile (vă ajută să aveți o singură sursă semnificativă de lumină). Observa asta:

  1. Obiectele care sunt mai departe de tine ocupă o porțiune mai mică din câmpul tău vizual.
  2. Obiectele care sunt mai departe de sursa de lumină par mai închise la culoare.
  3. Pe măsură ce suprafețele devin mai paralele (mai puțin perpendiculare) cu sursa de lumină, ele par mai închise la culoare.

Am decis să reprezint un câmp vizual cu o grămadă de linii care provin dintr-un singur punct (analog globului ocular). Ca o minge de vârf, liniile trebuie să fie uniform distanțate pentru a se asigura că fiecare porțiune a câmpului vizual este reprezentată în mod egal. În imaginea de mai sus, observați cum liniile care vin de la mingea de vârf devin mai distanțate pe măsură ce se îndepărtează mai departe de centrul mingii. Acest lucru ajută la vizualizarea implementării programului de observare 1, deoarece densitatea liniilor scade pe măsură ce obiectele se îndepărtează mai mult de punctul central.

Liniile sunt unitatea de bază a viziunii în program și sunt mapate fiecare la un pixel de pe ecran. Când o linie intersectează un obiect, pixelul său corespunzător este colorat pe baza distanței sale față de sursa de lumină și a unghiului său față de sursa de lumină.

Pasul 2: Teoria implementării

Teoria implementării
Teoria implementării

Pentru a simplifica programul, sursa de lumină este aceeași cu punctul central (globul ocular: punctul din care este vizualizată harta și de unde provin liniile). Analog cu menținerea unei lumini chiar lângă față, aceasta elimină umbrele și permite calcularea luminozității fiecărui pixel mult mai ușor.

Programul folosește și coordonate sferice, cu punctul central al vederii la origine. Acest lucru permite generarea cu ușurință a liniilor (fiecare cu un theta unic: unghi orizontal și phi: unghi vertical) și oferă baza calculelor. Liniile cu același theta sunt mapate la pixeli în același rând. Fisele unghiurilor corespunzătoare cresc pe fiecare rând de pixeli.

Pentru a simplifica matematica, harta 3D este compusă din planuri cu o variabilă comună (x, y sau z comună), în timp ce celelalte două variabile non-comune sunt limitate într-un interval, completând definiția fiecărui plan.

Pentru a privi în jur cu mouse-ul, ecuațiile programului factorează o rotație verticală și orizontală în timpul conversiei dintre sistemele de coordonate sferice și xyz. Acest lucru are ca efect preformarea unei rotații pe setul de linii de viziune „bile spike”.

Pasul 3: Matematică

Următoarele ecuații permit programului să determine ce linii intersectează fiecare obiect și informații despre fiecare intersecție. Am derivat aceste ecuații din ecuațiile de bază ale coordonatelor sferice și din ecuațiile de rotație 2D:

r = distanță, t = theta (unghi orizontal), p = phi (unghi vertical), A = rotație în jurul axei Y (rotație verticală), B = rotație în jurul axei Z (rotație orizontală)

Kx = (sin (p) * cos (t) * cos (A) + cos (p) * sin (A)) * cos (B) -sin (p) * sin (t) * sin (B)

Ky = (sin (p) * cos (t) * cos (A) + cos (p) * sin (A)) * sin (B) + sin (p) * sin (t) * cos (B)

Kz = -sin (p) * cos (t) * sin (A) + cos (p) * cos (A)

x = r * Kx

y = r * Ky

z = r * Kz

r ^ 2 = x ^ 2 + y ^ 2 + z ^ 2

iluminare = Klight / r * (Kx sau Ky sau Kz)

p = arccos ((x * sin (A) * cos (B) + y * sin (A) * sin (B) + z * cos (A)) / r)

t = arccos ((x * cos (B) + y * sin (B) -p * sin (A) * cos (p)) / (r * cos (A) * sin (p)))

Pasul 4: Program

Program
Program

Sper că acest prototip 3D Viewer te-a ajutat să înțelegi funcționarea realităților virtuale 3D. Cu unele mai multe perfecționare și codificare, acest vizualizator are cu siguranță potențialul de a fi folosit în dezvoltarea jocurilor 3D.

Recomandat: