Lesson08: Understanding Affine Transformation interactively.

Overview 

In this post we shall understand affine transformations interactively the three kinds of affine 

transformations: Scale, Translate and Rotation on X, Y and  Z axes as discussed in the previous post.

The rotation has been already demonstrated in the earlier examples. In this post we will deep dive into Translation and Scaling.

Details

The GUI has two windows - Console Window with OpenGL context. This renders a Cube with a texture having each of the 6 faces labeled as below.

Input Dialog

Provides an user interface to experiment interactively - scaling, translation and rotation.  First input is provided in the input text boxes. It's submitted for rendering the cube when Apply button is clicked. The cumulative value is updated in the caption. Reset button resets values. Both + and -ve values can be submitted. Note:- The values are applied when the associated checkboxes are checked.

The cube also be rotated using X,Y, Z keys and using Mouse inputs.

Camera 

As we are still passing Identity matrix for view and projection matrices, the camera is sitting at the origin (0,0,0) looking down on -Z axis. In this scenario, the back face is visible with x=0, y=0, z=-0.5.

Scale

First rotate cube by 30 degree pitch and 30 degree yaw. Enter different values for scaling in x, y and z axes.

Translate

First rotate cube by 30 degree pitch and 30 degree yaw. Enter different values for translation in x, y and z axes.

Rotate

As noted earlier, the rotation happens in counter clockwise direction along the axis. The diagram below maps faces to numbers.

Rotation around X axis

Rotate the cube by 90 degrees increments. The sequences of faces that should display are as below.

Rotation around Y axis

Rotate the cube by 90 degrees increments. The sequences of faces that should display are as below.

Rotation around Z axis

Rotate the cube by 90 degrees increments. The sequences of faces that should display are as below.

Order of Transformation

Following order is used:

1. Scale
2. Rotate by Z,X,Y
3. Translate

Note in code, the matrix would be computed in reverse order as below.

                M = mat4(1);
		M = translate(M, translateby);
		M = rotate(M, radians((float)(yaw)), vec3(0.0f, 1.0f, 0.0f));
		M = rotate(M, radians((float)(pitch)), vec3(1.0f, 0.0f, 0.0f));
		M = rotate(M, radians((float)(roll)), vec3(0.0f, 0.0f, 1.0f));
		M = scale(M, scaleby);