We’ve got a new case to solve: How did Bethesda do these fine mushroom-like explosion clouds?
If you don’t know what’s so hard doing such effects, just continue reading. If you do know the difficulties and just want to read the explanation, jump to the solution-section by clicking here.
The upper part of such an explosion consists of complex movement where the hot gases “roll” around the center of a “donut”-shape:
In addition there’s a transition from “only hot gas” to “only black smoke”:
As you see there is some complexity and below I’ll shorty conclude how games tried to solve the visualization in the past.
Some older games didn’t show the whole “build up” process of the explosion cloud but used a bright fullscreen effect and when this was gone particles had already formed the typical tree-like shape but not much movement was going on anymore. Here’s an example from Mercenaries 2: World in Flames
It’s really not a simple task to make something like this with just simple particles and without any extra features like geometry or texture animation which will be explained below. But what was already achieved pretty well is the form of the cloud!
To get the movement a bit more interesting, you can rotate the particles in different speed & direction depending on the effects origin:
Here’s an example (R.U.S.E.) where this works very well and shows some nice movement in the raising clouds:
But even now the hot gases don’t get “sucked” in again at the lower part of the “donut” like in real-life. That’s why you may use geometries as an addition to the particles – see the next page for details.
In my eyes Fallout 3 did a great job in combining geometry and particles to get it right (at least for its time). Directly from the start you can see details of the movement because the explosion isn’t completely hidden by a big white flash:
This is done via UV Animation which basically means that you have some geometry and move a texture along. If you fade this in and out (at the beginning and ending of the effect) and combine it with some particle smoke, it works already really well.
Here’s an example how the Fallout-Texture looks on a test geometry with additive blending and some vertex color to avoid hard edges at the geometry border:
In Fallout 4 a similar texture animation was used on particles (not geometry like in Fallout 3) which works really well by using one texture as cloud shape and moving another tile-able texture in addition over the particle. It even looks like that the scrolling-direction points always towards the center of the explosion:
If you look closely you might still notice that it’s “just” a texture moving along a flat particle plane. Here I changed the second texture to show the mechanic a bit better:
Now we have not only a good tree-like form but also really nice movement. The only thing what’s missing is that the burning gas “convertes” to black smoke (in a more complex way than just fading the bright parts out and only leave some black particles).
Except from rendering explosions with a complex simulation program I wouldn’t have any idea of how something like this could be done in a game but then I saw a trailer with a stunning explosion:
Source: Battlefield 4 Trailer
Doesn’t it look great how the fire gets “eaten” by the black smoke – how it dissolves? Unfortunately I don’t own the game and can’t search for clues but at least it showed me that something like this is possible. But how?
My only explanation would be that it’s pre-rendered somehow with e.g. FumeFx. Here’s an example of what you can simulate with the software (but of course not in real-time – click here to see it in motion):
An in fact some studios like Epic use this approach and bake the result of the simulation frame by frame into textures. If you want to know more about this workflow, watch this great video:
Regarding our original question, I was sure that Fallout 4 did exactly the same thing: Pre-rendering the explosion and just showing a “playback” in the game. Just as a reminder: Here’s the Fallout explosion again:
It is an atlas texture and it looks wonderful when played – and in addition it’s loop-able!
But there’s no fire at all! I thought something must be missing until I remembered the concept of gradient mapping. More details can be read in this great article and watched in this small example:
So you can colorize the grey smoke texture into something with color by re-mapping colors. Here I defined the black values as orange and what was white before is now black:
Looks great but there are two problems left:
- The fire/smoke proportion stay the same but we want to have a lot fire at the beginning and only black smoke at the end
- We don’t see any cloud silhouette and if we apply the transparency information of the atlas texture (alpha channel) it looks like this:
I was confused because the alpha channel makes the whole texture mostly 50% transparent but in the game the clouds are almost opaque.
Again the solution seams to be gradient mapping: For cutting out the cloud shape, they do use the alpha channel of atlas texture but re-define its values via gradient mapping and achieve an opaque look:
Fallout stores its gradients in *tadaa* textures. What a surprise. Let’s have a look on it:
What’s that? For a standard gradient mapping you would only need a texture of 1 pixel height so why do they use a quadratic texture?? The reason is, that they sample different pixel-“lines” (from bottom to top) depending on the particles lifetime!
This is genius! It makes it possible to colorize the smoke with a lot fire at the beginning and the longer the particle raises into the air it gets more and more black.
They even changed the cloud shape a bit by modifying the alpha channel over time.
This is so awesome! I love that they have a loop-able animation so that can set the particle lifetime really high without having to bake more pictures into the atlas since the color variation is handled separately.
I think it’s fair to say:
For those who are interested, I’ve prepared some more experiments for a better understanding and to note some observations.
Here I colored the lower and the upper part of the gradient texture in different colors and like expected at some point of the particles lifetime the color jumps:
Here I did the same but with different colors right and left which means that one color overwrites the grey-scale values from 0 to 127 and the other the values from 128 to 255:
This one is a bit weird. I changed the alpha channel of the gradient texture (everything is black except one pixel line at the bottom). I would have expected that the particles disappear very early. But see the result with your own eyes:
The color changes like before (which means the shader reads from the center-position of the diffuse channel where the color change happens) but the particle is still visible! I guess the shader handles the alpha channel in a different and non-linear way and sticks a longer time to the first pixel-line.
In my last example I made the alpha channel hide more and more of the visible texture the longer the cloud “lives”:
Thank you for following me through all these clues and reading this dossier. If you have any feedback feel free to contact me!
Source: Wayward Terran Frontier
The color variations are done like in Fallout 4. The smoke texture is just grey.
The smoke texture in the game has 14 frames but the first and the last don’t match perfectly. The solution for them was to blend the frames into eachother instead of “just” playing the animation frame by frame: