3D Viewer

Hello! To satisfy my interest in programming and hopefully help satisfy yours, I would like to show you a 3D Viewer that I coded in javascript. If you would like to further your understanding of 3D games or even create your own 3D game, this prototype 3D viewer is perfect for you.

To understand the theory of this 3D viewer, you can simply examine the way that you view your surroundings (it helps to have only one significant source of light). Notice that:

1. Objects that are farther away from you take up a smaller portion of your field of vision.
2. Objects that are farther away from the light source appear darker in color.
3. As surfaces become more parallel (less perpendicular) to the light source, they appear darker in color.

I decided to represent a vision field with a bunch of lines stemming from a single point(analogous to the eyeball). Like a spike ball, the lines need to be evenly spaced out to ensure that each portion of the vision field is equally represented. In the picture above, notice how the lines coming from the spike ball become more spaced out as they move farther away from the center of the ball. This helps visualize the program's implementation of observation 1 since the density of lines decreases as objects move farther away from the center point.

The lines are the basic unit of vision in the program, and they are each mapped to a pixel on the display. When a line intersects an object, its corresponding pixel is colored based on its distance from the light source and its angle from the light source.

To simplify the program, the light source is the same as the center point (eyeball: point from which the map is viewed and where the lines stem from). Analogous to holding a light right next to your face, this eliminates shadows and allows the brightness of each pixel to be calculated much more easily.

The program also uses spherical coordinates, with the center point of vision at the origin. This enables the lines to be easily generated (each with a unique theta: horizontal angle and phi: vertical angle), and provides the basis of calculations. Lines with the same theta are mapped to pixels in the same row. The phis of corresponding angles increase across each row of pixels.

To simplify the math, the 3D map is composed of planes with a common variable (common x, y, or z), while the other two non-common variables are confined within a range, completing the definition of each plane.

To look around with the mouse, the program's equations factor in a vertical and horizontal rotation during the conversion between spherical and xyz coordinate systems. This has the effect of preforming a rotation on the "spike ball" set of vision lines.

The following equations enable the program to determine which lines intersect each object and information about each intersection. I derived these equations from the basic spherical coordinate equations and the 2D rotation equations:

r=distance, t=theta(horizontal angle), p=phi(vertical angle), A=rotation about Y axis(vertical rotation), B=rotation about Z axis(horizontal rotation)

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

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

I hope that this prototype 3D viewer helped you understand the workings of 3D virtual realities. With some more perfecting and coding, this viewer certainly has the potential to be put to use in 3D game development.