This post is a continuation of a series of posts about WebGL. The first started with fundamentals and the previous was about scaling 2D geometry.

In the last 3 posts we went over how to translate geometry, rotate geometry, and scale geometry. Translation, rotation and scale are each considered a type of 'transformation'. Each of these transformations required changes to the shader and each of the 3 transformations was order dependent. In our previous example we scaled, then rotated, then translated. If we applied those in a different order we'd get a different result.

For example here is a scale of 2, 1, rotation of 30 degrees, and translation of 100, 0.

And here is a translation of 100,0, rotation of 30 degrees and scale of 2, 1

The results are completely different. Even worse, if we needed the second example we'd have to write a different shader that applied the translation, rotation, and scale in our new desired order.

Well, some people way smarter than me figured out that you can do all the same stuff with matrix math. For 2D we use a 3x3 matrix. A 3x3 matrix is like a grid with 9 boxes:

1.0 | 2.0 | 3.0 |

4.0 | 5.0 | 6.0 |

7.0 | 8.0 | 9.0 |

To do the math we multiply the position down the columns of the matrix and add up the results. Our positions only have 2 values, x and y, but to do this math we need 3 values so we'll use 1 for the third value.

In this case our result would be

newX = | x * | 1.0 | + | newY = | x * | 2.0 | + | extra = | x * | 3.0 | + |

y * | 4.0 | + | y * | 5.0 | + | y * | 6.0 | + | |||

1 * | 7.0 | 1 * | 8.0 | 1 * | 9.0 |

You're probably looking at that and thinking "WHAT'S THE POINT?" Well, let's assume we have a translation. We'll call the amount we want to translate by tx and ty. Let's make a matrix like this

1.0 | 0.0 | 0.0 |

0.0 | 1.0 | 0.0 |

tx | ty | 1.0 |

And now check it out

newX = | x | * | 1.0 | + | newY = | x | * | 0.0 | + | extra = | x | * | 0.0 | + |

y | * | 0.0 | + | y | * | 1.0 | + | y | * | 0.0 | + | |||

1 | * | tx | 1 | * | ty | 1 | * | 1.0 |

If you remember your algebra, we can delete any place that multiplies by zero. Multiplying by 1 effectively does nothing so let's simplify to see what's happening

newX = | x | * | 1.0 | + | newY = | x | * | 0.0 | + | extra = | x | * | 0.0 | + |

y | * | 0.0 | + | y | * | 1.0 | + | y | * | 0.0 | + | |||

1 | * | tx | 1 | * | ty | 1 | * | 1.0 |

or more succinctly

newX = x + tx; newY = y + ty;

And extra we don't really care about. That looks surprisingly like the translation code from our translation example.

Similarly let's do rotation. Like we pointed out in the rotation post we just need the sine and cosine of the angle at which we want to rotate, so

s = Math.sin(angleToRotateInRadians); c = Math.cos(angleToRotateInRadians);

And we build a matrix like this

c | -s | 0.0 |

s | c | 0.0 |

0.0 | 0.0 | 1.0 |

Applying the matrix we get this

newX = | x | * | c | + | newY = | x | * | -s | + | extra = | x | * | 0.0 | + |

y | * | s | + | y | * | c | + | y | * | 0.0 | + | |||

1 | * | 0.0 | 1 | * | 0.0 | 1 | * | 1.0 |

Blacking out all multiply by 0s and 1s we get

newX = | x | * | c | + | newY = | x | * | -s | + | extra = | x | * | 0.0 | + |

y | * | s | + | y | * | c | + | y | * | 0.0 | + | |||

1 | * | 0.0 | 1 | * | 0.0 | 1 | * | 1.0 |

And simplifying we get

newX = x * c + y * s; newY = x * -s + y * c;

Which is exactly what we had in our rotation sample.

And lastly scale. We'll call our 2 scale factors sx and sy

And we build a matrix like this

sx | 0.0 | 0.0 |

0.0 | sy | 0.0 |

0.0 | 0.0 | 1.0 |

Applying the matrix we get this

newX = | x | * | sx | + | newY = | x | * | 0.0 | + | extra = | x | * | 0.0 | + |

y | * | 0.0 | + | y | * | sy | + | y | * | 0.0 | + | |||

1 | * | 0.0 | 1 | * | 0.0 | 1 | * | 1.0 |

which is really

newX = | x | * | sx | + | newY = | x | * | 0.0 | + | extra = | x | * | 0.0 | + |

y | * | 0.0 | + | y | * | sy | + | y | * | 0.0 | + | |||

1 | * | 0.0 | 1 | * | 0.0 | 1 | * | 1.0 |

which simplified is

newX = x * sx; newY = y * sy;

Which is the same as our scaling sample.

Now I'm sure you might still be thinking "So what? What's the point?" That seems like a lot of work just to do the same thing we were already doing.

This is where the magic comes in. It turns out we can multiply matrices
together and apply all the transformations at once. Let's assume we have
a function, `m3.multiply`

, that takes two matrices, multiplies them and
returns the result.

To make things clearer let's make functions to build matrices for translation, rotation and scale.

```
var m3 = {
translation: function(tx, ty) {
return [
1, 0, 0,
0, 1, 0,
tx, ty, 1,
];
},
rotation: function(angleInRadians) {
var c = Math.cos(angleInRadians);
var s = Math.sin(angleInRadians);
return [
c,-s, 0,
s, c, 0,
0, 0, 1,
];
},
scaling: function(sx, sy) {
return [
sx, 0, 0,
0, sy, 0,
0, 0, 1,
];
},
};
```

Now let's change our shader. The old shader looked like this

```
#version 300 es
in vec2 a_position;
uniform vec2 u_resolution;
uniform vec2 u_translation;
uniform vec2 u_rotation;
uniform vec2 u_scale;
void main() {
// Scale the positon
vec2 scaledPosition = a_position * u_scale;
// Rotate the position
vec2 rotatedPosition = vec2(
scaledPosition.x * u_rotation.y + scaledPosition.y * u_rotation.x,
scaledPosition.y * u_rotation.y - scaledPosition.x * u_rotation.x);
// Add in the translation.
vec2 position = rotatedPosition + u_translation;
```

Our new shader will be much simpler.

```
#version 300 es
in vec2 a_position;
uniform vec2 u_resolution;
uniform mat3 u_matrix;
void main() {
// Multiply the position by the matrix.
vec2 position = (u_matrix * vec3(a_position, 1)).xy;
...
```

And here's how we use it

```
// Draw the scene.
function drawScene() {
webglUtils.resizeCanvasToDisplaySize(gl.canvas);
// Tell WebGL how to convert from clip space to pixels
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// Clear the canvas
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Tell it to use our program (pair of shaders)
gl.useProgram(program);
// Bind the attribute/buffer set we want.
gl.bindVertexArray(vao);
// Pass in the canvas resolution so we can convert from
// pixels to clipspace in the shader
gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
* // Compute the matrices
* var translationMatrix = m3.translation(translation[0], translation[1]);
* var rotationMatrix = m3.rotation(rotationInRadians);
* var scaleMatrix = m3.scaling(scale[0], scale[1]);
*
* // Multiply the matrices.
* var matrix = m3.multiply(translationMatrix, rotationMatrix);
* matrix = m3.multiply(matrix, scaleMatrix);
*
* // Set the matrix.
* gl.uniformMatrix3fv(matrixLocation, false, matrix);
// Set the color.
gl.uniform4fv(colorLocation, color);
// Draw the rectangle.
var primitiveType = gl.TRIANGLES;
var offset = 0;
var count = 18;
gl.drawArrays(primitiveType, offset, count);
}
```

Here's a sample using our new code. The sliders are the same, translation, rotation and scale. But the way they get used in the shader is much simpler.

Still, you might be asking, so what? That doesn't seem like much of a benefit. But, now if we want to change the order we don't have to write a new shader. We can just change the math.

```
...
// Multiply the matrices.
var matrix = m3.multiply(scaleMatrix, rotationMatrix);
matrix = m3.multiply(matrix, translationMatrix);
...
```

Here's that version.

Being able to apply matrices like this is especially important for hierarchical animation like arms on a body, moons on a planet around a sun, or branches on a tree. For a simple example of hierarchical animation lets draw draw our 'F' 5 times but each time lets start with the matrix from the previous 'F'.

```
// Draw the scene.
function drawScene() {
...
// Compute the matrices
var translationMatrix = m3.translation(translation[0], translation[1]);
var rotationMatrix = m3.rotation(rotationInRadians);
var scaleMatrix = m3.scaling(scale[0], scale[1]);
// Starting Matrix.
var matrix = m3.identity();
for (var i = 0; i < 5; ++i) {
// Multiply the matrices.
matrix = m3.multiply(matrix, translationMatrix);
matrix = m3.multiply(matrix, rotationMatrix);
matrix = m3.multiply(matrix, scaleMatrix);
// Set the matrix.
gl.uniformMatrix3fv(matrixLocation, false, matrix);
// Draw the geometry.
var primitiveType = gl.TRIANGLES;
var offset = 0;
var count = 18;
gl.drawArrays(primitiveType, offset, count);
}
}
```

To do this we introduced the function, `m3.identity`

, that makes an
identity matrix. An identity matrix is a matrix that effectively represents
1.0 so that if you multiply by the identity nothing happens. Just like

X * 1 = X

so too

matrixX * identity = matrixX

Here's the code to make an identity matrix.

```
var m3 = {
identity: function () {
return [
1, 0, 0,
0, 1, 0,
0, 0, 1,
];
},
...
```

Here's the 5 Fs.

Let's see one more example. In every sample so far our 'F' rotates around its top left corner. This is because the math we are using always rotates around the origin and the top left corner of our 'F' is at the origin, (0, 0).

But now, because we can do matrix math and we can choose the order that transforms are applied we can effectively move the origin before the rest of the transforms are applied.

```
// make a matrix that will move the origin of the 'F' to its center.
var moveOriginMatrix = m3.translation(-50, -75);
...
// Multiply the matrices.
var matrix = m3.multiply(translationMatrix, rotationMatrix);
matrix = m3.multiply(matrix, scaleMatrix);
+ matrix = m3.multiply(matrix, moveOriginMatrix);
```

Here's that sample. Notice the F rotates and scales around the center.

Using that technique you can rotate or scale from any point. Now you know how Photoshop or Flash let you move the rotation point of some image.

Let's go even more crazy. If you go back to the first article on WebGL fundamentals you might remember we have code in the shader to convert from pixels to clipspace that looks like this.

```
...
// convert the rectangle from pixels to 0.0 to 1.0
vec2 zeroToOne = position / u_resolution;
// convert from 0->1 to 0->2
vec2 zeroToTwo = zeroToOne * 2.0;
// convert from 0->2 to -1->+1 (clipspace)
vec2 clipSpace = zeroToTwo - 1.0;
gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
```

If you look at each of those steps in turn, the first step, "convert from pixels to 0.0 to 1.0", is really a scale operation. The second is also a scale operation. The next is a translation and the very last scales Y by -1. We can actually do that all in the matrix we pass into the shader. We could make 2 scale matrices, one to scale by 1.0/resolution, another to scale by 2.0, a 3rd to translate by -1.0,-1.0 and a 4th to scale Y by -1 then multiply them all together but instead, because the math is simple, we'll just make a function that makes a 'projection' matrix for a given resolution directly.

```
var m3 = {
projection: function (width, height) {
// Note: This matrix flips the Y axis so that 0 is at the top.
return [
2 / width, 0, 0,
0, -2 / height, 0,
-1, 1, 1,
];
},
...
```

Now we can simplify the shader even more. Here's the entire new vertex shader.

```
#version 300 es
in vec2 a_position;
uniform mat3 u_matrix;
void main() {
// Multiply the position by the matrix.
gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
}
```

And in JavaScript we need to multiply by the projection matrix

```
// Draw the scene.
function drawScene() {
...
- // Pass in the canvas resolution so we can convert from
- // pixels to clipspace in the shader
- gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
...
// Compute the matrices
+ var projectionMatrix = m3.projection(
+ gl.canvas.clientWidth, gl.canvas.clientHeight);
var translationMatrix = m3.translation(translation[0], translation[1]);
var rotationMatrix = m3.rotation(rotationInRadians);
var scaleMatrix = m3.scaling(scale[0], scale[1]);
// Multiply the matrices.
* var matrix = m3.multiply(projectionMatrix, translationMatrix);
* matrix = m3.multiply(matrix, rotationMatrix);
matrix = m3.multiply(matrix, scaleMatrix);
...
}
```

We also removed the code that set the resolution. With this last step we've gone from a rather complicated shader with 6-7 steps to a very simple shader with only 1 step all due to the magic of matrix math.

Before we move on let's simplifiy a little bit. While it's common to generate various matrices and separately multiply them together it's also common to just multiply them as we go. Effectively we could functions like this

```
var m3 = {
...
translate: function(m, tx, ty) {
return m3.multiply(m, m3.translation(tx, ty));
},
rotate: function(m, angleInRadians) {
return m3.multiply(m, m3.rotation(angleInRadians));
},
scale: function(m, sx, sy) {
return m3.multiply(m, m3.scaling(sx, sy));
},
...
};
```

This would let us change 7 lines of matrix code above to just 4 lines like this

```
// Compute the matrix
var matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight);
matrix = m3.translate(matrix, translation[0], translation[1]);
matrix = m3.rotate(matrix, rotationInRadians);
matrix = m3.scale(matrix, scale[0], scale[1]);
```

And here's that

One last thing, we saw above order matters. In the first example we had

```
translation * rotation * scale
```

and in the second we had

```
scale * rotation * translation
```

And we saw how they are different.

The are 2 ways to look at matrices. Given the expression

```
projectionMat * translationMat * rotationMat * scaleMat * position
```

The first way which many people find natural is to start on the right and work to the left

First we mutiply the positon by the scale matrix to get a scaled postion

```
scaledPosition = scaleMat * position
```

Then we multiply the scaledPostion by the rotation matrix to get a rotatedScaledPosition

```
rotatedScaledPosition = rotationMat * scaledPosition
```

Then we multiply the rotatedScaledPositon by the translation matrix to get a translatedRotatedScaledPosition

```
translatedRotatedScaledPosition = translationMat * rotatedScaledPosition
```

And finally we multiple that by the projection matrix to get clipspace positions

```
clipspacePosition = projectioMatrix * translatedRotatedScaledPosition
```

The 2nd way to look at matrices is reading from left to right. In that case each matrix changes the *space" respesented by the canvas. The canvas starts with representing clipspace (-1 to +1) in each direction. Each matrix applied from left to right changes the space represented by the canvas.

Step 1: no matrix (or the identiy matrix)

clip spaceThe white area is the canvas. Blue is outside the canvas. We're in clip space. Positions passed in need to be in clip space

Step 2: `matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight)`

;

from clip space to pixel spaceWe're now in pixel space. X = 0 to 400, Y = 0 to 300 with 0,0 at the top left. Positions passed using this matrix in need to be in pixel space. The flash you see is when the space flips from positive Y = up to positive Y = down.

Step 3: `matrix = m3.translate(matrix, tx, ty);`

move origin to tx, tyThe origin has now been moved to tx, ty (150, 100). The space has moved.

Step 4: `matrix = m3.rotate(matrix, rotationInRadians);`

rotate 33 degreesThe space has been rotated around tx, ty

Step 5: `matrix = m3.scale(matrix, sx, sy);`

The previously rotated space with its center at tx, ty has been scaled 2 in x, 1.5 in y

In the shader we then do `gl_Position = matrix * position;`

. The `position`

values are effectively in this final space.

Use which ever way you feel is easier to understand.

I hope these posts have helped demystify matrix math. If you want to stick with 2D I'd suggest checking out recreating canvas 2d's drawImage function and following that into recreating canvas 2d's matrix stack.

Otherwise next we'll move on to 3D. In 3D the matrix math follows the same principles and usage. I started with 2D to hopefully keep it simple to understand.

Also, if you really want to become an expert in matrix math check out this amazing videos.

Questions? Ask on stackoverflow.

Issue/Bug? Create an issue on github.

comments powered by Disqus