Mohammad Shaker mohammadshaker.com @ZGTRShaker 2011, 2012, 2013, 2014 XNA Game Development L02 – Transformations and Basic Matrices
May 14, 2015
Mohammad Shakermohammadshaker.com
@ZGTRShaker2011, 2012, 2013, 2014
XNA Game DevelopmentL02 – Transformations and Basic Matrices
3D World
3D World
3D World
XNA Matrices
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.
Basic Matrices View, Projection and World Matrices
Basic Matrices
• View, Projection and World Matrices
RULE
RULETO SEE A 3D SCENE YOU SHOULD SET UP:
RULETO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA
RULETO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA
PROJECTION
RULETO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA
PROJECTION
WORLD MATRIX
RULETO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)
RULETO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)
RULETO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)
RULETO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)
RULETO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)
Camera (View) Matrix
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.
View Matrices
Matrix.CreateLookAt(Vector3 cameraPosition, Vector3 cameraTarget, Vector3 cameraUpVector);
View Matrices
Matrix.CreateLookAt(Vector3 cameraPosition, Vector3 cameraTarget, Vector3 cameraUpVector);
View Matrices
Matrix.CreateLookAt(Vector3 cameraPosition, Vector3 cameraTarget, Vector3 cameraUpVector);
RULETO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)
RULETO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)
Projection Matrix
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.
Projection Matrices
Projection Matrices
The Difference?!
Projection Matrices
The Difference?!perspective
Projection Matrices
The Difference?!perspective orthographic
Projection Matrices
Projection Matrices
Projection Matrices
Projection Matrices
Realistic?perspective orthographic
Projection Matrices
• Projection Matries
Realistic?perspective orthographic
Projection Matrices
Architecture?perspective orthographic
Projection Matrices
Architecture?perspective orthographic
Projection Matrices
Usability?perspective orthographic
Projection Matrices
Usability?perspective orthographic
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.
Orthographic Projections
• An orthographic projection can be created with the following code:
Matrix.CreateOrthographic(float width, float height, float zNearPlane, float zFarPlane);
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);
Orthographic Projections
• Ummm ….
Matrix.CreateOrthographicOffCenter(-1, 1, -1, 1, 0.1f, 100f); Matrix.CreateOrthographic(2, 2, 0.1f, 100f);
Orthographic Projections
• Ummm ….
Matrix.CreateOrthographicOffCenter(-1, 1, -1, 1, 0.1f, 100f); Matrix.CreateOrthographic(2, 2, 0.1f, 100f);
Perspective Projections
• PerspectiveFieldOfView
Matrix.CreatePerspectiveFieldOfView(float fieldOfView,
float aspectRatio,
float nearPlaneDistance,
float farPlaneDistance);
Perspective Projections
Matrix.CreatePerspectiveFieldOfView(float fieldOfView,
float aspectRatio,
float nearPlaneDistance,
float farPlaneDistance);
Perspective Projections
Matrix.CreatePerspectiveFieldOfView(float fieldOfView,
float aspectRatio,
float nearPlaneDistance,
float farPlaneDistance);
Perspective Projections
Matrix.CreatePerspectiveFieldOfView(float fieldOfView,
float aspectRatio,
float nearPlaneDistance,
float farPlaneDistance);
Perspective Projections
• Perspective projections
Matrix.CreatePerspectiveFieldOfView(float fieldOfView,
float aspectRatio,
float nearPlaneDistance,
float farPlaneDistance);
Perspective Projections
Matrix.CreatePerspectiveFieldOfView(float fieldOfView,
float aspectRatio,
float nearPlaneDistance,
float farPlaneDistance);
Perspective Projections
Matrix.CreatePerspectiveFieldOfView(float fieldOfView,
float aspectRatio,
float nearPlaneDistance,
float farPlaneDistance);
Perspective Projections
Matrix.CreatePerspective(
float width,
float height,
float nearPlaneDistance, float farPlaneDistance);
Perspective Projections
Matrix.CreatePerspective(
float width,
float height,
float nearPlaneDistance, float farPlaneDistance);
Perspective Projections
Matrix.CreatePerspective(
float width,
float height,
float nearPlaneDistance, float farPlaneDistance);
Perspective Projections
Matrix.CreatePerspectiveOffCenter(
float left,
float right,
float bottom,
float top,
float nearPlaneDistance, float farPlaneDistance);
RULETO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)
RULETO SEE A 3D SCENE YOU SHOULD SET UP:
CAMERA (Singleton, for all objects)
PROJECTION (Singleton, for all objects)
WORLD MATRIX (For each object separately)
World MatrixEach Object in 3D Has Its own World Matrix
World Matrix
World Matrix
• Example
• Let’s assume that the coordinates of the triangle vertices are as follows:
World Matrix
• Example
• To translate 40 units over the y axis’s positive direction,all you need to do is to add 40
toeach y position, and you have the new coordinates for the vertices:
World Matrix
World Matrix
Identity
Scale
Rotate
Orbit
Translate
Transformations
• Load Identity Matrix
Matrix.Identity();
Identity
Scale
Rotate
Orbit
Translate
Transformations
• Create scale matrix
Matrix.CreateScale(float scaleAmount);
Identity
Scale
Rotate
Orbit
Translate
Transformations
• Create a matrix that rotates around the x-axis:
Matrix.CreateRotateX(float angleInRadians);
• Create a matrix that rotates around the y-axis:Matrix.CreateRotateY(float angleInRadians);
• Create a matrix that rotates around the z-axis:Matrix.CreateRotateZ(float angleInRadians);
Identity
Scale
Rotate
Orbit
Translate
Transformations
• Create a matrix that rotates points around an arbitrary axis:
Matrix.CreateFromAxisAngle(Vector3 axis, float angleInRadians);
Identity
Scale
Rotate
Orbit
Translate
Transformations
• Create an Orbit matrix?!
Identity
Scale
Rotate
Orbit
Translate
Transformations
• Create an Orbit matrix?!
It’s just
“Translate then Rotate”Identity
Scale
Rotate
Orbit
Translate
Transformations
• Create a translation matrix:
Matrix.CreateTranslation(Vector3 position);
Identity
Scale
Rotate
Orbit
Translate
Transformations
• Multiple World Transformations
Transformations
• Multiple World Transformations
Transformations
• Multiple World Transformations
Matrix result =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(new Vector3(10, 0, 0));Identity
Scale
Rotate
Orbit
Translate
Transformations
• Multiple World Transformations
Matrix result =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(new Vector3(10, 0, 0));Identity
Scale
Rotate
Orbit
Translate
Transformations
• Multiple World Transformations
Matrix result =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(new Vector3(10, 0, 0));Identity
Scale
Rotate
Orbit
Translate
Transformations
• Multiple World Transformations
Matrix result =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(new Vector3(10, 0, 0));Identity
Scale
Rotate
Orbit
Translate
Transformations
• Multiple World Transformations
Matrix result =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(new Vector3(10, 0, 0));
Matrix result =
Matrix.CreateTranslation(new Vector3(10, 0, 0)) *
Matrix.CreateRotationX(MathHelper.ToRadians(45));
Identity
Scale
Rotate
Orbit
Translate
Transformations
• Multiple World Transformations
Matrix result =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(new Vector3(10, 0, 0));
Matrix result =
Matrix.CreateTranslation(new Vector3(10, 0, 0)) *
Matrix.CreateRotationX(MathHelper.ToRadians(45));
Identity
Scale
Rotate
Orbit
Translate
Transformations
• Multiple World Transformations
Matrix result =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(new Vector3(10, 0, 0));
Matrix result =
Matrix.CreateTranslation(new Vector3(10, 0, 0)) *
Matrix.CreateRotationX(MathHelper.ToRadians(45));
Not the same!
Identity
Scale
Rotate
Orbit
Translate
Transformations
• Multiple World Transformations
Matrix result =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(new Vector3(10, 0, 0));
Matrix result =
Matrix.CreateTranslation(new Vector3(10, 0, 0)) *
Matrix.CreateRotationX(MathHelper.ToRadians(45));
Not the same!
Identity
Scale
Rotate
Orbit
Translate
Transformations
• Multiple World Transformations
Matrix result =
Matrix.CreateRotationX(MathHelper.ToRadians(45)) *
Matrix.CreateTranslation(new Vector3(10, 0, 0));
Matrix result =
Matrix.CreateTranslation(new Vector3(10, 0, 0)) *
Matrix.CreateRotationX(MathHelper.ToRadians(45));
Not the same!
Identity
Scale
Rotate
Orbit
Translate
Transformations
• Multiple World Transformations
Matrix result =
Matrix.CreateTranslation(new Vector3(10, 0, 0)) *
Matrix.CreateRotationX(MathHelper.ToRadians(45));
Identity
Scale
Rotate
Orbit
Translate
Transformations
• Multiple World Transformations
Matrix result =
Matrix.CreateTranslation(new Vector3(10, 0, 0)) *
Matrix.CreateRotationX(MathHelper.ToRadians(45));
Identity
Scale
Rotate
Orbit
Translate
Test’em live!Souvenir, 9:03 AM, Tuesday, Aug.16th-2011 still awake :S
Custom Matrices
Custom Matrices
Matrix customMatrix = new Matrix(
float m11, float m12, float m13, float m14, float m21, float m22, float m23, float m24, float m31, float m32, float m33, float m34, float m41, float m42, float m43, float m44);
Custom Matrices
• Custom Matrices
Matrix customMatrix = new Matrix(
float m11, float m12, float m13, float m14, float m21, float m22, float m23, float m24, float m31, float m32, float m33, float m34, float m41, float m42, float m43, float m44);
customMatrix.M31 = 4;
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);
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);
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);
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);
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);
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);