picture home | art | events | music | rack extensions | downloads | pixel blog | qt_tools

omino pixel blog

pixels, motion, and scripting
david van brink // Sun 2013.10.6 01:08 // {webgl}

webgl day 3

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.


click for

Next: multiple camera angles, alternating.

oh, i dont know. what do you think?

david van brink // Fri 2013.10.4 00:52 // {Uncategorized}

webgl day 2

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


click for

This is about 1988 era screen-saver quality now!

oh, i dont know. what do you think?

david van brink // Thu 2013.10.3 19:46 // {webgl}

webgl matrix interlude

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]


var translateM = [1,0,0,tx,


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 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.

oh, i dont know. what do you think?

david van brink // Tue 2013.10.1 21:43 // {webgl}

webgl day 1

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.


click for

oh, i dont know. what do you think?

(c) 2003-2013 omino.com / contact poly@omino.com