Using XNA to Draw a Rotating Triangle

Generally, the most basic thing you can do in a 3D API is to draw a rotating 3D triangle. So our first step towards 3D graphics with XNA will be just that, a simple, constantly rotating, triangle.

Because XNA always uses shaders to draw geometry, this example will be slightly more complicated than your usual rotating triangle code. Don't worry, though, that what makes things slightly more complicated now will save you heaps of time in the future when you work on an actual game.

Creating a New Project

Begin by firing up XNA Game Studio / Visual C# Express and create a new XNA Game Project:

You will end up with a new project containing an empty game class and the usual Program.cs with the application entry method. The assistant has already added a GraphicsComponent to your game that will initialize Direct3D and clear the window background with it. When you run this project, it looks like this:

Setting up the scene

Our first step will be to tell the Direct3D device where things are in our scene. This is done using three matrices respectively called world, view and projection matrix (with XNA's shader-based approach you could actually use any number of matrices, but until you tackle character animation, you can do pretty much everything with this design).

• Projection - The projection matrix is what transforms 3D coordinates into screen coordinates. It controls whether we do a perspective projection (things become smaller the farther away they are), an orthogonal projection (keeping objects at their original size as often seen in CAD and modelling tools) or some crazy other kind of projection.
• View - The view matrix defines the position and orientation of the viewer (commonly referred to as the camera).
• World - Before you draw a mesh in your scene, you will change the world matrix to control where the mesh is drawn. All meshes are (usually) modelled with coordinates around the coordinate system's center, so if you want to draw a tree and some specific position, you first set the world matrix to that position and then call the tree's drawing method.

So let's add some fields to our game class to store these matrices and initialize them:

Next we need to create a vertex declaration that tells the graphics card how our vertex structure looks like. Theoretically, you could mix just about anything into your vertex structure, including data that will not be used by the graphics card, but graphics memory is limited, so you should consider this a fancy way to add texture coordinate pairs, model skinning weights and other components to a vertex when neccessary.

To do this, add another field to your game class:

Then assign the following to his field in your Initialize() method:

VertexPositionColor is a predefined declaration for vertices with only position and color components, just like the name says.

Now that we can tell the graphics card what format our vertices are in, we can already make it draw the triangle using the default shader that's implemented in XNA (more on shaders later, just accept that they're required for now :p). This default shader we need is contained in the BasicEffect, so we'll have to add an instance of that class to our game, too.

Add another field to your game class:

and initialize it in your Initialize() method just like the VertexDeclaration we added before:

Now we can finally tell the graphics card to actually draw something. Modify your Draw()method so it looks like this:

If you would run your project now, you should see the following result:

On the next page, we will create the shaders for the triangle!

Preparing the Shaders

You probably know about shaders already, little programs that are executed by the GPU on your graphics card to do fancy stuff.

A vertex shader is run once for each vertex you draw and has the ability to move it to another position. It is also responsible for transforming vertices by the matrices we talked about earlier in this article to translate the 3D coordinates we're feeding to the graphics card into flat 2D screen coordinates. A pixel shader is run once for each pixel drawn and is responsible for calculating the color of that pixel, often combining multiple textures and doing complex lighting calculations.

However, in a real world situation, you are often confronted with the choice to either write shaders for the lowest common denominator, eg. shader model 1.1 or to provide different shaders that are selected depending on the generation of the graphics card used. Older shaders might even require the graphics card to draw a mesh multiple times because not everything can be done on a single run.

This is solved by so-called effects. Effects were invented to get rid of this chaos: An effect basically contains everything needed to define how a mesh should look when rendered, including different vertex and pixel shaders that are selected depending on the class of graphics card that is used.

Let's add an effect to our project. Since Visual C# does not yet know what an effect file (.fx) is, we'll use the 'text file' type instead:

The shader for our rotating triangle will be a simple one:

Explaining the effect file language and HLSL (High-Level Shader Language), the language used to program the shaders in the effect files, would go too far here. As a beginner, it probably is best to just use predefined effects that you can obtain from sources such as the excellent ShaderX books or even create from within your modelling tool. If you really want to delve into effect file writing, browse the MSDN docs for more informations!

Make sure the .fx file is processed by the XNA content pipeline. If everything is right, it should carry the following settings:

Back to our code. We need to somehow load this effect file. This is where the XNA ContentManager class comes into play. The ContentManager is responsible for loading maintaining any assets such as textures, meshes and, of course, effect files. To have the ContentManager load our effect, we need to remove the BasicEffect construction in the Initialize() method:

Add another field to your class:

Then add this piece of code to your constructor in order to compile the effect file and construct an Effect instance.

Instead, let the ContentManager create the effect by adding the following code into the LoadGraphicsContent() method of your game:

The effect will, however, not show up yet because we didn't tell the graphics card to render the triangle with this effect. If you run the project now, the triangle would still be black.

To make use of the effect, you need to actiate it before drawing, then repeat drawing your polygons as often as the effect requires and ultimately terminate the effect again. The following Draw() method does all this:

There it is. A nice, colorful triangle drawn using the shaders from the .fx file we created earlier. The final step will be to let the triangle rotate on the Y axis!

Adding Movement to the Scene

If you haven't looked at the Game Loop Basics yet, just keep in mind that the Update() method will be called once for each 1/60th of a second that has passed. So this is the ideal place to rotate the world matrix (which controls the position and orientation of the triangle).

There we are. A colored triangle, drawn by a pixel shader, rotated by a vertex shader and spinning at the same speed, independent of the frame rate.

Of course, in a real game, you would not just throw all your code into the game class. Instead, you would design a framework to manage your shaders, meshes and vertex declarations, create the game logic to control your environment, actors and interactions between all those, gather data from input devices and so on. The game class itself would only make calls to the appropriate subsystems.

Full Code

Here's the full code for the final stage of the game class again. You can also download the finished Visual C# project from this link: XNA Rotating Triangle Example Source Code