Archive for April of 2011

Learning WebGL

April 24, 2011
WebGL is basically a way to display hardware accelerated 3d content on a browser. It is not yet mainstream so it is perfect time play around and experiment with it. At the moment only FF4 and Chrome support it, WebKit nightly build should have support as well.

WebGL uses OpenGL ES 2.0 which is a cut down version of OpenGL. Deprecated parts of the API have been cut off but there are some goodies like shader programmin language GLSL. It is more complicated than plain HTML5 Canvas to get started with but there are good examples and tutorials.

My starting point was to implement my audio waveform visualizer in WebGL. It uses SoundManager 2 to read the waveform data and the data is then drawn on the screen as a line. The first version simply drew a the waveform on the screen without any special tricks.

For the second version I wanted to try out writing my own shader code. The waveform is not rendered directly on the screen but it is drawn in a separate frame buffer. This buffer is then used to generate a texture on a quad. At the rendering time of this quad my shader code kicks in and does blurring post processing on the fragment level.

I am just getting started with WebGL and I have plenty of ideas...