Notes for Wednesday March 3 class -- matrices

Matrices

As we discussed in class, 4x4 matrices are the general mechanism for linear transformations of objects. Linear transformations are those transformations that always transform straight lines to straight lines. They include translation, rotation, scaling and perspective.

In this class we will adopt the convention of column major storage of matrices. So the 16 successive values that describe a 4x4 matrix: 

   0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
will represent columns as the outer loop and rows as the inner loop: 
   0  4  8 12
   1  5  9 13
   2  6 10 14
   3  7 11 15
As we discussed in class, the structure of each of the primitive types of matrices is as follows: 
Identity:

   1 0 0 0
   0 1 0 0
   0 0 1 0
   0 0 0 1

Translate:

   1 0 0 tx
   0 1 0 ty
   0 0 1 tz
   0 0 0 1

Note: Using our column major format, the above is specified as:

   [ 1,0,0,0, 0,1,0,0, 0,0,1,0, tx,ty,tz,1 ]

In the following three primitives, c = cos(θ) and s = sin(θ).

Rotate about X:

   1 0  0 0
   0 c -s 0
   0 s  c 0
   0 0  0 1

Rotate about Y:

   c 0 s 0
   0 1 0 0
  -s 0 c 0
   0 0 0 1

Rotate about Z:

   c -s 0 0
   s  c 0 0
   0  0 1 0
   0  0 0 1

Scale:

   sx 0  0  0
   0  sy 0  0
   0  0  sz 0
   0  0  0  1
In class we showed how to send the result to the vertex shader as a uniform variable uMatrix, in order to transform the vertices of the triangle strip that describes our square.

In order to do a succession of matrix operations, you need to multiply together matrices. For example, a translation followed by a rotation about z is defined by multiplying together the following two matrices: 

   1 0 0 tx     c -s 0 0
   0 1 0 ty     s  c 0 0
   0 0 1 tz     0  0 0 1
   0 0 0 1      0  0 0 1
What we didn't describe in class is how to implement matrix multiplication. Matrix multiplication is done by taking the 16 possible dot products between the 4 rows of the matrix on the left and the 4 columns of the matrix on the right.

For example, supposed you want to multiply two 4x4 matrices A and B: 

   A0,0 A1,0 A2,0 A3,0     B0,0 B1,0 B2,0 B3,0
   A0,1 A1,1 A2,1 A3,1  *  B0,1 B1,1 B2,1 B3,1
   A0,2 A1,2 A2,2 A3,2     B0,2 B1,2 B2,2 B3,2
   A0,3 A1,3 A2,3 A3,3     B0,3 B1,3 B2,3 B3,3
You do this by taking 16 dot products. To compute a given element (i,j) of their product C, take the dot product of column i of B with row j of A: 
   C0,0 C1,0 C2,0 C3,0     A0,0 A1,0 A2,0 A3,0     B0,0 B1,0 B2,0 B3,0
   C0,1 C1,1 C2,1 C3,1  =  A0,1 A1,1 A2,1 A3,1  *  B0,1 B1,1 B2,1 B3,1
   C0,2 C1,2 C2,2 C3,2     A0,2 A1,2 A2,2 A3,2     B0,2 B1,2 B2,2 B3,2
   C0,3 C1,3 C2,3 C3,3     A0,3 A1,3 A2,3 A3,3     B0,3 B1,3 B2,3 B3,3
In the case above, we compute C2,1 by taking the following dot product: 
   C2,1  =  A0,1 * B2,0  +  A1,1 * B2,1  +   A2,1 * B2,2  +  A3,1 * B2,3
Homework

Due next Wednesday before the start of class

Start with the included code in hw4.zip.
In particular, look at the code near the end of index.html.

I have already implemented for you matrix_identity() and matrix_translate().

You still need to implement matrix_rotateX(), matrix_rotateY(), matrix_rotateZ() and matrix_scale().

You also need to implement matrix_multiply().

Create a cool animation of the square using all of the matrix primitives. See if you can make the square move and change in interesting ways.