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!