3D-viewer: 4 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:18

Hallo! Om mijn interesse in programmeren te bevredigen en hopelijk die van jou te bevredigen, wil ik je een 3D-viewer laten zien die ik in javascript heb gecodeerd. Als je je begrip van 3D-games wilt vergroten of zelfs je eigen 3D-game wilt maken, dan is deze prototype 3D-viewer perfect voor jou.

Stap 1: De theorie

Om de theorie van deze 3D-viewer te begrijpen, kunt u eenvoudig de manier onderzoeken waarop u uw omgeving bekijkt (het helpt om slechts één belangrijke lichtbron te hebben). Let erop dat:

1. Objecten die verder van je af staan, nemen een kleiner deel van je gezichtsveld in beslag.
2. Objecten die verder van de lichtbron verwijderd zijn, lijken donkerder van kleur.
3. Naarmate oppervlakken meer parallel (minder loodrecht) aan de lichtbron worden, lijken ze donkerder van kleur.

Ik besloot een gezichtsveld weer te geven met een aantal lijnen die uit een enkel punt komen (analoog aan de oogbol). Net als bij een spijkerbal moeten de lijnen gelijkmatig verdeeld zijn om ervoor te zorgen dat elk deel van het gezichtsveld gelijk wordt weergegeven. In de bovenstaande afbeelding ziet u hoe de lijnen die uit de spijkerbal komen, meer uit elkaar worden geplaatst naarmate ze verder van het midden van de bal weggaan. Dit helpt bij het visualiseren van de implementatie van observatie 1 door het programma, aangezien de dichtheid van lijnen afneemt naarmate objecten verder van het middelpunt af bewegen.

De lijnen zijn de basiseenheid van het zicht in het programma en ze zijn elk toegewezen aan een pixel op het scherm. Wanneer een lijn een object snijdt, wordt de bijbehorende pixel gekleurd op basis van de afstand tot de lichtbron en de hoek vanaf de lichtbron.

Stap 2: Implementatietheorie

Om het programma te vereenvoudigen is de lichtbron gelijk aan het middelpunt (oogbol: punt van waaruit de kaart wordt bekeken en waar de lijnen vandaan komen). Analoog aan het houden van een lamp vlak naast je gezicht, elimineert dit schaduwen en kan de helderheid van elke pixel veel gemakkelijker worden berekend.

Het programma maakt ook gebruik van sferische coördinaten, met het middelpunt in de oorsprong. Hierdoor kunnen de lijnen eenvoudig worden gegenereerd (elk met een unieke theta: horizontale hoek en phi: verticale hoek) en vormt de basis voor berekeningen. Lijnen met dezelfde theta worden toegewezen aan pixels in dezelfde rij. De phis van overeenkomstige hoeken neemt toe over elke rij pixels.

Om de wiskunde te vereenvoudigen, is de 3D-kaart samengesteld uit vlakken met een gemeenschappelijke variabele (algemene x, y of z), terwijl de andere twee niet-gemeenschappelijke variabelen binnen een bereik zijn beperkt, waardoor de definitie van elk vlak wordt voltooid.

Om met de muis rond te kijken, houden de vergelijkingen van het programma rekening met een verticale en horizontale rotatie tijdens de conversie tussen sferische en xyz-coördinatensystemen. Dit heeft het effect van het voorvormen van een rotatie op de "spike ball" set zichtlijnen.

Stap 3: Wiskunde

Met de volgende vergelijkingen kan het programma bepalen welke lijnen elk object snijden en informatie over elk kruispunt. Ik heb deze vergelijkingen afgeleid van de basisvergelijkingen voor sferische coördinaten en de 2D-rotatievergelijkingen:

r=afstand, t=theta(horizontale hoek), p=phi(verticale hoek), A=rotatie rond Y-as (verticale rotatie), B=rotatie rond Z-as (horizontale rotatie)

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

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

Stap 4: Programma

Ik hoop dat dit prototype 3D-viewer je heeft geholpen de werking van 3D virtual reality te begrijpen. Met wat meer perfectionering en codering heeft deze kijker zeker het potentieel om te worden gebruikt in de ontwikkeling van 3D-games.