3D Viewer: 4 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:25

Hallo! For å tilfredsstille min interesse for programmering og forhåpentligvis bidra til å tilfredsstille din, vil jeg vise deg en 3D Viewer som jeg har kodet i javascript. Hvis du ønsker å øke din forståelse av 3D -spill eller til og med lage ditt eget 3D -spill, er denne prototypen 3D -visning perfekt for deg.

Trinn 1: Teorien

For å forstå teorien til denne 3D -betrakteren, kan du ganske enkelt undersøke måten du ser på omgivelsene dine (det hjelper å ha bare en signifikant lyskilde). Legg merke til det:

1. Objekter som er lengre unna deg, tar opp en mindre del av synsfeltet ditt.
2. Objekter som er lenger borte fra lyskilden, virker mørkere i fargen.
3. Etter hvert som overflater blir mer parallelle (mindre vinkelrett) til lyskilden, virker de mørkere i fargen.

Jeg bestemte meg for å representere et synsfelt med en haug med linjer som stammer fra et enkelt punkt (analogt med øyebollet). Som en piggkule må linjene være jevnt fordelt for å sikre at hver del av synsfeltet er like representert. På bildet ovenfor, legg merke til hvordan linjene som kommer fra piggkulen blir mer avstand når de beveger seg lengre bort fra midten av ballen. Dette hjelper til med å visualisere programmets implementering av observasjon 1 siden tettheten av linjer avtar ettersom objekter beveger seg lenger vekk fra sentrum.

Linjene er den grunnleggende visjonenheten i programmet, og de er hver tilordnet en piksel på skjermen. Når en linje krysser et objekt, blir den tilsvarende piksel farget basert på avstanden fra lyskilden og vinkelen fra lyskilden.

Trinn 2: Implementeringsteori

For å forenkle programmet er lyskilden den samme som midtpunktet (øyeeplet: punktet kartet er sett fra og hvor linjene stammer fra). Analogt med å holde et lys ved siden av ansiktet ditt, eliminerer dette skygger og gjør at lysstyrken til hver piksel kan beregnes mye lettere.

Programmet bruker også sfæriske koordinater, med senterpunktet ved opprinnelsen. Dette gjør at linjene enkelt kan genereres (hver med en unik theta: horisontal vinkel og phi: vertikal vinkel), og gir grunnlaget for beregninger. Linjer med samme theta kartlegges til piksler i samme rad. Phis for tilsvarende vinkler øker over hver rad med piksler.

For å forenkle matematikken består 3D-kartet av fly med en felles variabel (felles x, y eller z), mens de to andre ikke-vanlige variablene er begrenset innenfor et område, og fullfører definisjonen av hvert plan.

For å se deg rundt med musen, faktorens ligninger faktor i en vertikal og horisontal rotasjon under konverteringen mellom sfæriske og xyz koordinatsystemer. Dette har den effekten at det dannes en rotasjon på settet med "piggkule" sett med visningslinjer.

Trinn 3: Matematikk

Følgende ligninger gjør at programmet kan bestemme hvilke linjer som krysser hvert objekt og informasjon om hvert kryss. Jeg avledet disse ligningene fra de grunnleggende sfæriske koordinatligningene og 2D -rotasjonsligningene:

r = avstand, t = theta (horisontal vinkel), p = phi (vertikal vinkel), A = rotasjon om Y -aksen (vertikal rotasjon), B = rotasjon om Z -aksen (horisontal rotasjon)

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

belysning = Klight/r*(Kx eller Ky eller 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)))

Trinn 4: Program

Jeg håper at denne prototypen 3D viewer hjalp deg med å forstå hvordan 3D virtuelle virkeligheter fungerer. Med litt mer perfeksjonering og koding, har denne seeren absolutt potensial til å bli tatt i bruk i 3D -spillutvikling.