This demonstration shows how to draw using the five common primitive objects with vertex data. These objects are arranged to draw a Martian’s face (see Fig- ure 5-3). The Martian’s eyes are made using six vertices that draw two separate white
C H A P T E R 5
Introductionto3DGraphicsProgramming
triangles in a triangle list. Two vertices are used in a point list to make two tiny black pupils for these eyes. A green triangle is drawn using a third triangle in the triangle list to create the skin of the Martian’s face. The Martian’s mouth is made using five verti- ces to draw three triangles in one red triangle strip. The nose is drawn using three ver- tices in one line strip that makes two separate lines. Two yellow eyebrows are drawn using four vertices in a line list. At first glance, the output from this demonstration might seem limited, but keep in mind that primitive objects are the foundation of any 3D world, so understanding them is worth your time.
This example begins with either the MGHWinBaseCode project or the MGH360BaseCode project in the BaseCode folder in the download from this book’s web site. The basic code for each of these projects is identical. The framework differ- ences between the two allow the MGHWinBaseCode project to run on your PC and the MGH360BaseCode project to run on the Xbox 360.
With this base code, you can move through the 3D world either by moving the left thumbstick on the game controller up or down or by pressing theUPorDOWN AR- ROWon the keyboard. Moving the left thumbstick to the left or right allows you to strafe—as do theLEFTandRIGHT ARROWkeys on the keyboard. If you prefer, you can also use theW,A,S, andDkeys to move and strafe while viewing your 3D world.
Moving the right thumbstick, or the mouse, allows you to adjust the view. Before you start this example, you may want to run the project and experiment in the basic 3D world.
When drawing in 3D with XNA, you have to use a shader. To draw primitives from vertices that store position and color, you must have a shader that can process vertices with position and color. Shaders will be discussed in the next chapter, Chap- ter 6. In a nutshell, shaders receive vertex data from the C# application, apply filters, and then perform other user-defined operations such as texturing, coloring, and lighting. The output from the shader is pixel output in your game window.
M I C R O S O F T X N A G A M E S T U D I O C R E A T O R ’ S G U I D E
60
F I G U R E 5 - 3
Final output for the drawing primitive objects example
61
For this example to work properly, you need to reference the shader file named PositionColor.fx in your project. It is already referenced in the base code. Chapter 6 shows how to add and reference this shader in addition to explaining how all of this code works.
Triangle Strip
When you work through the next portion of this example, and you run your project, three triangles will appear together to create the Martian’s mouth.
You must declare a vertex array in your game class to store five vertices containing position and color information for the three triangles that will be drawn in the strip.
To do so, add this code:
private VertexPositionColor[] triangleStrip = new VertexPositionColor[5];
Next, a method containing code to initialize the positions and colors for each ver- tex in the triangle strip can be added to the game class:
private void InitializeTriangleStrip(){
Color color = Color.Red; // mouth
triangleStrip[0]
= new VertexPositionColor(new Vector3(-0.15f, 1.40f, -3.0f), color);
triangleStrip[1]
= new VertexPositionColor(new Vector3(-0.10f, 1.37f, -3.0f), color);
triangleStrip[2]
= new VertexPositionColor(new Vector3(-0.00f, 1.40f, -3.0f), color);
triangleStrip[3]
= new VertexPositionColor(new Vector3( 0.10f, 1.37f, -3.0f), color);
triangleStrip[4]
= new VertexPositionColor(new Vector3( 0.15f, 1.40f, -3.0f), color); } The method InitializeTriangleStrip() should be called at the end of Initialize()to set up the array of vertices for the triangle strip when the pro- gram begins:
InitializeTriangleStrip();
Next, you need a method in the game class for drawing the primitive object from the vertex array. For most examples throughout this book, the drawing of primitive shapes is done in five simple steps:
1. Declare transformation matrices for scaling, moving, and rotating your graphics.
C H A P T E R 5
Introductionto3DGraphicsProgramming
2. Initialize the transformation matrices.
3. Build the cumulative transformation by multiplying the matrices.
4. Set the shader parameters.
5. Select the vertex type, primitive type, and number of vertices, and then draw the object.
The first three steps involve setting up a cumulative matrix to transform the object through scaling, translations, and rotations. Transformations are covered in Chapter 7. More detail is presented in Chapter 6 to explain step 4 (where the shader variables are set). For the purpose of introducing vertices and primitive shapes in this chapter, we’ll focus on step 5.
For our demonstration, the drawing in step 5 is implemented with a method calledPositionColorShader().PositionColorShader()has already been added to the base code. The drawing instructions contained in this method are nested between the Begin() and End() methods for the pass to the PositionColor.fx shader. The graphics device VertexDeclaration property is assigned the VertexPositionColorstorage type. This property allows the graphics device to retrieve the data in the correct format, which in this case contains color and posi- t i o n data. The D r a w U s e r P r i m i t i v e s ( ) method is assigned the
<VertexPositionColor> format, the primitive type is set for surface type out- put, and the vertex array vertexData is specified as the source of vertices with color and position data. The last two parameters of theDrawUserPrimitives() method select the offset of the vertex array and the total primitives to be drawn:
private void PositionColorShader(PrimitiveType primitiveType, VertexPositionColor[] vertexData, int numPrimitives){
positionColorEffect.Begin(); // begin using PositionColor.fx positionColorEffect.Techniques[0].Passes[0].Begin();
// set drawing format and vertex data
graphics.GraphicsDevice.VertexDeclaration = positionColor;
graphics.GraphicsDevice.DrawUserPrimitives<VertexPositionColor>(
primitiveType, vertexData, 0, numPrimitives);
positionColorEffect.Techniques[0].Passes[0].End();
positionColorEffect.End(); // stop using PositionColor.fx }
For all primitives drawn in this example, you are going to draw each object at the position where their vertices were defined earlier. To do this, you add the
M I C R O S O F T X N A G A M E S T U D I O C R E A T O R ’ S G U I D E
62
63
DrawObjects()method to the game class.DrawObjects()uses the vertex data you declare at the program start to callPositionColorShader() to perform the drawing:
void DrawObjects(){
// 1: declare matrices Matrix world, identity;
// 2: initialize matrices identity = Matrix.Identity;
// 3: build cumulative world matrix using I.S.R.O.T. sequence // identity, scale, rotate, orbit(translate & rotate), translate world = identity;
// 4: set the shader parameters
positionColorEffectWVP.SetValue(world *
cam.viewMatrix * cam.projectionMatrix);
// 5: draw object - set primitive type, vertex data, # of primitives PositionColorShader(PrimitiveType.TriangleStrip, triangleStrip, 3);
}
All drawing is triggered from inside the Draw() method before the base.Draw()instruction:
DrawObjects();
Try running this version of the program, and you’ll find that the graphics output is displayed in the game window. More specifically, three red triangles in a strip will ap- pear in front of your view.
Triangle List
When you need to draw separate triangles, the triangle list is handy. To continue with this example, you will create white eyes and a green face for the Martian by display- ing two triangles in a list. A vertex array with room for nine vertices (for three trian- gles) is needed to store the position and color data that will be used to draw the triangles. To set up this array, add the following declaration to the top of the game class:
private VertexPositionColor[] triangleList = new VertexPositionColor[9];
C H A P T E R 5
Introductionto3DGraphicsProgramming
A method for initializing each vertex in the triangle list, InitializeTriangleList(), is needed in the game class:
private void InitializeTriangleList(){
Color color = Color.White; // left eye triangleList[0]
= new VertexPositionColor(new Vector3(-0.20f, 1.5f, -3.0f), color);
triangleList[1]
= new VertexPositionColor(new Vector3(-0.15f, 1.6f, -3.0f), color);
triangleList[2]
= new VertexPositionColor(new Vector3(-0.10f, 1.5f, -3.0f), color);
color = Color.White; // right eye triangleList[3]
= new VertexPositionColor(new Vector3( 0.20f, 1.5f, -3.0f), color);
triangleList[4]
= new VertexPositionColor(new Vector3( 0.15f, 1.6f, -3.0f), color);
triangleList[5]
= new VertexPositionColor(new Vector3( 0.10f, 1.5f, -3.0f), color);
color = Color.Green; // face triangleList[6]
= new VertexPositionColor(new Vector3( 0.5f, 1.7f, -3.05f), color);
triangleList[7]
= new VertexPositionColor(new Vector3( 0.0f, 1.2f, -3.05f), color);
triangleList[8]
= new VertexPositionColor(new Vector3(-0.5f, 1.7f, -3.05f), color);
}
Call InitializeTriangleList() fromInitialize() to fill the vertex array with data that can be used to draw the three triangles in the list:
InitializeTriangleList();
At the end ofDrawObjects(), after the triangle strip is drawn, the triangle list can be rendered. The drawing of the three new and separate triangles in a list is trig- gered by calling PositionColorShader() with new parameters for primitive type, vertices, and total primitive objects. Drawing more than one primitive object from the samePositionColorShader()method is possible because both primi- tive objects use the same vertex format,VertexPositionColor. Notice that the PrimitiveTypespecified for this new addition isTriangleListand the total
M I C R O S O F T X N A G A M E S T U D I O C R E A T O R ’ S G U I D E
64
65
number of primitives rendered in the list is three. The data in our vertex array for the triangle list,triangleList, is being referenced when drawing the triangle list:
PositionColorShader(PrimitiveType.TriangleList, triangleList, 3);
When you run the new version of the program, it will show the three triangles in the strip to create the Martian’s mouth, two triangles in a triangle list to create the white eyes, and one triangle in the triangle list to create the green face.
Drawing a Line Strip
You have seen how triangles can be created and drawn using strips and lists. The same logic applies for drawing lines. For this next portion of the example, a line strip will be used to draw the Martian’s nose. The line strip might be useful for you if you ever want to show a wire grid between the vertices that make the 3D object. You un- doubtedly have seen this effect used when rendering 3D models or terrain with line strips instead of triangle strips.
A vertex array must be declared with the position and color data that build the line strip. For this example, enough room will be given to store two lines in the strip. In other words, three vertices are required. To declare the vertex array, add this code to the module declarations section:
private VertexPositionColor[] lineStrip = new VertexPositionColor[3];
Next, add a method to store the vertex information for each of the vertices in the line strip. For each vertex, the X, Y, and Z position is specified and the color is as- signed.
private void InitializeLineStrip(){
Color color = Color.Red; // nose lineStrip[0]
= new VertexPositionColor(new Vector3(-0.05f, 1.46f,-3.0f), color);
lineStrip[1]
= new VertexPositionColor(new Vector3( 0.00f, 1.55f,-3.0f), color);
lineStrip[2]
= new VertexPositionColor(new Vector3( 0.05f, 1.46f,-3.0f), color);
}
To initialize the line strip when the program begins, add the call statement for InitializeLineStrip()to the end of theInitialize()method:
InitializeLineStrip();
C H A P T E R 5
Introductionto3DGraphicsProgramming
Finally, code for drawing our line strip is added as the last line in the DrawObjects()method after the setup for the rendering has been completed. This instruction uses thePositionColorShader()method to draw two lines in a strip using position and color data from thelineStriparray:
PositionColorShader(PrimitiveType.LineStrip, lineStrip, 2);
When you run the game application, the output will use the line strip to draw the Martian’s nose.
Adding a Line List
Now that drawing lines using strips has been demonstrated, this next section of code will show how to add two lines that are drawn using a list. Each line in the list re- quires two separate vertices. The vertex array needed to store each vertex in the line list is declared in the module declarations section of the game class.
private VertexPositionColor[] lineList = new VertexPositionColor[4];
A method,InitializeLineList(), for initializing each vertex in the line list with X, Y, Z, and color data, is added to the methods section:
private void InitializeLineList(){
Color color = Color.Yellow; // eyebrows lineList[0]
= new VertexPositionColor(new Vector3(-0.18f, 1.60f,-3.0f), color);
lineList[1]
= new VertexPositionColor(new Vector3(-0.12f, 1.63f,-3.0f), color);
lineList[2]
= new VertexPositionColor(new Vector3( 0.12f, 1.63f,-3.0f), color);
lineList[3]
= new VertexPositionColor(new Vector3( 0.18f, 1.60f,-3.0f), color);
}
InitializeLineList()is called fromInitialize()to set up the line list when the program begins:
InitializeLineList();
Finally, a new instruction should be added to the very end of the DrawObjects() method to render the line list. The first parameter of the PositionColorShader()method sets theLineListtype, the second parame-
M I C R O S O F T X N A G A M E S T U D I O C R E A T O R ’ S G U I D E
66
67
ter selects thelineListarray as the source of vertex data for the primitive object being drawn, and the third parameter sets the total number of lines that are rendered.
PositionColorShader(PrimitiveType.LineList, lineList, 2);
When you run the program, two separate lines will be drawn in as the Martian’s eyebrows.
Adding a Point List
Now for our final primitive object—the point list. In this portion of the demonstra- tion, two points from a list will be added to the window.
First, a class declaration for a vertex array is used to store each point in the list us- ing the position and color format:
private VertexPositionColor[] pointList = new VertexPositionColor[2];
Next, a method is required to initialize each vertex in the point list with X, Y, Z position data and color information. To do this, add the following method to the game class:
private void InitializePointList(){
Color color = Color.Black; // pupils pointList[0]
= new VertexPositionColor(new Vector3(-0.15f, 1.53f,-3.0f), color);
pointList[1]
= new VertexPositionColor(new Vector3( 0.15f, 1.53f,-3.0f), color);
}
The point list should be initialized when the program starts. A call to InitializePointList()from theInitialize()method will do this:
InitializePointList();
Now the point list can be drawn. Add the following call to PositionColorShader()at the end of theDrawObjects()method. The pa- rameters indicate that aPointListis being rendered, the vertex data should be read from thepointListvertex array, and two points are being drawn:
PositionColorShader(PrimitiveType.PointList, pointList, 2);
When you run the program, two points will appear in the middle of the Martian’s eyes.
C H A P T E R 5
Introductionto3DGraphicsProgramming
This chapter has shown how to draw 3D graphics. The vertices and primitive sur- faces drawn with these simple shapes are the foundation for all 3D game graphics.
Even fiery effects and 3D models begin with vertices and primitive surfaces.