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);