We’ve covered WebGL demos by Jaume Sanchez Elias before, but I also think it is important to promote excellent tutorials about WebGL. So here are links to Jaume’s site (Clicktorelease) which contains an excellent step by step tutorial on how to create an explosive shader in WebGL. Below is the introduction to the tutorial:

This is a tutorial showing the steps to create an animated shape, using a sphere as a basic geometry and perlin noise to disturb the vertices. It also teaches how to add some more variation to the distortion and how to add colour. It’s based on Fireball explosion, part of the Experiments with Perlin Noise Series.

I’m using three.js to create the geometry and setting up the scene, but the GLSL code can be used with any other WebGL/OpenGL library. I’m quite sure it’s also pretty straightforward to translate into HLSL.