3D Animation in VB.NET Using WPF – Part 1


In previous articles we worked exclusively with 2D objects; in this article we are going to start dealing with basic 3D objects. While many may be expecting a VB based 3D rendering engine, we will actually be using Microsoft’s Windows Presentation Foundation (WPF) Subsystem that has been available to .NET since Framework 3.0.

While WPF is 3D object orientated, it unfortunately does not do 3D Wireframes out the box, and requires quite a bit of tinkering , so we are only going to do some theory basics on wireframes.

What is 3D?

Let’s go simple; 3D uses 3 coordinates (X,Y,Z) to define the location of a single point in space. Everything that we’ve covered in previous articles only required two coordinates(X,Y) to place the items on screen. The additional coordinate that we are using is for the depth, or, in simpler terms, how far back the point is.

So: X, as usual, is how far left and right, Y is up and down. And Z is how far back or forward, as shown in this image.

XYZ directions
Figure 1: The XYZ axis

Hmm, in the image it looks like Z is a diagonal direction from top left to bottom right. That is one of the problems with trying to display 3D objects on a 2D plain. The depth of the object simply gets lost.

wireframe Cube
Figure 2: The 3D wireframe looks like a square

In this image I’ve rendered a 3D wireframe cube, however it simply looks like a square. Now this is where 3D rendering comes into effect. Let’s do a little quick experimenting. Below is a simple Image with some text. Read the first line, then move back from your screen about 1/2 meter (1 1/2 feet) or until you can still read it relatively clearly. Now look at the text on the right.

Distance test text
Figure 3: Near and far

The text on the right appears to stand alittle farther away from you than the text on the left. This is a simple example of rendering 3D objects on a 2D plain. The farther away from you the smaller the object appears.

So let’s redraw our cube using this concept.

wireframe Cube with Z calculation
Figure 4: Redraw the cube

Now we can see the additional lines joining to a second square, but if you look at it just right, it does appear to be a wireframe cube.

So what have we learnt from this experiment. Well, the farther away from the object the smaller it appears to be. With that we can now say that in our rendering code where we convert our X,Y,Z coordinates to X,Y coordinates; we have to adjust X and Y according to Z. The farther back Z is, the closer the X,Y coordinates move to 0 (or the center of the viewpoint).

3D Planes

Now that we have a basic knowledge of coordinates, let’s look at 3D planes. In the simplest form, a plane is a single 2D part of the 3D image, represented by 3 coordinates. I guess the best way to explain is with this picture.

Plane on a 3D object
Figure 5: A plane is a single 2D part of a 3D image

Here the 2D plane MNOP holds the coordinates ABC. AB&C are the corner coordinates of a triangle face of our 3D pyramid object. If we had to depict this plane onto a 2D surface, our view would be something like this.

Direct view of Plane
Figure 6: Depicting a plane onto a 2D surface


Simply put a Vector is a single point and a direction. Often the direction is best represented by a second set of coordinates. However the second set of coordinates is not used to calculate a length.


Texture is the colour or image placed on the object’s surface, this could be one for the complete object, or even one for each face. The textures are placed over our wireframe and essentially give our object a skin and volume. There are many effects that can be used with textures to give each object different features. For the purpose of this article we will be using solid colours, so that surfaces that are not facing the viewpoint, or behind another object will not be visible.

Okay that’s the basic’s out of the way. On the next page we will do some code

More by Author

Must Read