3D Viewer: 4 Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:14

Kamusta! Upang masiyahan ang aking interes sa pag-program at sana ay makatulong na masiyahan ang iyo, nais kong ipakita sa iyo ang isang 3D Viewer na naka-code sa javascript. Kung nais mong palawakin ang iyong pag-unawa sa mga 3D na laro o lumikha ng iyong sariling 3D na laro, ang prototype na 3D viewer na ito ay perpekto para sa iyo.

Hakbang 1: Ang Teorya

Upang maunawaan ang teorya ng 3D viewer na ito, maaari mo lamang suriin ang paraan ng pagtingin mo sa iyong paligid (nakakatulong na magkaroon lamang ng isang makabuluhang mapagkukunan ng ilaw). Pansinin na:

1. Ang mga bagay na mas malayo sa iyo ay kumukuha ng isang maliit na bahagi ng iyong larangan ng paningin.
2. Ang mga bagay na mas malayo sa pinagmulan ng ilaw ay lilitaw na mas madidilim na kulay.
3. Tulad ng mga ibabaw na nagiging mas parallel (mas mababa sa patayo) sa ilaw na mapagkukunan, lumilitaw ang mga ito na mas madidilim na kulay.

Nagpasya akong kumatawan sa isang larangan ng paningin na may isang grupo ng mga linya na nagmumula sa isang solong punto (kahalintulad sa eyeball). Tulad ng isang spike ball, ang mga linya ay kailangang pantay-pantay na nakalagay upang matiyak na ang bawat bahagi ng larangan ng paningin ay pantay na kinakatawan. Sa larawan sa itaas, pansinin kung paano ang mga linya na nagmumula sa spike ball ay naging mas spaced out habang lumalayo sila palayo sa gitna ng bola. Nakatutulong ito na mailarawan ang pagpapatupad ng programa ng pagmamasid 1 dahil bumababa ang density ng mga linya habang ang mga bagay ay lumilayo nang mas malayo sa gitnang punto.

Ang mga linya ay ang pangunahing yunit ng paningin sa programa, at ang bawat isa ay nai-map sa isang pixel sa display. Kapag ang isang linya ay nag-intersect ng isang bagay, ang kaukulang pixel na ito ay may kulay batay sa distansya nito mula sa light source at ang anggulo nito mula sa light source.

Hakbang 2: Teoryang Pagpapatupad

Upang gawing simple ang programa, ang ilaw na mapagkukunan ay kapareho ng gitnang punto (eyeball: point kung saan tiningnan ang mapa at kung saan nagmula ang mga linya). Analogous sa paghawak ng isang ilaw sa tabi mismo ng iyong mukha, inaalis nito ang mga anino at pinapayagan ang kalinawan ng bawat pixel upang makalkula nang mas madali.

Gumagamit din ang programa ng mga spherical coordinate, na may gitnang punto ng paningin sa pinagmulan. Pinapayagan nito ang mga linya na madaling mabuo (bawat isa ay may natatanging theta: pahalang na anggulo at phi: patayong anggulo), at nagbibigay ng batayan ng mga kalkulasyon. Ang mga linya na may parehong theta ay nai-map sa mga pixel sa parehong hilera. Ang phis ng mga kaukulang anggulo ay tumataas sa bawat hilera ng mga pixel.

Upang gawing simple ang matematika, ang 3D map ay binubuo ng mga eroplano na may isang karaniwang variable (karaniwang x, y, o z), habang ang iba pang dalawang hindi karaniwang variable ay nakakulong sa loob ng isang saklaw, na kinukumpleto ang kahulugan ng bawat eroplano.

Upang tumingin sa paligid gamit ang mouse, ang mga equation factor ng programa sa isang patayo at pahalang na pag-ikot sa panahon ng conversion sa pagitan ng mga spherical at xyz coordinate system. Ito ang epekto ng preforming isang pag-ikot sa "spike ball" na hanay ng mga linya ng paningin.

Hakbang 3: Matematika

Ang mga sumusunod na equation ay nagbibigay-daan sa programa upang matukoy kung aling mga linya ang tumawid sa bawat bagay at impormasyon tungkol sa bawat interseksyon. Nakuha ko ang mga equation na ito mula sa pangunahing mga spherical coordinate equation at ang 2D rotation equation:

r = distansya, t = theta (pahalang na anggulo), p = phi (patayong anggulo), A = pag-ikot tungkol sa Y axis (patayong pag-ikot), B = pag-ikot tungkol sa Z axis (pahalang na pag-ikot)

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

pag-iilaw = Klight / r * (Kx o Ky o 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)))

Hakbang 4: Programa

Inaasahan ko na ang prototype na 3D viewer na ito ay nakatulong sa iyo na maunawaan ang paggana ng 3D virtual reality. Sa ilang higit pang pagperpekto at pag-coding, ang manonood na ito ay tiyak na may potensyal na mailalagay sa pag-unlad ng 3D game.