Playing with 3-D Coordinate Space in C#, GDI+ and .NET

Figure 1 - 3-D Rotation of a Cube on a Windows Form

As I was trying to think of an article to write on GDI+, I started looking through some of my old programming books and came across Tricks of the Game Programming Guru. There are good explanations in this book of the Ray Tracing Algorithm, the Painter's Algorithm, Z-Buffering, 3-D Sprite Manipulation, and (relevant to this article) dealing with a 3-D Coordinate System. The 3-D Coordinate system is shown below:

Figure 2 - 3D Coordinate system

This coordinate system consists of an x, a y and a z axis. The z axis is coming out from the screen towards you. As with a 2D Coordinate system, translation, scaling and rotation can all be handled using Matrix mathematics. The only difference is we are now translating, rotating, and scaling in 3 dimensions instead of 2. Translation, Scaling, and Rotation are all handled by 4x4 matrices.

To Translate a 3-D Object, you would multiply each vertices of the object by the matrix below:

Figure 3 - Translation in 3-D Space

Scaling is done with a scale factor multiplied by the identity matrix:

Figure 4 - Scaling a Point in 3D Space

And Rotation is done with trigonometric functions in the matrix. Because Rotation can be done either along the x, y, or z axis, there is a different rotation matrix for each of the axises:

Figure 6a - Rotation around the X axis

Figure 6b - Rotation around the Y axis

Figure 6c - Rotation around the Z axis

After looking at all these 3D equations, a question may arise in your mind. How the heck do I show a 3D object on a 2 Dimensional PC Monitor? The way this is done is with a clever mapping that fools the eye into seeing depth called perspective projection. Perspective projection relies on the fact that smaller things seem farther away. To project our 3D object onto a 2D screen we need to "throw away" the z component and scale the x and y components based on the z component. Therefore the points that have a larger z component, will appear farther away from the viewer. Also we need to multiply by a viewing distance factor to scale the image into view. Below is the formula for calculating the coordinates:

x _p = distance_value * x/z;
y _p = distance_value * y/z;

Hence we have a "3-D" coordinate in 2D Space so we can plot it on the computer.

Now that we have all the tools we need to play around in a 3-D coordinate system, let's lay out a simple design for drawing 3-D Objects. This architecture is a simple composite design consisting of an Object which consists of polygons which consists of points. There is also a matrix class used to do the transformations on the points. Methods for rotating, translating, and scaling the points are propogated through the shape to the polygon class and finally to the 3-D point class. The 3-D projection mentioned above is automatically calculated when drawing the shape.

Figure 7 - UML Design of Simple 3-D Library reverse engineered using WithClass 2000

We use the library to construct a simple cube by passing the coordinates of 6 square polygons. Then we translate and scale the cube so that we can see it large enough on the form: