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: Github.com), 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.
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.
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.
if there was a like button id be clicking it :)
Same here. Awesome post, thanks for sharing!
I'm thinking about generating something similar in 2D...
Great work!
So my question is, how does the explosion end? You have the transition between the start and end but how does it transition between end to nothingness?
First of all, currently we haven't integrated fully volumetric explosion into the gameplay, so I'm still looking for best solution and best visual effect for fade-out. As it is rendered to another render target, we could place it on a billboard like a sprite and fade it that way. Interaction with rest of the scene geometry is already done while rendering to render target, as we are using scene depth buffer to test explosion pixels against. Another thing would be to add some blurring and smearing of resulting render target after main part of explosion would end and smoke fade-out starts. Also doing some clever alpha blending using additional noise texture could work with rendering directly to frame buffer to help hide blending artifacts from casual viewer.
This comment is currently awaiting admin approval, join now to view.