The document discusses 3D matrix transformations in XNA game development. It explains that to render a 3D scene, a camera matrix, projection matrix, and separate world matrix for each object must be set up. It provides details on creating view matrices with CreateLookAt, projection matrices with CreatePerspectiveFieldOfView or CreateOrthographic, and transforming objects using world matrices created from scaling, rotation, translation and other transformations. Multiple transformations can be combined by multiplying the matrices together in order.

1. Mohammad Shaker
mohammadshaker.com
@ZGTRShaker
2011, 2012, 2013, 2014
XNA Game Development
L02 –Transformations and Basic Matrices

2. 3D World

3. 3D World

4. 3D World

5. XNA Matrices

6. XNA Matrices
• Matrix.CreateRotationX, Matrix.CreateRotationY, and Matrix.CreateRotationZ: Each of these creates a rotation matrix for each of the axes.
• Matrix.Translation: Creates a translation matrix (one or more axes).
• Matrix.Scale: Creates a scale matrix (one or more axes).
• Matrix.CreateLookAt: Creates a view matrix used to position the camera, by setting the 3D position of the camera, the 3D position it is facing, and which direction is “up” for the camera.
• Matrix.CreatePerspectiveFieldOfView: Creates a projection matrix that uses a perspective view.

7. Basic Matrices View, Projection and World Matrices

8. Basic Matrices
•View, Projection and World Matrices

9. RULE

10. RULE
TO SEE A 3D SCENE YOU SHOULD SET UP:

11. RULE
TO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA

12. RULE
TO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA
PROJECTION

13. RULE
TO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA
PROJECTION
WORLD MATRIX

14. RULE
TO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)

15. RULE
TO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)

16. RULE
TO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)

17. RULE
TO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)

18. RULE
TO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)

19. Camera (View) Matrix

20. XNA Matrices
• Matrix.CreateRotationX, Matrix.CreateRotationY, and Matrix.CreateRotationZ: Each of these creates a rotation matrix for each of the axes.
• Matrix.Translation: Creates a translation matrix (one or more axes).
• Matrix.Scale: Creates a scale matrix (one or more axes).
• Matrix.CreateLookAt: Creates a view matrix used to position the camera, by setting the 3D position of the camera, the 3D position it is facing, and which direction is “up” for the camera.
• Matrix.CreatePerspectiveFieldOfView: Creates a projection matrix that uses a perspective view.

21. View Matrices
Matrix.CreateLookAt(Vector3 cameraPosition, Vector3 cameraTarget, Vector3 cameraUpVector);

22. View Matrices
Matrix.CreateLookAt(Vector3 cameraPosition, Vector3 cameraTarget, Vector3 cameraUpVector);

23. View Matrices
Matrix.CreateLookAt(Vector3 cameraPosition, Vector3 cameraTarget, Vector3 cameraUpVector);

24. RULE
TO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)

25. RULE
TO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)

26. Projection Matrix

27. XNA Matrices
• Matrix.CreateRotationX, Matrix.CreateRotationY, and Matrix.CreateRotationZ: Each of these creates a rotation matrix for each of the axes.
• Matrix.Translation: Creates a translation matrix (one or more axes).
• Matrix.Scale: Creates a scale matrix (one or more axes).
• Matrix.CreateLookAt: Creates a view matrix used to position the camera, by setting the 3D position of the camera, the 3D position it is facing, and which direction is “up” for the camera.
• Matrix.CreatePerspectiveFieldOfView: Creates a projection matrix that uses a perspective view.

28. Projection Matrices

29. Projection Matrices
The Difference?!

30. Projection Matrices
The Difference?!
perspective

31. Projection Matrices
The Difference?!
perspective
orthographic

32. Projection Matrices

33. Projection Matrices

34. Projection Matrices

35. Projection Matrices
Realistic?
perspective
orthographic

36. Projection Matrices
•Projection Matries
Realistic?
perspective
orthographic

37. Projection Matrices
Architecture?
perspective
orthographic

38. Projection Matrices
Architecture?
perspective
orthographic

39. Projection Matrices
Usability?
perspective
orthographic

40. Projection Matrices
Usability?
perspective
orthographic

41. XNA Matrices
• Matrix.CreateRotationX, Matrix.CreateRotationY, and Matrix.CreateRotationZ: Each of these creates a rotation matrix for each of the axes.
• Matrix.Translation: Creates a translation matrix (one or more axes).
• Matrix.Scale: Creates a scale matrix (one or more axes).
• Matrix.CreateLookAt: Creates a view matrix used to position the camera, by setting the 3D position of the camera, the 3D position it is facing, and which direction is “up” for the camera.
• Matrix.CreatePerspectiveFieldOfView: Creates a projection matrix that uses a perspective view.

42. Orthographic Projections
•An orthographic projection can be created with the following code:
Matrix.CreateOrthographic(float width, float height, float zNearPlane, float zFarPlane);

43. Orthographic Projections
•An orthographic projection can be created with the following code:
•Off-center orthogonal projection:
Matrix.CreateOrthographic(float width, float height, float zNearPlane, float zFarPlane);
Matrix.CreateOrthographicOffCenter(float left,
float right,
float bottom,
float top,
float zNearPlane, float zFarPlane);

44. Orthographic Projections
•Ummm ….
Matrix.CreateOrthographicOffCenter(-1, 1, -1, 1, 0.1f, 100f); Matrix.CreateOrthographic(2, 2, 0.1f, 100f);

45. Orthographic Projections
•Ummm ….
Matrix.CreateOrthographicOffCenter(-1, 1, -1, 1, 0.1f, 100f); Matrix.CreateOrthographic(2, 2, 0.1f, 100f);

46. Perspective Projections
•PerspectiveFieldOfView
Matrix.CreatePerspectiveFieldOfView(float fieldOfView,
float aspectRatio,
float nearPlaneDistance,
float farPlaneDistance);

47. Perspective Projections
Matrix.CreatePerspectiveFieldOfView(float fieldOfView,
float aspectRatio,
float nearPlaneDistance,
float farPlaneDistance);

48. Perspective Projections
Matrix.CreatePerspectiveFieldOfView(float fieldOfView,
float aspectRatio,
float nearPlaneDistance,
float farPlaneDistance);

49. Perspective Projections
Matrix.CreatePerspectiveFieldOfView(float fieldOfView,
float aspectRatio,
float nearPlaneDistance,
float farPlaneDistance);

50. Perspective Projections
•Perspective projections
Matrix.CreatePerspectiveFieldOfView(float fieldOfView,
float aspectRatio,
float nearPlaneDistance,
float farPlaneDistance);

51. Perspective Projections
Matrix.CreatePerspectiveFieldOfView(float fieldOfView,
float aspectRatio,
float nearPlaneDistance,
float farPlaneDistance);

52. Perspective Projections
Matrix.CreatePerspectiveFieldOfView(float fieldOfView,
float aspectRatio,
float nearPlaneDistance,
float farPlaneDistance);

53. Perspective Projections
Matrix.CreatePerspective(
float width,
float height,
float nearPlaneDistance, float farPlaneDistance);

54. Perspective Projections
Matrix.CreatePerspective(
float width,
float height,
float nearPlaneDistance, float farPlaneDistance);

55. Perspective Projections
Matrix.CreatePerspective(
float width,
float height,
float nearPlaneDistance, float farPlaneDistance);

56. Perspective Projections
Matrix.CreatePerspectiveOffCenter(
float left,
float right,
float bottom,
float top,
float nearPlaneDistance, float farPlaneDistance);

57. RULE
TO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)

58. RULE
TO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)

59. World MatrixEach Object in 3D Has Its own World Matrix

60. World Matrix

61. World Matrix
•Example
•Let’s assume that the coordinates of the triangle vertices are as follows:

62. World Matrix
•Example
•To translate 40 units over the y axis’s positive direction,allyou need to do is to add 40 toeachy position, and you have the new coordinates for the vertices:

63. World Matrix

64. World Matrix

65. Identity
Scale
Rotate
Orbit
Translate

66. Transformations
•Load Identity Matrix
Matrix.Identity();
Identity
Scale
Rotate
Orbit
Translate

67. Transformations
•Create scale matrix
Matrix.CreateScale(float scaleAmount);
Identity
Scale
Rotate
Orbit
Translate

68. Transformations
•Create a matrix that rotates around the x-axis:
Matrix.CreateRotateX(float angleInRadians);
•Create a matrix that rotatesaround the y-axis:
Matrix.CreateRotateY(float angleInRadians);
•Create a matrix that rotatesaround the z-axis:
Matrix.CreateRotateZ(float angleInRadians);
Identity
Scale
Rotate
Orbit
Translate

69. Transformations
•Create a matrix that rotates points around an arbitrary axis:
Matrix.CreateFromAxisAngle(Vector3 axis, float angleInRadians);
Identity
Scale
Rotate
Orbit
Translate

70. Transformations
•Create an Orbit matrix?!
Identity
Scale
Rotate
Orbit
Translate

71. Transformations
•Create an Orbit matrix?!
It’s just
“Translate then Rotate”
Identity
Scale
Rotate
Orbit
Translate

72. Transformations
•Create a translation matrix:
Matrix.CreateTranslation(Vector3 position);
Identity
Scale
Rotate
Orbit
Translate

73. Transformations
•Multiple World Transformations

74. Transformations
•Multiple World Transformations

75. Transformations
•Multiple World Transformations
Matrixresult =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(newVector3(10, 0, 0));
Identity
Scale
Rotate
Orbit
Translate

76. Transformations
•Multiple World Transformations
Matrixresult =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(newVector3(10, 0, 0));
Identity
Scale
Rotate
Orbit
Translate

77. Transformations
•Multiple World Transformations
Matrixresult =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(newVector3(10, 0, 0));
Identity
Scale
Rotate
Orbit
Translate

78. Transformations
•Multiple World Transformations
Matrixresult =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(newVector3(10, 0, 0));
Identity
Scale
Rotate
Orbit
Translate

79. Transformations
•Multiple World Transformations
Matrixresult =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(newVector3(10, 0, 0));
Matrixresult =
Matrix.CreateTranslation(newVector3(10, 0, 0)) *
Matrix.CreateRotationX(MathHelper.ToRadians(45));
Identity
Scale
Rotate
Orbit
Translate

80. Transformations
•Multiple World Transformations
Matrixresult =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(newVector3(10, 0, 0));
Matrixresult =
Matrix.CreateTranslation(newVector3(10, 0, 0)) *
Matrix.CreateRotationX(MathHelper.ToRadians(45));
Identity
Scale
Rotate
Orbit
Translate

81. Transformations
•Multiple World Transformations
Matrixresult =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(newVector3(10, 0, 0));
Matrixresult =
Matrix.CreateTranslation(newVector3(10, 0, 0)) *
Matrix.CreateRotationX(MathHelper.ToRadians(45));
Not the same!
Identity
Scale
Rotate
Orbit
Translate

82. Transformations
•Multiple World Transformations
Matrixresult =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(newVector3(10, 0, 0));
Matrixresult =
Matrix.CreateTranslation(newVector3(10, 0, 0)) *
Matrix.CreateRotationX(MathHelper.ToRadians(45));
Not the same!
Identity
Scale
Rotate
Orbit
Translate

83. Transformations
•Multiple World Transformations
Matrixresult =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(newVector3(10, 0, 0));
Matrixresult =
Matrix.CreateTranslation(newVector3(10, 0, 0)) *
Matrix.CreateRotationX(MathHelper.ToRadians(45));
Not the same!
Identity
Scale
Rotate
Orbit
Translate

84. Transformations
•Multiple World Transformations
Matrixresult =
Matrix.CreateTranslation(newVector3(10, 0, 0)) *
Matrix.CreateRotationX(MathHelper.ToRadians(45));
Identity
Scale
Rotate
Orbit
Translate

85. Transformations
•Multiple World Transformations
Matrixresult =
Matrix.CreateTranslation(newVector3(10, 0, 0)) *
Matrix.CreateRotationX(MathHelper.ToRadians(45));
Identity
Scale
Rotate
Orbit
Translate

86. Test’emlive!
Souvenir, 9:03 AM, Tuesday, Aug.16th-2011 still awake :S

87. Custom Matrices

88. Custom Matrices
Matrix customMatrix= new Matrix(
floatm11, floatm12, floatm13, floatm14, floatm21, floatm22, floatm23, floatm24, floatm31, floatm32, floatm33, floatm34, floatm41, floatm42, floatm43, floatm44);

89. Custom Matrices
•Custom Matrices
Matrix customMatrix= new Matrix(
floatm11, floatm12, floatm13, floatm14, floatm21, floatm22, floatm23, floatm24, floatm31, floatm32, floatm33, floatm34, floatm41, floatm42, floatm43, floatm44);
customMatrix.M31 = 4;

90. Basic Matrices -A Final Example
Vector3cameraPosition= newVector3(30.0f, 30.0f, 30.0f);
Vector3cameraTarget= newVector3(0.0f, 0.0f, 0.0f); // Look back at the origin
floatfovAngle= MathHelper.ToRadians(45); // convert 45 degrees to radians
floataspectRatio= graphics.PreferredBackBufferWidth/ graphics.PreferredBackBufferHeight;
floatnear = 0.01f; // the near clipping plane distance
floatfar = 100f; // the far clipping plane distance
Matrixworld = Matrix.CreateTranslation(10.0f, 0.0f, 10.0f);
Matrixview = Matrix.CreateLookAt(cameraPosition, cameraTarget, Vector3.Up);
Matrixprojection = Matrix.CreatePerspectiveFieldOfView(fovAngle, aspectRatio, near, far);

91. Basic Matrices -A Final Example
Vector3cameraPosition= newVector3(30.0f, 30.0f, 30.0f);
Vector3cameraTarget= newVector3(0.0f, 0.0f, 0.0f); // Look back at the origin
float fovAngle= MathHelper.ToRadians(45); // convert 45 degrees to radians
float aspectRatio= graphics.PreferredBackBufferWidth/ graphics.PreferredBackBufferHeight;
float near = 0.01f; // the near clipping plane distance
float far = 100f; // the far clipping plane distance
Matrix world = Matrix.CreateTranslation(10.0f, 0.0f, 10.0f);
Matrixview = Matrix.CreateLookAt(cameraPosition, cameraTarget, Vector3.Up);
Matrix projection = Matrix.CreatePerspectiveFieldOfView(fovAngle, aspectRatio, near, far);

92. Basic Matrices -A Final Example
Vector3 cameraPosition= new Vector3(30.0f, 30.0f, 30.0f);
Vector3 cameraTarget= new Vector3(0.0f, 0.0f, 0.0f); // Look back at the origin
floatfovAngle= MathHelper.ToRadians(45); // convert 45 degrees to radians
floataspectRatio= graphics.PreferredBackBufferWidth/ graphics.PreferredBackBufferHeight;
floatnear = 0.01f; // the near clipping plane distance
floatfar = 100f; // the far clipping plane distance
Matrix world = Matrix.CreateTranslation(10.0f, 0.0f, 10.0f);
Matrix view = Matrix.CreateLookAt(cameraPosition, cameraTarget, Vector3.Up);
Matrixprojection = Matrix.CreatePerspectiveFieldOfView(fovAngle, aspectRatio, near, far);

93. Basic Matrices -A Final Example
Vector3 cameraPosition= new Vector3(30.0f, 30.0f, 30.0f);
Vector3 cameraTarget= new Vector3(0.0f, 0.0f, 0.0f); // Look back at the origin
float fovAngle= MathHelper.ToRadians(45); // convert 45 degrees to radians
float aspectRatio= graphics.PreferredBackBufferWidth/ graphics.PreferredBackBufferHeight;
float near = 0.01f; // the near clipping plane distance
float far = 100f; // the far clipping plane distance
Matrix world = Matrix.CreateTranslation(10.0f, 0.0f, 10.0f);
Matrix view = Matrix.CreateLookAt(cameraPosition, cameraTarget, Vector3.Up);
Matrix projection = Matrix.CreatePerspectiveFieldOfView(fovAngle, aspectRatio, near, far);

94. Basic Matrices -A Final Example
Vector3 cameraPosition= new Vector3(30.0f, 30.0f, 30.0f);
Vector3 cameraTarget= new Vector3(0.0f, 0.0f, 0.0f); // Look back at the origin
float fovAngle= MathHelper.ToRadians(45); // convert 45 degrees to radians
float aspectRatio= graphics.PreferredBackBufferWidth/ graphics.PreferredBackBufferHeight;
float near = 0.01f; // the near clipping plane distance
float far = 100f; // the far clipping plane distance
Matrix world = Matrix.CreateTranslation(10.0f, 0.0f, 10.0f);
Matrix view = Matrix.CreateLookAt(cameraPosition, cameraTarget, Vector3.Up);
Matrix projection = Matrix.CreatePerspectiveFieldOfView(fovAngle, aspectRatio, near, far);

95. Basic Matrices -A Final Example
Vector3 cameraPosition= new Vector3(30.0f, 30.0f, 30.0f);
Vector3 cameraTarget= new Vector3(0.0f, 0.0f, 0.0f); // Look back at the origin
float fovAngle= MathHelper.ToRadians(45); // convert 45 degrees to radians
float aspectRatio= graphics.PreferredBackBufferWidth/ graphics.PreferredBackBufferHeight;
float near = 0.01f; // the near clipping plane distance
float far = 100f; // the far clipping plane distance
Matrix world = Matrix.CreateTranslation(10.0f, 0.0f, 10.0f);
Matrix view = Matrix.CreateLookAt(cameraPosition, cameraTarget, Vector3.Up);
Matrix projection = Matrix.CreatePerspectiveFieldOfView(fovAngle, aspectRatio, near, far);