This just in: The entire world of WebGL matrixes is backwards.

Instead of saying

translatedPoint = [x y z 1] [1 0 0 Tx
0 1 0 Ty
0 0 1 Tz
0 0 0 1]

or

var translateM = [1,0,0,tx,
0,1,0,ty,
0,0,1,tz,
0,0,0,1];

or

vec4 p2 = pos * rotateFirstM4 * translateM4;
// alternatively
vec4 p2 = pos;
p2 *= rotateFirstM4; // first transformation
p2 *= translateM4; // second transformation

they want everything backwards, like

mat4 translateM4 = mat4(vec4(1,0,0,0),
vec4(0,1,0,0),
vec4(0,0,1,0),
vec4(tx,ty,tz,0));
vec4 p2 = translateM * rotateFirstM4 * pos;

It does have one small advantege. It takes a little less paper-space to write out.

translatedPoint = [1 0 0 0 * [x
0 1 0 0 y
0 0 1 0 z
Tx Ty Tz 1] 1]

And you could just do it all the other way, transposed, and left to right. Except… I’ve chosen to use a matrix library glMatrix.js. It’s handy, it’s good, it has all the basics like mat4.rotate() and everything. But it enforces the OpenGL backwards-ness.

I grump.

People blame this on the fact that OpenGL lays out its matrixes in-memory in “Column Major Order”, meaning the first column takes the first four memory locations. Whereas we read them and code them in “Row Major”-ey style, left to right and top to bottom.

But that’s no excuse… by putting your horizontal vector on the left of the matrix, instead of vertical on the right, you can get pretty code.

On my backlog is “translate glMatrix.js to Row Major stylings”, so my code can look more like textbook math.