Time-killer WebGL

There are a lot of shader-playgrounds for WebGL scattered around the net. A few of the better known ones are…

• Shadertoy
• GLSLsandbox
• Shdr
• WebGLPlayground
• GLSLbin

Some let you mess around with the fragment-shaders only, while others expose vertex- and fragment-shaders. The great advantage you get with these WebGL-environments is the fact, that they eliminate the need for setting up your OpenGL-context using the native toolkit of your OS, though this is only mildly painful these days thanks to SDL, Qt and gtk. Thus you can concentrate on the graphical effect idea right from the start.

Although WebGL does not expose all the latest features of desktop OpenGL 4.x, WebGL 2.0 is equal to OpenGL|ES 3.0. With that you have a very rich toolset already. One of the major features still missing, is support for geometry-shaders. These are the ones that get executed before the vertex-shader and can inject geometry-data into your draw-calls.

At the above mentioned sites, there are some very impressive examples of what kind of crazy effects you can do. I just wanted to try out some simple drawing-primitives in a fragment-shader only approach and spent the whole evening toying around with this…

This looks like 3D, but isn’t really 🙂 There is no usual 3D-vertex-data ever pushed to the GPU to draw the box. Everything is happening in one single fragment-shader… yes really, I’m not kidding! Since there’s no typical rasterization-breakdown of a geometric object, the lines are drawn in a analytic fashion without the help of Bresenham’s algorithm. Head over and take a look!