So far we have only built single triangles. Sometimes (such as in the last lesson) we have gotten advanced and drawn two triangles, but they were not connected.

3D models are made out of many triangles connected together to form geometry. In this lesson, we will cover how to build some simple geometry out of triangles, and how to move them, rotate them and size them as a whole.

Quad, as we should all know, means four. In geometry, a quad is a four-sided shape of any kind. The following are each quads.

Various Quads

Earlier I said that triangles make up all shapes in a 3D world. If you look carefully, each of these quads is made up of two triangles placed side by side.

Quads Are Dual Triangles

As a matter of fact, this is true of all quads, regardless of shape. These two triangles combined can make quite a variety of useful shapes in game programming, such as building terrain, walls, boxes, and any other shape with four sides.

The prime question is, how do you make them? We are already familiar with building triangles, so now let's look at how that code could be changed to draw a square instead. First, let's look at the init_graphics() function we were using earlier. This time, it has been changed to represent a quad, rather than a triangle. Notice there are four points here. The changes, as usual, are in bold.

Now we have a full square in memory. Now how do we show it? Let's take a look at the code that draws them from the render_frame() function.

Of course, there is also code to set up the pipeline, but that isn't relevant here. What is relevant is what is different about the DrawPrimitive() function. Notice that the first parameter now says D3DPT_TRIANGLESTRIP rather than D3DPT_TRIANGLELIST. Also notice that the third parameter was changed to a 2.

In case you are foggy on what each of these parameters do, the first parameter says what kind of primitive is being drawn, the second parameter says what vertex in the buffer should be started with (0 is the first vertex), and the third parameter says how many primitives should be drawn. In a triangle strip, the primitives are triangles, so a 2 means show up to 2 triangles, and stop. Well, that's the end of the vertex buffer anyway, but if we had put a 1 here, it would have stopped at one triangle. This is illustrated here:

Making Triangles

And that's all there is to building a quad! Now let's combine our quads to make a cube, our first 3D model!

It doesn't really make sense to create four vertices for every quad. If we made a cube, it would end up using twenty-four vertices, while it would really only have eight vertex positions. It would truly be easier if we could create eight vertices, then combine them to make six quads.

Well we can do this, and it does make creating simple models in code much easier. The solution is the index buffer.

In DirectX, an index is an int storing the number of a vertex. They are given in order, so the first vertex in a buffer is vertex number 0, the second is vertex number 1, the third is 2, and so on.

And index buffer is a buffer in memory that stores the order in which vertices should be rendered. Instead of storing a long list of coordinates, it instead stores a long list containing indexes (or indices).

Let's learn by example.

Here we have eight corners of a cube. Each corner has a coordinate in space, but is labeled with an index number.

A Cube Made of Eight Indices

We make this by building a vertex buffer with eight different vertices, each representing one corner of the cube, including its coordinates and color.

However, this doesn't create any triangles or quads, just corners. To build a triangle, we simply refer to three indices in a row. If we used "0, 1, 2" and "2, 1, 3", we would get these two triangles. Notice that we could do the same to each side of the cube, making one quad for each.

Two Triangles on the Cube

Before we say which indices we want to use, we need to make an index buffer, so let's build one. We do this using a function called CreateIndexBuffer().

This is almost exactly the same as CreateVertexBuffer(). Only one parameter is different, but let's go ahead and look at them all briefly.

UINT Length,

This is the size of the buffer. Each index is stored in an int or a short. For compatibility reasons, we'll use short, so this will sizeof(short) multiplied by the number of indices you want to use.

DWORD Usage,

Just as before, we won't get into this parameter, but set it to 0.

D3DFORMAT Format,

This parameter is new. Here we can put flags to tell DirectX how much space in memory we will give to each index. It can be D3DFMT_INDEX16 or D3DFMT_INDEX32. With 16, the indices will go to the video card twice as fast. However, you can only have up to 65536 indices. Occasionally you will need more than this. For our example, we will use D3DFMT_INDEX16, because not all video cards support 32-bits per index.

D3DPOOL Pool,

This is the same as with the vertex buffer. It tells DirectX where to store this buffer. As before, we'll use D3DPOOL_MANAGED, meaning it will be located in video memory.

LPDIRECT3DINDEXBUFFER9 ppIndexBuffer,

This is the pointer to the index buffer we'll create. We put a blank pointer in, and CreateIndexBuffer() will fill it in for us so we can refer to it later.

HANDLE* pSharedHandle

As with the vertex buffer, we'll set this to NULL.

For the most part, this function appears the same. There are only a few, small differences.

Just as with the vertex buffer, we need to build an array of indices then copy the indices into the index buffer. It's done exactly the same way:

And if you put the whole thing together:

So how do we draw all this? It's pretty simple, but it needs some new functions. Here's the drawing code. This comes after all the transforms are set and before EndScene() is called.

SetStreamSource()

This is exactly the same as before. All it does is tell Direct3D which vertex buffer we are drawing from.

SetIndices()

This function is similar, but much simpler. It's purpose is to set the index buffer we will use.

It has one parameter, the address of the index buffer. We only have one index buffer, so the parameter will be i_buffer. Remember that i_buffer is already a pointer, so we don't put &i_buffer.

DrawIndexedPrimitive()

This one is quite different than DrawPrimitive(). It essentially does the same thing, but it only draws shapes using an index buffer. Here's the prototype:

The first parameter is familiar to us. It's the style of drawing, such as triangle strips, or line lists. We're going to use D3DPT_TRIANGLELIST, because each set of three indices represents a whole triangle.

The second parameter tells how many vertices into the buffer we want to start. We're going to put 0 here, but just so you get what this is, let's take a simple example. If we put 4 here, then index 0 would point to vertex 4, index 1 would point to vertex 5, and so on.

The next number is the lowest index we'll use. We want 0, so we'll put 0. It's really just a hint to Direct3D on how to best optimize memory for us behind the scenes.

The fourth parameter is the number of vertices we'll use. We use 8 in the cube. Again, this helps Direct3D with optimization.

The fifth parameter tells DirectX where to start on the index buffer. This is used for more complicated situations where you have more than one shape stored in a single index buffer. For example, if we had a cube take up spaces 0 to 35, and a completely different shape take from 36 to 51, we could put 36 in this parameter, and DirectX would know where to start reading on the buffer. We aren't doing this, so we'll set it to 0, the beginning of the index buffer.

The last parameter is the number of triangles we will draw. This cube draws twelve, two for each side.

If you take the new code and put it into your program, you'll get a nice rotating cube (provided you still have the right transforms there). Here's a picture of a cube I got with one transform:

A Rotating Cube

Try building the cube in your program and spinning it in various ways.

Well, I don't know about you, but I'm really excited! We've built our first 3D object for real! Let's look at a couple more simple models we can make using quads and triangles.

A Square Pyramid

Let's look at how to build this shape.

A Square Pyramid

Here is the code for the vertex buffer:

And for the index buffer:

And then to draw the shape:

Take a moment to study how this code differs from the cube's.

The Hypercraft

Now let's do something a little bit more exciting. We'll take a break from boring geometry and get into some real stuff. Let's build a "Hypercraft", which is a ship from the first 3D game I ever wrote (and I've used ever since). Here's what this ship looks like:

The Hypercraft

Here's the code for the vertex buffer:

And for the index buffer:

And then to draw the shape:

And there you have it! We've got a functioning 3D model of a spaceship. Admittedly it could improve a little on the aerodynamics, but we'll get there for sure. For now, let's put in a rotation matrix and see what she looks like.

I chose to use the Hypercraft model for this demo. It rotates around much like a car advertisement, only it looks somewhat more polygonal than an actual car.

Run the code, and see the family vehicle of the future! Well, maybe the virtual future. Well, maybe not...

The Hypercraft In Action

Wow! Now we are getting somewhere with 3D! Get good at everything up to this point, and then let's move on and make the Hypercraft look decent with some 3D lighting. In the meantime, try doing these exercises:

1. Make a square
2. Make a triangular pyramid
3. Draw 20 copies of your triangular pyramid on the screen at once
4. Add a tail fin in the back of the Hypercraft
5. Design and build your own mini-spaceship

Now let's get on to lighting! Let's make these objects look cool!