Ingredients:
One well tessellated sphere.  One vertex shader,  pixel shader; noise generator or noise map of choice; one gradient color texture, one detail noise map, one RGBA render target, one blur shader, hundred lines of code and a pinch of salt.

Preparation:
Pick a nice sphere. Load prepared model, or generate one in the code, it’s your choice. Should be about half of radius of effect we are trying to cook. Slowly tessellate it, until you end up with just enough triangles (that may vary on your taste). You should have picked your noise generator already. Creating turbulence with perlin noise can work great (for example: https://github.com/ashima/webgl-noise), but other options can be fine too,  like having couple of 2D noise textures packed in RGB channels.

Vertex shader should be ready by now. We start by offsetting vertices along sphere normals, scaled by noise value at vertex’s coords. It should look like a cloud puff. Not very exciting, right? At least not for this occasion.

Cloud

So let’s move onto pixel shader. Explosions start with hot, bright core, then transition to thick black smoke. Gradient texture, going from bright yellow, to orange, red, and then darkening to almost black would be ideal ingredient.  We can use fragment’s distance from start radius of the sphere, or just clamped noise value to sample gradient texture. Mixing-in some additional 2D noise to add more details were geometry may not be enough may help, especially if you are using somewhat modest tessellation and not offsetting vertices too much. Tessellation shader would be a great addition to this effect, to add needed details for that big, in your face pyroclastic explosion.

Volumetric explosion wireframe

Volumetric explosion wireframe

Our second render target (or render buffer if you prefer GL) should be ready for our fireball. Simply render it, while keeping and depth-testing against already filled depth buffer, to allow displaced sphere to interact correctly with rest of the scene, à la megaparticles – Now, let’s add some blur and some 2D noise on top of it. Better? Yes. This should help lose rough edges, especially as fire starts to fade away and to make it more fluid and smoke in the nature, rather than solid object. Don’t add too much blur to keep it fiery. Stir while it’s hot for couple of minutes, until you hit the right spot. Can you smell it? Should be ready now. Finally, add pinch of salt.

Serving:
Serve hot, with some particles and debris.