Getting Started with WebGL Game Development - WebGL Game Development - page 5

An affine transformation is a linear transformation followed by translation.
Remember that 3 × 3 matrices are used for linear transformations and they do not
contain translation. Due to the nature of matrix multiplication, any transformation
that can be represented by a matrix multiplication cannot contain translation. This is
a problem because matrix multiplication and inversion are powerful for composing
complicated transformations. An example of affine transformation is as follows:

var a=mat3.create(); //Identity matrix created
var vertex=vec3.fromValues(1,1,1);
var scale=mat3.create(); //Identity Matrix created
var final=mat3.create(); //Identity Matrix created
var factor=vec2.fromValues(2,2); //Scaling factor of double create
2x height and 2x width
mat3.scale(scale,a,factor); // a new scale create after
multiplication
mat3.rotate(final,scale,.4);// new matrix scale created which
contains scaling & rotation
var newVertex=final*vertex;

In the preceding code, we created a matrix, final, that contained both scaling and
rotation operations. We created a composite transformation and applied it on a
vertex to get its new position. Now, this final mat3 can be used to transform the
vertices of a 3D object. It would be nice if we could find a way to somehow extend
the standard 3 × 3 transformation matrix to be able to handle transformations
with translation. We can do this by extending our vectors to four-dimensional
homogeneous coordinates and using 4 × 4 matrices to transform them. A 4 × 4 matrix
is given in the following diagram:

M aa M ba M ca T x
M ba M bb M cb T y
M ca M bc M cc T z
0001

MT

F =

0 1

M is the matrix that contains the transformation; the fourth column gives
the translation.