First steps with WebGL

Since the release of ro.me a part of myself keeps telling me to learn webGL, to taste the power of the mythical beasts called “shaders”. As more and more three.js demos are released, it was time to start.


However I didn’t wanted to use three.js because I like to know how things work and for my personal experiments I try to write my own code as much as possible. So I wrote “a library that allows me to explore shaders in a simple 3d environment”. No lightning nor camera, just shaders and simple meshes. I set these restrictions to avoid coding something too complex as webGL is a vast topic. I have to admit the nice learningwebgl.com came to rescue more than once.


As soon as the engine was usable I tied to imitate some classics from the old demoscene, like the mandelbrot fractal or the infamous tunnel effect and other few things.

Of course it was impossible not to play with the webcam, so here is a couple of experiments (chrome only). The first one is a direct port from my old experiments on dithering and the second is the classic displacement of a plane’s vertices based on the image’s colors

The last one thing I absolutely wanted to make is a million particle engine. The idea is to process all the computation on shaders, using textures as a support for data. I have to admit I don’t control everything yet but this experiment kinda work anyway.