Przeglądarka 3D: 4 kroki

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:32

Cześć! Aby zaspokoić moje zainteresowanie programowaniem i mam nadzieję pomóc zaspokoić twoje, chciałbym pokazać przeglądarkę 3D, którą zakodowałem w javascript. Jeśli chcesz pogłębić swoją wiedzę na temat gier 3D lub nawet stworzyć własną grę 3D, ta prototypowa przeglądarka 3D jest dla Ciebie idealna.

Krok 1: Teoria

Aby zrozumieć teorię tej przeglądarki 3D, możesz po prostu zbadać sposób, w jaki patrzysz na otoczenie (pomaga mieć tylko jedno znaczące źródło światła). Zauważ, że:

1. Obiekty znajdujące się dalej od ciebie zajmują mniejszą część twojego pola widzenia.
2. Obiekty znajdujące się dalej od źródła światła mają ciemniejszy kolor.
3. Gdy powierzchnie stają się bardziej równoległe (mniej prostopadłe) do źródła światła, ich kolor wydaje się ciemniejszy.

Postanowiłem przedstawić pole widzenia kilkoma liniami wychodzącymi z jednego punktu (analogicznie do gałki ocznej). Podobnie jak kolczasta kula, linie muszą być równomiernie rozmieszczone, aby zapewnić równą reprezentację każdej części pola widzenia. Na powyższym obrazku zauważ, jak linie wychodzące z kuli z kolcami stają się bardziej rozstawione, gdy oddalają się od środka kuli. Pomaga to zwizualizować realizację obserwacji 1 przez program, ponieważ gęstość linii zmniejsza się, gdy obiekty oddalają się od punktu środkowego.

Linie są podstawową jednostką widzenia w programie i każda z nich jest odwzorowana na piksel na wyświetlaczu. Kiedy linia przecina obiekt, odpowiadający jej piksel jest kolorowany na podstawie odległości od źródła światła i kąta od źródła światła.

Krok 2: Teoria wdrożenia

Aby uprościć program, źródło światła jest takie samo jak punkt centralny (gałka oczna: punkt, z którego oglądana jest mapa i skąd wychodzą linie). Analogicznie do trzymania światła tuż przy twarzy, eliminuje to cienie i pozwala znacznie łatwiej obliczyć jasność każdego piksela.

Program wykorzystuje również współrzędne sferyczne, z centralnym punktem widzenia na początku. Umożliwia to łatwe generowanie linii (każda z unikalnym teta: kąt poziomy i phi: kąt pionowy) i stanowi podstawę obliczeń. Linie o tym samym teta są mapowane na piksele w tym samym wierszu. Fis odpowiednich kątów zwiększa się w każdym rzędzie pikseli.

Aby uprościć matematykę, mapa 3D składa się z płaszczyzn ze wspólną zmienną (wspólne x, y lub z), podczas gdy pozostałe dwie nieczęste zmienne są ograniczone do pewnego zakresu, uzupełniając definicję każdej płaszczyzny.

Aby rozejrzeć się za pomocą myszy, równania programu uwzględniają obrót pionowy i poziomy podczas konwersji między układami współrzędnych sferycznym i xyz. Ma to wpływ na wykonanie rotacji na zestawie linii wzroku „kolczastym kuli”.

Krok 3: Matematyka

Poniższe równania umożliwiają programowi określenie, które linie przecinają każdy obiekt, oraz informacje o każdym przecięciu. Wyprowadziłem te równania z podstawowych równań współrzędnych sferycznych oraz równań obrotu 2D:

r=odległość, t=theta(kąt poziomy), p=phi(kąt pionowy), A=obrót wokół osi Y(obrót pionowy), B=obrót wokół osi Z(obrót poziomy)

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

oświetlenie=Klight/r*(Kx lub Ky lub 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)))

Krok 4: Program

Mam nadzieję, że ta prototypowa przeglądarka 3D pomogła Wam zrozumieć działanie wirtualnej rzeczywistości 3D. Po kilku udoskonaleniach i kodowaniu ta przeglądarka z pewnością ma potencjał do wykorzystania w tworzeniu gier 3D.