omino pixel blog

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.

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.

Excerpts from a personal five-evening whirlwind tour to get up to speed on some “modern interactive graphics.”

Works only on Chrome, or Safari if you enable webgl.

A minor revision to the Reason Rack Extension WBL5515 is available in the Propellerhead Shop. This version corrects some subtle bugs with track automation and note recording, and adds some responsiveness to incoming notes. Also, a small gold star is visible on the rear-facing panel. Enjoy.