I found myself at home unexpectedly this evening, so what better way to pass the time than learning about particle effects? These are what you use to show explosions, flames, smoke, and other useful things; Google have put together an excellent WebGL demo (actually ported over from O3D) showing a number of different things you can do with them.

The excellent OpenGL ES 2.0 Programming Guide has a simple introduction to particles, so here’s a direct translation into WebGL; if you look hard, you should see small “puffs” of points appearing at regular intervals on the canvas. Unfortunately it looks pretty pathetic; this is because the point sprites that make up the puffs are all just one pixel in size. The code is trying to make them larger, and is trying to put a texture on them too, but unfortunately none of the browsers have quite got the relevant bit of the shader language working yet; this is why I’ve not introduced point sprites yet in the tutorials. [UPDATE: Jacob Seidelin reminded me in the comments that there’s a really easy workaround to the point sprite problem; just put gl.enable(0x8642) in the initialisation code. I’ve done that, and this first example works perfectly well. Thanks, Jacob!]

So, here’s a workaround. Instead of using a point sprite for each particle in the scene, let’s use something we know works: triangles. Specifically, this version of the example uses two triangles for each particle, making each one a square. The result is something that looks just like the OpenGL ES book’s sample; less of a “puff” effect, more of an explosion.

Personally, I didn’t think that was very pretty. So, after a bit of tweaking to make the puffs/explosions spherical, to slow them down, increase the number of particles, and a few other things, the result was this page, which I do think looks rather good :-)

That’s it for particles for now; I’ll be writing a proper tutorial on them later on, after render-to-texture, picking, and shadows.