Rotations in Computer Graphics

Introduction

Rotations in computer graphics is a transformational operation. That means that it is a conversion from one coordinate space onto another. Rotational transformation can be accomplish with Matrices or with Quaternions. You will learn how a vector can be rotated with both methods. Although Quaternions offer a better solution than matrices, it is a good idea to learn how matrices rotate a character in 3D games.

Rotation with Matrices

2D Rotations

The matrix for rotating a point about an origin in a 2D plane is defined as:

rotation about a point

Thus the rotation of a 2D vector in a plane is done as follows:

rotation of a vector

For example: To rotate a vector 90 degrees counterclock-wise is done as follows:

rotation of a vector example

rotation of a vector example image

3D Rotations

Rotation about z-axis

We can generalized the above matrix to work in a 3D world by adding a third coordinate. For example, to rotate about the z-axis, we can add a z-coordinate as shown below:

rotate about z-axis

For example, to rotate a vector about the z-axis 90-degrees counterclock-wise is done as follows:

rotate about z-axis example

Rotation about x-axis

If you would like to rotate a point about the x-axis, the x-coordinate is kept constant while the y-and z-coordinate are changed as shown below:

rotate about x-axis

For example, to rotate a vector about the x-axis 90 degrees counterclock-wise is done as follows:

rotate about x-axis example

Rotation about y-axis

In the same manner, to rotate about the y-axis, the y-coordinate remains constant, while the x- and z-coordinates are changed as shown below.

rotate about y-axis

For example, to rotate a vector about the y-axis 90 degrees counterclock-wise is done as follows:

rotate about y-axis example

Composite rotation with matrices

The rotation transforms can be combined into forming one concatenated rotation transform. For example, the rotation transform below will rotate a vector in the following manner:

composite rotation

  • First Rotate about z-axis
  • Then Rotate about y-axis
  • Finally, Rotate about x-axis

When working with concatenated matrices, the order of rotation matters. In the above example, the right-most transform occurs first and the left-most transform occurs last. Always remember that concatenated matrices are performed from right to left. Also note the following property:

The result depends on matrix order!

concatenated rotation property

Rotation about an arbitrary axis

Rotations about an arbitrary axis is possible with matrices. The matrix below shows the mathematical representation of such transform:

rotation about arbitrary axis

Rotation with Quaternions

In order to understand how Quaternions rotate a vector, you need to understand the concept of a Pure Quaternion and a Unit-Norm Quaternion. A pure quaternion is simply a quaternion with a scalar of zero. A pure quaternion only contains a vector component. The vertices of a character can be considered as pure quaternions while rotating the character. Mathematically, a pure quaternion is represented as:

pure quaternion definition

A quaternion is also defined as:

3d rotation quaternion

However, when a quaternion is defined as follows:

3d rotation quaternion half-angle

A vector is rotated about the axis v by an angle theta. For this rotation to occur, the vector; represented as a pure quaternion, is multiplied by the quaternion and its inverse. This quaternion representation is represented as follows:

3d rotation

For example, to rotate a vector (0,1,0) by 90 degrees about the x-axis is done as follows:

quaternion rotation example

The inverse of q is:

quaternion rotation example

and the pure quaternion is simply the vector (0,1,0).

quaternion rotation example

Thus, to rotate the vector (0,1,0) about the x-axis:

quaternion rotation example

Keep in mind that q must normalized.

If you would like to know more about quaternions, I strongly advise you to take a look at this book: Quaternions for Computer Graphics by John Vince

Harold Serrano

Computer Graphics Enthusiast. Currently developing a 3D Game Engine.