This document discusses drawing 3D primitives and using vertex and index buffers in XNA game development. It begins with an overview of different primitive types like points, lines, and triangles. It then covers drawing triangles by defining vertex positions and colors. Next, it demonstrates creating a rotating tetrahedron using triangle lists. The document concludes by explaining how to create an icosahedron mesh using vertex and index buffers to store vertex data more efficiently for rendering. Key steps include generating vertex and index data, creating vertex and index buffers, and drawing indexed triangles.

1. Mohammad Shaker
mohammadshaker.com
@ZGTRShaker
2011, 2012, 2013, 2014
XNA Game Development
L04 – Primitives, IndexBuffer and VertexBuffer

2. 3D World

3. 3D World

4. 3D World

5. Primitives
• 1 - Drawing Triangles
• 2 - A Little Practice
• 3 - Index and Vertex Buffers
• 4 - Primitive Types

6. Primitives

7. Drawing Triangles

8. Drawing Triangles
What do we need to draw?!

9. Drawing Triangles
App1-Triangles

10. Drawing Triangles
Initialize
LoadContent
UnloadContent
Update
Draw
Game1

11. Drawing Triangles
• Global Scope
SpriteBatch spriteBatch;
VertexPositionColor[] vertices;
BasicEffect basicEffect;
Matrix world = Matrix.CreateTranslation(0, 0, 0);
Matrix view = Matrix.CreateLookAt(
new Vector3(0, 0, 3),
new Vector3(0, 0, 0),
new Vector3(0, 1, 0));
Matrix projection = Matrix.CreatePerspectiveFieldOfView(
MathHelper.ToRadians(45),
800f / 600f,
0.01f,
100f);

12. Drawing Triangles
SpriteBatch spriteBatch;
VertexPositionColor[] vertices;
BasicEffect basicEffect;
Matrix world = Matrix.CreateTranslation(0, 0, 0);
Matrix view = Matrix.CreateLookAt(
new Vector3(0, 0, 3),
new Vector3(0, 0, 0),
new Vector3(0, 1, 0));
Matrix projection = Matrix.CreatePerspectiveFieldOfView(
MathHelper.ToRadians(45),
800f / 600f,
0.01f,
100f);

13. Drawing Triangles
• LoadContent()
protected override void LoadContent()
{
// Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);
basicEffect = new BasicEffect(GraphicsDevice);
vertices = new VertexPositionColor[3];
vertices[0] = new VertexPositionColor(new Vector3(0, 1, 0), Color.Red);
vertices[1] = new VertexPositionColor(new Vector3(+0.5f, 0, 0), Color.Green);
vertices[2] = new VertexPositionColor(new Vector3(-0.5f, 0, 0), Color.Blue);
}

14. Drawing Triangles
• LoadContent()
protected override void LoadContent()
{
// Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);
basicEffect = new BasicEffect(GraphicsDevice);
vertices = new VertexPositionColor[3];
vertices[0] = new VertexPositionColor(new Vector3(0, 1, 0), Color.Red);
vertices[1] = new VertexPositionColor(new Vector3(+0.5f, 0, 0), Color.Green);
vertices[2] = new VertexPositionColor(new Vector3(-0.5f, 0, 0), Color.Blue);
}

15. Drawing Triangles
• Draw()
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
basicEffect.World = world;
basicEffect.View = view;
basicEffect.Projection = projection;
basicEffect.VertexColorEnabled = true;
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives<VertexPositionColor>
(PrimitiveType.TriangleList, vertices, 0, 1);
}
base.Draw(gameTime);
}

16. Drawing Triangles
App1-Triangles

17. Drawing Triangles
• Cube

18. Different Primitive Types

19. Different Primitive Types
• PrimitiveType.Points
• PrimitiveType.LineList
• PrimitiveType.LineStrip
• PrimitiveType.TriangleList
• PrimitiveType.TriangleStrip
• PrimitiveType.TriangleFan

20. Different Primitive Types

21. Different Primitive Types

22. Different Primitive Types

23. Different Primitive Types

24. Drawing Triangles
• Using TrianglesList
• App2-Tetrahedron-TriangleList

25. Drawing Triangles
• How to do it with a simple
rotation?!

26. Drawing Triangles
• How to do it with a simple rotation?!
• First, What’s that 3D Object is?!
Tetrahedron! (Faces: 4, Vertices: 12)

27. Drawing Triangles
• How to do it with a simple rotation?!
• First, What’s that 3D Object is?!
Tetrahedron! (Faces: 4, Vertices: 12(Each one at a time or a one shot?!))

28. Drawing Triangles
• How to do it with a simple rotation?!
• First, What’s that 3D Object is?!
Tetrahedron! (Faces: 4, Vertices: 12(use TriangleList))

29. Drawing Triangles – Simple Rotation
• How to do it with a simple rotation?!
vertices = new VertexPositionColor[12];
vertices[0] = new VertexPositionColor(new Vector3(0.000f, 1.000f, 0.000f), Color.Red);
vertices[1] = new VertexPositionColor(new Vector3(-0.816f, -0.333f, -0.471f), Color.Blue);
vertices[2] = new VertexPositionColor(new Vector3(0.000f, -0.333f, 0.943f), Color.Green);
vertices[3] = new VertexPositionColor(new Vector3(0.000f, 1.000f, 0.000f), Color.Red);
vertices[4] = new VertexPositionColor(new Vector3(0.816f, -0.333f, -0.471f), Color.Yellow);
vertices[5] = new VertexPositionColor(new Vector3(-0.816f, -0.333f, -0.471f), Color.Blue);
vertices[6] = new VertexPositionColor(new Vector3(0.000f, -0.333f, 0.943f), Color.Green);
vertices[7] = new VertexPositionColor(new Vector3(0.816f, -0.333f, -0.471f), Color.Yellow);
vertices[8] = new VertexPositionColor(new Vector3(0.000f, 1.000f, 0.000f), Color.Red);
vertices[9] = new VertexPositionColor(new Vector3(-0.816f, -0.333f, -0.471f), Color.Blue);
vertices[10]= new VertexPositionColor(new Vector3(0.816f, -0.333f, -0.471f), Color.Yellow);
vertices[11] = new VertexPositionColor(new Vector3(0.000f, -0.333f, 0.943f), Color.Green);
VertexPositionColor[] vertices;

30. Drawing Triangles – Simple Rotation
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
basicEffect.World = world;
basicEffect.View = view;
basicEffect.Projection = projection;
basicEffect.VertexColorEnabled = true;
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives(PrimitiveType.TriangleList, vertices, 0, 4);
}
base.Draw(gameTime);
}

31. Drawing Triangles – Simple Rotation
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
basicEffect.World = world;
basicEffect.View = view;
basicEffect.Projection = projection;
basicEffect.VertexColorEnabled = true;
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives(PrimitiveType.TriangleList, vertices, 0, 4);
}
base.Draw(gameTime);
}

32. Drawing Triangles – Simple Rotation
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
basicEffect.World = world;
basicEffect.View = view;
basicEffect.Projection = projection;
basicEffect.VertexColorEnabled = true;
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives(PrimitiveType.TriangleList, vertices, 0, 4);
}
base.Draw(gameTime);
}

33. Drawing Triangles – Simple Rotation
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
basicEffect.World = world;
basicEffect.View = view;
basicEffect.Projection = projection;
basicEffect.VertexColorEnabled = true;
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives(PrimitiveType.TriangleList, vertices, 0, 4);
}
base.Draw(gameTime);
}

34. Drawing Triangles – Rotation Logic

35. Drawing Triangles – Rotation Logic
Matrices and Transformations

36. Drawing Triangles
• Using TrianglesList
• App3-TriangleList

37. Different Primitive Types
• Changing last tutorial PrimitiveType to LineList will result in
• “App5-VertexBuffer-LineList”

38. Index And Vertex Buffers

39. Index And Vertex Buffers
The Concept

40. Index And Vertex Buffers
• Effectively store our data
• Greatly reduce the amount of data that needs to be send over to the graphics
device
– speed up our applications a looooooooooot!
• The only way to store your data

41. Index And Vertex Buffers
• Look at this,

42. Index And Vertex Buffers
True oder false?
• Look at this,

43. Index And Vertex Buffers
True oder false?
• Look at this,

44. Index And Vertex Buffers

45. Index And Vertex Buffers

46. Index And Vertex Buffers

47. Index And Vertex Buffers

48. Index And Vertex Buffers – The Creating of
• An Icosahedron

49. Index And Vertex Buffers – The Creating of
• An Icosahedron
• “App4-VertexBuffer”

50. Index And Vertex Buffers – The Creating of
• Creating the Necessary Variables
VertexBuffer vertexBuffer;
IndexBuffer indexBuffer;

51. Index And Vertex Buffers – The Creating of
• Creating the Necessary Variables
VertexBuffer vertexBuffer;
IndexBuffer indexBuffer;
VertexPositionColor[] vertices;

52. Index And Vertex Buffers – The Creating of
• Creating the Necessary Variables
VertexBuffer vertexBuffer;
IndexBuffer indexBuffer;
VertexPositionColor[] vertices; // Needed in a global scope or not?

53. Index And Vertex Buffers – The Creating of
• Creating the Necessary Variables
VertexBuffer vertexBuffer;
IndexBuffer indexBuffer;
VertexPositionColor[] vertices; // Needed in a global scope or not?

54. Index And Vertex Buffers – The Creating of
• In LoadContent()
VertexPositionColor[] vertexArray = new VertexPositionColor[12];
// vertex position and color information for icosahedron
vertexArray[0] = new VertexPositionColor(new Vector3(-0.26286500f, 0.0000000f, 0.42532500f), Color.Red);
//…..
vertexArray[11]= new VertexPositionColor(new Vector3(-0.42532500f, -0.26286500f, 0.0000000f),Color.Crimson);
// Set up the vertex buffer
vertexBuffer = new VertexBuffer( graphics.GraphicsDevice,
typeof(VertexPositionColor),
vertexArray.Length,
BufferUsage.WriteOnly);
vertexBuffer.SetData(vertexArray);
short[] indices = new short[60];
indices[0] = 0; indices[1] = 6; indices[2] = 1;
//…
indices[57] = 9; indices[58] = 11; indices[59] = 0;
indexBuffer = new IndexBuffer(graphics.GraphicsDevice, typeof(short), indices.Length, BufferUsage.WriteOnly);
indexBuffer.SetData(indices);

55. Index And Vertex Buffers
• In Draw() Method
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.SetVertexBuffer(vertexBuffer);
graphics.GraphicsDevice.Indices = indexBuffer;
graphics.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 12, 0, 20);
}

56. Index And Vertex Buffers
• In Draw() Method
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.SetVertexBuffer(vertexBuffer);
graphics.GraphicsDevice.Indices = indexBuffer;
graphics.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 12, 0, 20);
}

57. Index And Vertex Buffers
• In Draw() Method
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.SetVertexBuffer(vertexBuffer);
graphics.GraphicsDevice.Indices = indexBuffer;
graphics.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 12, 0, 20);
}

58. Index And Vertex Buffers
• In Draw() Method
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.SetVertexBuffer(vertexBuffer);
graphics.GraphicsDevice.Indices = indexBuffer;
graphics.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 12, 0, 20);
}

59. Index And Vertex Buffers
• In Draw() Method
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.SetVertexBuffer(vertexBuffer);
graphics.GraphicsDevice.Indices = indexBuffer;
graphics.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 12, 0, 20);
}

60. Index And Vertex Buffers
• In Draw() Method
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.SetVertexBuffer(vertexBuffer);
graphics.GraphicsDevice.Indices = indexBuffer;
graphics.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 12, 0, 20);
}

61. Index And Vertex Buffers
• In Draw() Method
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.SetVertexBuffer(vertexBuffer);
graphics.GraphicsDevice.Indices = indexBuffer;
graphics.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 12, 0, 20);
}

63. Index And Vertex Buffers
• In Draw() Method
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.SetVertexBuffer(vertexBuffer);
graphics.GraphicsDevice.Indices = indexBuffer;
graphics.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 12, 0, 20);
}

64. Index And Vertex Buffers
• In Draw() Method
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.SetVertexBuffer(vertexBuffer);
graphics.GraphicsDevice.Indices = indexBuffer;
graphics.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 12, 0, 20);
}

65. Index And Vertex Buffers
• In Draw() Method
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.SetVertexBuffer(vertexBuffer);
graphics.GraphicsDevice.Indices = indexBuffer;
graphics.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 12, 0, 20);
}

66. Index And Vertex Buffers
• In Draw() Method
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.SetVertexBuffer(vertexBuffer);
graphics.GraphicsDevice.Indices = indexBuffer;
graphics.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 12, 0, 20);
}

67. Index And Vertex Buffers
• In Draw() Method
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.SetVertexBuffer(vertexBuffer);
graphics.GraphicsDevice.Indices = indexBuffer;
graphics.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 12, 0, 20);
}

68. Index And Vertex Buffers
• In Draw() Method
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.SetVertexBuffer(vertexBuffer);
graphics.GraphicsDevice.Indices = indexBuffer;
graphics.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 12, 0, 20);
}

69. Index And Vertex Buffers
• In Draw() Method
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.SetVertexBuffer(vertexBuffer);
graphics.GraphicsDevice.Indices = indexBuffer;
graphics.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 12, 0, 20);
}

70. Index And Vertex Buffers
• An Icosahedron at last
has been built!