Getting started with XNA – Primitives: Introducing the Index Buffer

In this tutorial, I’ll introduce an important concept: the Index Buffer. You’ll need to start from this source code. Is basically the same code as the previous tutorial, but I’ve added a class called SquareTriangleList, which draws a square with the same technique as the previous tutorial. This square has been drawn using 2 triangles. Now as you can see in the illustration below, instead of sending 4 vertices to the graphics card (one for each corner of the square), we need to send 6 vertices.

Notice that vertices 1 and 4 are the same, just as vertices 2 and 6 are the same. Now in this case, you might say, 6 vertices instead of 4, not a big loss. But remember that a 3d model is made of thousands of triangles. Drawing the models this way would cause unnecessary bandwidth to your graphics card.
That’s where the Index Buffer comes in. Using this method, you declare your vertices just once and put them in an array (in this case from index 0 to 3) and add this array to a Vertex Buffer. Then you create an Index Buffer which will contain a list of indices. So in the case of our square, the indices would be 0, 1, 2, 0, 3, and 1. Well let us make this example.
Start by adding a class to the project, call it SquareIndexBuffer and make it inherit from DrawableGameComponent. Then copy all the code from SquareTriangleList to this new class (since we’ve already discussed this code, I’m not going to spend time on explaining it again. You can always (re)do part 1 or part 2.
Ok, start by added the following variables to your class; these will just hold the vertex and index buffer.
// Create a Index Buffer
IndexBuffer indexbuffer;
// Create a Vertex Buffer
VertexBuffer vertexbuffer;

Change the vertices array to hold 4 vertices instead of 6.
// an array of the vertices that have to be drawn
VertexPositionColor[] vertices = new VertexPositionColor[4];

Then replace the declaration of your vertices by the following code (explanation below):
// create our square by setting up the vertices
// because we are using an indexbuffer, we only need 4 vertices instead of 6 (2 triangles)
vertices[0].Position = new Vector3(650, 100, 0);
vertices[0].Color = Color.Red;

vertices[1].Position = new Vector3(750, 200, 0);
vertices[1].Color = Color.Red;

vertices[2].Position = new Vector3(650, 200, 0);
vertices[2].Color = Color.Red;

vertices[3].Position = new Vector3(750, 100, 0);
vertices[3].Color = Color.Red;

vertexbuffer = new VertexBuffer(GraphicsDevice, VertexPositionColor.SizeInBytes * vertices.Length, ResourceUsage.WriteOnly, ResourceManagementMode.Automatic);
vertexbuffer.SetData(vertices);

// set up our indices
// because a square consist of 2 triangles, we need 6 points in our indexbuffer
short[] indices = new short[6];

indices[0] = 0;
indices[1] = 1;
indices[2] = 2;
indices[3] = 0;
indices[4] = 3;
indices[5] = 1;

indexbuffer = new IndexBuffer(GraphicsDevice, typeof(short), 6, ResourceUsage.WriteOnly, ResourceManagementMode.Automatic);
indexbuffer.SetData(indices);

So what are we doing in the code above. First off all, we are declaring our 4 vertices, one for each corner of the square. Then we’re creating a vertex buffer to hold those vertices.
Next in line is to create an array of integers, which will hold your indices. In our case, this array should be able to hold 6 indices, because our square consists of two triangles that have to be drawn in a clockwise order (see illustration above). In our case, the indices will be 0, 1, 2, 0, 3, 1. Each index link to a specific position in the vertex buffer above. Last, we’ll create an index buffer which will hold the indices.

Put these lines of code before the basicEffect.Begin(); call.
// prepare the graphics device for drawing by setting the vertex declaration and the vertices
GraphicsDevice.VertexDeclaration = vertexDeclaration;
GraphicsDevice.Vertices[0].SetSource(vertexbuffer, 0, VertexPositionColor.SizeInBytes);
// prepare the graphics device for drawing by setting the indices
GraphicsDevice.Indices = indexbuffer;
This is the code were we send our vertices and indices to our graphics card.

Now replace the following call in your draw code
GraphicsDevice.DrawUserPrimitives(PrimitiveType.TriangleList, vertices, 0, 2);
by this one
GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 4, 0, 2);

All that is left to do is add an object off this class to the components of our game class and press F5.
this.Components.Add(new SquareIndexBuffer(this));

You should now see the image below.

The complete source code is available for download.

The Index Buffer is an important concept in game programming. In the next tutorial, we’ll start with drawing some 2d images and animating them.