omino pixel blog

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.

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