Hey, I'm Simon and I made a game!! :)
Support me: BUY & Demo on Steam
You can choose!
Read the article or watch the movie.
Both contain (almost) the same content.

I didn’t embed the video directly to avoid any tracking from Google and complications with the DSGVO.

Case File Msh/Rm

We’ve got a new case to solve: How did Bethesda do these fine mushroom-like explosion clouds?


Source: Fallout 4

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.

Real-Life
Why is it so hard in doing mushroom-clouds in games? Let’s look at a real-world example:

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.

Particles

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.

UV Animation

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:


Source: Fallout 3

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.


Source: Fallout 3

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:


Source: Fallout 3

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:


Source: Fallout 4

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:


Source: Fallout 4

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:

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?

Texture Animation

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):

Source: FumeFx

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:

I didn’t embed the video directly to avoid any tracking from Google and complications with the DSGVO.

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:


Source: Fallout 4

The Solution
So I searched the textures and expecting to find an atlas texture full of explosion frames but I just found this:

It is an atlas texture and it looks wonderful when played – and in addition it’s loop-able!


Source: Fallout 4

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:


Source: Fallout 4

Looks great but there are two problems left:

  1. 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
  2. We don’t see any cloud silhouette and if we apply the transparency information of the atlas texture (alpha channel) it looks like this:

Source: Fallout 4

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:

Source: Fallout 4

Fallout stores its gradients in *tadaa* textures. What a surprise. Let’s have a look on it:

Source: Fallout 4 SmokeCrawlGasFireGrad.dds

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.


Source: Fallout 4

They even changed the cloud shape a bit by modifying the alpha channel over time.


Source: Fallout 4

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:

Case closed!

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:


Source: Fallout 4

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:


Source: Fallout 4

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:


Source: Fallout 4

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”:


Source: Fallout 4


Thank you for following me through all these clues and reading this dossier. If you have any feedback feel free to contact me!

Update 1
Ravendarke showed examples from a game he’s working on (Wayward Terran Frontier) where similar stuff is done with an interesting approach to make a non-seamless texture seem seamless (more about that below):

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:

Update 2
Froyok twittered this great article about particles + color modification by Alkemi.

Source: Alkemi

In addition he mentioned a discussion where someone else asked how the Battlefield 4 explosion was done.

Update 3
Florian Smolka shows his shader-work from an unanncounced game (World premiere!) from the great german developer Mimimi Productions! We even get a look at the textures and commented shader code! How cool is that?


Color Ramp Texture

Alpha Ramp Texture
Source: Mimimi Productions

Update 4
Holy smoke! Zoltan Erdokovy explains his method of bringing extra-motion into his smoke without a flipbook-texture in this post. Especially the fiery core looks awesome!!

Source: Drone Alone

Update 5
Found this video where the player went really near to the Fallout 4 mushroom cloud and this makes us able to see better how it’s made. :)

Update 6
“Nebbul vfx” posted this video on his Youtube channel about combining the Fallout 4 gradients with Motion Vectors. Looks fantastic!

I didn’t embed the video directly to avoid any tracking from Google and complications with the DSGVO.

Update 7

29 thoughts on “Fallout 4 – The Mushroom Case

  1. MaT.

    Great explanation for a simple trick and great visual results. I looked at the video and the article. Good job ! :)

    Reply
  2. Tororin

    Excellent article. I’ve thought about using color grading that changes over time. Ingenious!

    I’m also very happy that you’re continuing to do video + full text for your articles, very helpful :)

    Reply
  3. SunnyChow

    Amazing article. Do you mind if you share the texture you export from fallout 4? I would like to practice some programming

    Reply
    1. Simon Post author

      If you own Fallout 4 you can extract it by your own. If you don’t you can send me an E-Mail so I can help you. :)

      Reply
  4. Flo

    Thank you for the detailed breakdown! Really useful, especially because i’m currently working on something similar =) Although i used the remapping before i didn’t thought about using it in that case.
    Did they use a extra texture for the alpha channel or just the alpha channel of the flipbook texture?

    Reply
    1. Simon Post author

      Would love to see your results if you’re done with out work :) The transparency information where in both cases (flipbook texture, color texture) stored in the alpha channel. :)

      Reply
  5. dom

    Thanks for this. Really appreciated. I tried the shader provided and it doesn’t give good results ? Is there something missing ? I’m not all that experienced in shader coding.

    Reply
    1. Simon Post author

      To be honest I didn’t try it out because I’m not that into shaders too. Currently I rely on the great material networks in the Unreal engine. :) But if you give a more detailed report about what’s not working, maybe Florian can help you?

      Reply
  6. Flo

    Hey! Most likely its due to the texture settings. The ramp Textures have to be automatic truecolor formated, dont generate mip maps and the wrap mode should be set to clamp =) Hope that helps.

    Reply
  7. HK Park

    Really good!
    I’m FX artist.
    So I wonder how to find the source.
    Can you give me the information?

    Reply
    1. Simon Post author

      yeah these geometry explosions are soooo cool :) saw something likes this the first time in planet annihilation and love it. :)

      Reply
  8. BionicDance

    Where is the alpha channel for the Fallout 4 smoke texture?
    It does not appear to be contained within the DDS file…is it a separate image?

    Reply
    1. Simon Post author

      I don’t remember but I think it should be stored in the DDS. But I’m not 100% sure anymore and don’t have the data here right now. :(

      Reply
  9. Stephen

    Hi Simon,

    I was wondering if you knew of a shader in Unity (or a tutorial on how to) set this sort of shader up in shader forge or in the new shader graph? Any help would be greatly appreciated.

    Many thanks for your excellent resource.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *