3D Graphics Fundamentals

[tt]3D Graphics Fundamentals
------------------------[/tt]

So you want to do 3D graphics? First, you have to understand the math. There's no other way to do it. The concepts behind the graphics are not difficult, however. What we're dealing with is basically the transformation of points from this:
[tt]
|y
|
| /z
| /
| /
|/
-------*------
/| x
/ |
/ |
/ |
|[/tt]

.. to this:
[tt]
___________
/ ======= /|
____________/_=======__/_|______
/ /|
+-------------------------------+ |
| .-------------------------. | |
| | |y | | |
| | | | | |
| | | | | |
| | | | | |
| | ------------*------------ | | |
| | | x | | |
| | | | | |
| | | | | |
| | | | | |
| '-------------------------' | |
| o o o o o o [0] |/
+----------__--------___--------+
/ /._____.\ / /____________/ /
/_____________\/[/tt]

If we take a closer look at what we're given to work with -- that is, the 3D space, or the so-called 'worldspace', in which our points are originally represented, from top-down, we see this:
[tt]
|z
|
|
|
|
|
|
---------------*--------------
|y x
|
|
|
|
|
|[/tt]

The Y axis is no longer visible since it extends directly upwards from the diagram, away from your screen. Now, let's place a typical point into worldspace:
[tt]
|z
|
|
|---P(x,y,z)
| |
| |
| |
---------------*--------------
|y x
|
|
|
|
|
|[/tt]

The point P is at coordinates (x,y,z). Now, the concept of what we want to do is that we want to place the point on the screen so that it will be along the line of sight between the eye and the real point P, in the hopes that we can fool the eye into believing that it IS the point P. To do this, we need some representation of the screen in our 3D world. This is easier than it sounds, because the screen is nothing more than a section of a plane -- perfectly flat. Things become substantially simpler if we restrict the screen to be parallel to the XY plane. Our diagram now looks like this:
[tt]
|z
|
|
| P(x,y,z)
|
|
|---------|
|
|
---------------*---------------
|y x
|
|
|
|
|
|
|
|[/tt]

Two points are important in setting up the line-of-sight between the eye and the point P, and those are the eye and the point P themselves. We know where the point P is, but we haven't declared where the eye is yet. Having placed the screen like this, somewhat away from the XY plane, we can use the origin as the point that we're projecting from. Representing this in the diagram gives us this:
[tt]
|z
|
|
|-----P(x,y,z)
| /
| /
|-------S-|
| /
|/
---------------E---------------
|y x
|
|
|
|
|
|
|
|[/tt]

.. where S is the point whose coordinates we need to know to place the pixel on the screen in the line-of-sight from E to P. Getting the coordinates of this point is easy. We know that the 'z' coordinate is the same as the screen, and we can put the screen wherever we want to. For simplicity, we can make this value 1. Getting the X and Y coordinates is a little bit more complicated, but still not hard. Notice that a system of similar triangles has been set up: the triangle with ES as hypotenuse has the same angles as the triangle with EP as hypotenuse. This means that there is proportionality between the edges of the two triangles. To simplify things, let's add two points to the diagram:
[tt]
|z
|
|
K-----P(x,y,z)
| /
| /
|----J--S-|
| /
|/
---------------E---------------
|y x
|
|
|
|
|
|
|
|[/tt]

Using these 5 points, and denoting the distance between two points by specifying the two points (eg, EP for the distance from the eye to the point), the following proportionalities can be observed:
[tt]
JS ES EJ
---- == ---- == ----
KP EP EK[/tt]

We can construct a similar system as viewed from the right-hand side:
[tt]
|y
|
|
| P(x,y,z)
| /|
| --/ |
| S |
| /| |
|/ | |
---------------E--J--K---------
|x | z
| |
| |
| ---
|
|
|
|
|[/tt]

Because of this, the above proportionalities can be expanded to:
[tt]
Sx Sy Sz
---- == ---- == ----
Px Py Pz[/tt]

Since we know that Sz -- the Z coordinate of the screen -- is 1, we can re-arrange these proportionalities into the following equations:
[tt]
Px
Sx == ----
Pz

Py
Sy == ----
Pz[/tt]

Thus, the conversion from worldspace to the screen, which is referred to as viewspace, is a straightforward set of divisions. All that remains to be attended to are minor technicalities, such as the dimensions of the screen. It's not as simple as saying that one unit is one pixel, because by simplifying Sz as 1, that would require that the user be 1 pixel away from the screen, which is not the typical scenario. Assuming that we're dealing with SCREEN 13, which is 320x200x256 with roughly 1 mm per side on the pixels, the user is usually about 75 cm away from the monitor, which translates to 750 pixels. With larger screens, the user usually places themselves farther away, and with smaller monitors, the user usually sits closer to the monitor, so any inequities in pixel size with respect to monitor size tend to balance out proportionally and can be ignored. Now, if the user is 750 pixels away from the screen, the point on the screen S has a z value of 1, that means that the unit of z in worldspace is equivalent to 750 pixels. Since the system uses the same units for x and y as it does for z, the screen's boundaries in worldspace must be (-160 / 750, -100 / 750) to (160 / 750, 100 / 750). The x and y coordinates of S are thus scaled down by 750 from the corresponding screen coordinates, and they must be multiplied by 750 to get these values. The distance 75 cm is arbitrary, and it can be modified or calculated from angles to get different fields of vision, or FOVs (like in Quake). Once you have the coordinates, you can do whatever you want with them. Some sample code to demonstrate this follows. As usual, the code is optimized for readability, rather than speed.

[tt]
[color #000080]CONST[/color] PixelsFromEyeToCentreOfScreen# = 750

[color #000080]CONST[/color] SphereStripes% = 32
[color #000080]CONST[/color] SphereDotsPerStripe% = 24
[color #000080]CONST[/color] NumDots% = SphereStripes% * SphereDotsPerStripe%

[color #000080]CONST[/color] SphereRadius# = 1
[color #000080]CONST[/color] SphereCentreX# = 0
[color #000080]CONST[/color] SphereCentreY# = 0
[color #000080]CONST[/color] SphereCentreZ# = 8
[color #000080]TYPE[/color] pointType
x [color #000080]AS DOUBLE[/color]
y [color #000080]AS DOUBLE[/color]
z [color #000080]AS DOUBLE[/color]
oldScreenX [color #000080]AS INTEGER[/color]
oldScreenY [color #000080]AS INTEGER
END TYPE
DECLARE SUB[/color] makeSphere (dot() [color #000080]AS[/color] pointType)
[color #000080]DIM[/color] dot(1 [color #000080]TO[/color] NumDots%) [color #000080]AS[/color] pointType
makeSphere dot()
[color #000080]SCREEN[/color] 13
[color #000080]DO[/color]
[color #008000]'0.003 radians == 17.2 degrees[/color]
rotation# = rotation# + .003
[color #000080]IF[/color] rotation# > 6.283185 [color #000080]THEN[/color] rotation# = rotation# - 6.283185

[color #000080]FOR[/color] i% = 1 [color #000080]TO[/color] NumDots%
thisX# = dot(i%).x
thisY# = dot(i%).y
thisZ# = dot(i%).z

[color #008000]'rotate point around Y axis at Sphere Center (X,Y,Z)[/color]
rotatedX# = [color #000080]COS[/color](rotation#) * (thisX# - SphereCentreX#) - [color #000080]SIN[/color](rotation#) * (thisZ# - SphereCentreZ#) + SphereCentreX#
rotatedY# = thisY#
rotatedZ# = [color #000080]SIN[/color](rotation#) * (thisX# - SphereCentreX#) + [color #000080]COS[/color](rotation#) * (thisZ# - SphereCentreZ#) + SphereCentreZ#

[color #008000]'translate to screen coordinates[/color]
pointSX# = rotatedX# / rotatedZ#
pointSY# = rotatedY# / rotatedZ#

screenX% = 160 + pointSX# * PixelsFromEyeToCentreOfScreen#
screenY% = 100 - pointSY# * PixelsFromEyeToCentreOfScreen#

[color #008000]'do a little bit of depth queuing (very simple =D)[/color]
[color #000080]IF[/color] rotatedZ# > SphereCentreZ# [color #000080]THEN[/color]
colour% = 8 [color #008000]'dark gray[/color]
[color #000080]ELSEIF[/color] rotatedZ# > SphereCentreZ# - SphereRadius# / 2 [color #000080]THEN[/color]
colour% = 7 [color #008000]'light gray[/color]
[color #000080]ELSE[/color]
colour% = 15 [color #008000]'white[/color]
[color #000080]END IF[/color]

[color #008000]'draw pixel[/color]
[color #000080]PSET[/color] (screenX%, screenY%), colour%

[color #008000]'erase old pixel in a fairly flicker-free way[/color]
[color #000080]IF[/color] (dot(i%).oldScreenX <> screenX%) [color #000080]OR[/color] (dot(i%).oldScreenY <> screenY%) [color #000080]THEN
PSET[/color] (dot(i%).oldScreenX, dot(i%).oldScreenY), 0
[color #000080]END IF[/color]

[color #008000]'store new pixel's position for next time[/color]
dot(i%).oldScreenX = screenX%
dot(i%).oldScreenY = screenY%
[color #000080]NEXT[/color] i%
[color #000080]LOOP UNTIL INKEY$[/color] <> ""
[color #000080]SCREEN[/color] 0: [color #000080]WIDTH[/color] 80, 25

[color #000080]SUB[/color] makeSphere (dot() [color #000080]AS[/color] pointType)
[color #000080]FOR[/color] i% = 1 [color #000080]TO[/color] SphereStripes%
heading# = 6.283185 * i% / SphereStripes%
[color #000080]FOR[/color] j% = 1 [color #000080]TO[/color] SphereDotsPerStripe%
pitch# = 3.141592 * (j% - 1) / (SphereDotsPerStripe% - 1) - 1.570796
thisDotX# = SphereRadius# * [color #000080]SIN[/color](heading#) * [color #000080]COS[/color](pitch#)
thisDotY# = SphereRadius# * [color #000080]SIN[/color](pitch#)
thisDotZ# = SphereRadius# * [color #000080]COS[/color](heading#) * [color #000080]COS[/color](pitch#)
thisDotIndex% = (i% - 1) * SphereDotsPerStripe% + j%
dot(thisDotIndex%).x = thisDotX# + SphereCentreX#
dot(thisDotIndex%).y = thisDotY# + SphereCentreY#
dot(thisDotIndex%).z = thisDotZ# + SphereCentreZ#
[color #000080]NEXT[/color] j%
[color #000080]NEXT[/color] i%
[color #000080]END SUB[/color][/tt]