omino pixel blog

Only had a short interval today. Did a first implementation of camera management. Here, it cycles between a street view and an aerial view.

Built machinery around textures and frame buffers. In the olden days we called this an Offscreen G World. Added some basic surface normals. For rendering, randomizing them a bit adds some cheap interestingness.

Also: filters. Ported omino_glass chromatic aberration filter to run here, realtime.

Next: multiple camera angles, alternating.

Second day, built a scene management tree helper and some camera moves. And some rather basic shapes.

This is about 1988 era screen-saver quality now!

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.