1. Triangles, Translations Game Design Experience Professor Jim Whitehead March 2, 2009 Creative Commons Attribution 3.0 (Except copyrighted images) creativecommons.org/licenses/by/3.0

2. Announcements Project progress report ► Due Today In class, or in my box by 5pm ► Take your project work breakdown and schedule (done previously) Update this schedule based on your (now improved) understanding of what still needs to be done Cut project scope, if necessary Remember, you have assignments due in other classes too Days until Final Project Due: 14 ► Due Monday, March 16

3. Announcements 3D modeling homework ► Assignment text not yet on web ► Will be up soon ► Due Monday, March 9 ► Assignment will involve: Create a simple 3D model (e.g., in Blender) –Something slightly (but not by much) more complex than a cube will be fine Make this model show up in XNA Extra credit for making model rotate, applying bitmap textures Goal is to exercise a model import pathway ► Intended to be a straightforward assignment

4. Drawing Triangles All complex 3D shapes seen in games are composed of a series of triangles ► A triangle has 3 points, one for each corner Points are more typically known as verticies Minimum number of points to unambiguously define a plane

5. Vertex Structures in XNA XNA has 4 different structures for representing verticies ► VertexPositionColor Useful for basic shapes, basic colors x,y,z plus a color for each vertex ► VertexPositionTexture Overlay a bitmap texture onto a shape x,y,z plus a u,v coordinate into a bitmap texture ► VertexPositionNormalTexture Normal permits lighting effects x,y,z plus a u,v, coordinate, plus a normal vector ► VertexPositionColorTexture Color information changes color of bitmap texture Reuse same texture in different contexts x,y,z plus u,v plus color

6. VertexPositionColor VertexPositionColor object ► Represents the x,y,z location of a vertex ► Also has a color for the vertex ► VertexPositionColor v = new VertexPositionColor(new Vector3(0,1,0), Color.Blue); ► Need 3 verticies to draw a triangle

7. Vertex Declaration XNA requires you to tell the graphics device what kind of vertex data you will be using ► Vertex data is written directly to the GPU ► Need to tell the GPU how to interpret the data it receives ► GraphicsDevice.VertexDeclaration = new VertexDeclaration(GraphicsDevice, VertexPositionColor.VertexElements); For different types of verticies, would change the vertex structure ► VertexPositionTexture example: ► GraphicsDevice.VertexDeclaration = new VertexDeclaration(GraphicsDevice, VertexPositionTexture.VertexElements);

8. Actually drawing the triangles In XNA, all 3D rendering is handled by a shader ► Shaders defined using High Level Shader Language (HLSL) ► Permits creation of wide range of visual effects ► More on shaders in a few classes XNA provides a default shader ► Called BasicEffect ► Will use this for now BasicEffect is a type of effect ► Effects contain a series of EffectPass ► Each pass handles some aspect of putting things on screen

9. Using Basic shader Five steps: 1.Create Shader ► BasicEffect effect = new BasicEffect(GraphicsDevice, null); 2.Copy over camera information ► effect.View = camera.view; ► effect.Projection = camera.projection; 3.Set world matrix ► effect.World = … (more on this in a few slides) 4.Enable vertex capabilities (varies by Vertex type) ► Effect.VertexColorEnabled = true; // for VertexPositionColor ► Effect.Texture = myTexture; // for VertexPositionTexture Effect.TextureEnabled = true; 5.Iterate through EffectPasses ► Call to DrawUserPrimitives inside EffectPass puts triangles on screen

10. Iterating Through Effect Passes Each Effect has calls to begin()/end() Effects are comprised of passes ► Each pass requires a call to begin()/end() effect.Begin(); foreach (EffectPass pass in effect.CurrentTechnique.Passes) { pass.Begin(); GraphicsDevice.DrawUserPrimitives (PrimitiveType.TriangleStrip, verts, 0, 1); pass.End(); } effect.End(); Draws verticies Passes # of triangles (the “primitive shape” in this context) to draw Index into verts array

11. Triangle Drawing Examine this line of code ► GraphicsDevice.DrawUserPrimitives (PrimitiveType.TriangleStrip, verts, 0, 1); ► What is a TriangleStrip? Three ways to draw triangles ► Triangle List Each set of three verticies defines a triangle Memory inefficient, since triangles often share edges in complex 3D meshes ► Triangle Strip Builds triangle out of first three verticies Each additional vertex creates new triangle using that vertex, plus previous two verticies ► Triangle Fan Each additional vertex creates new triable using that vertex, the previous vertex, plus the first vertex http://escience.anu.edu.au/lecture/cg/surfaceModeling/image/ surfaceModeling015.png

12. World Matrix Each triangle has 3 verticies, and each vertex has an x,y,z position ► This position is given with respect to an origin location ► That is, location is with respect to a local coordinate system World matrix ► Translates from the local coordinate system to the world (i.e., visible on screen) coordinate system Local coordinate system offset, no rotation (Note: example uses left handed coordinate system, XNA uses right-handed coordinates) Source: MSDN DirectX documentation Local coordinate system offset and rotated www1.adept.com/main/KE/DATA/V%20Plus/V%20Language%20 User/images/World+yaw.gif local world

13. Translation A translation shifts the local coordinate system relative to the world coordinate system XNA provides a method for this ► Matrix.CreateTranslation 3 parameters are x,y,z movements Matrix.CreateTranslation(0.01f, 0, 0); // Shift right (positive) along x axis Matrix.CreateTranslation(-0.01f, 0, 0); // Shift left (negative) along x axis Multiply world matrix by translation matrix to cause shift ► All translations and rotations in 3D graphics accomplished via matrix multiplication

14. Rotation A rotation shifts the local coordinate system by an angle relative to the world coordinate system XNA helper methods ► Matrix.CreateRotationX, Matrix.CreateRotationY, Matrix.CreateRotationZ Rotations around single axes Matrix.CreateRotationY(angle in radians); ► Matrix.CreateFromYawPitchRoll Rotate around multiple axes Matrix.CreateFromYawPitchRoll(yaw rad., pitch rad., roll rad.) Demonstration of example triangle drawing code