Simple Fire Shader Breakdown

fires

Hey everyone! I’m Aka and this is my very first post here. I was playing around with this simple fire shader and was very happy with the result, so I figured I should share my process to get some feedback and hopefully help someone who’s starting out.

I had three main things I wanted to achieve with this shader:

  • Lightweight: it shouldn’t use heavy inputs or complex simulations
  • Flexible: it should be configurable so it could be used in many different cases
  • Believable: it should be instantly recognized as fire, even though is a simple plane

I made it using Unity and Amplify shader, but I’m sure it can be recreated using any other tool and engine.

Base

To make all the effects in the video above, I only used one noise texture! (and a mask for each) It’s this one:

To achieve this effect, I sampled the same texture twice with different tiling and scroll speed values, so it would look like it doesn’t have a fixed pattern and looks more like a natural fire. As I’m using black and white textures, I only need the red channel in my calculations. I also added a global intensity control, multiplied everything and plugged it into the shader’s opacity. It’s always good to add a Saturate node before the opacity output so it clamps the values between 0 and 1 and you don’t get any weird values.

firebase

For now it doesn’t look like much, let’s add some colors! As I’m using a workflow with HDR and bloom, I can just add a HDR Color parameter and plug it into the emission output. The opacity will take care of the color variation and create some interesting colors. But there are other ways to do it, like gradient mapping or multiplying the base into the emission with some colors instead.

fireshader2

firecolor

Border

At first I tried a static mask to make the border but it didn’t look natural. Instead, I used the same idea from the base and added some more math to turn it into an animated border! Again, I used different values for tiling and scroll speeds, you can reuse the same ones from the base but it looks less natural than using new ones. Then I intensified the values based on the UV and added some parameters to make it configurable:

  • BorderHorizontal: a toggle value to define which direction of the UV to use
  • BorderIntensity: to create a more intense value difference and make the border sharper
  • BorderThreshold: to define the limit of the border and limit the values above and below it
  • BorderSmoothness: to subtract and offset to the minimum value when passing through smoothstep

The key here was using Smoothstep to limit everything above the border and multiply it with the opacity values.

fireborder1
Low intensity and threshold, high smoothness: creates a soft and floaty border

fireborder2
High intensity and threshold, low smoothness: creates a sharper and clearer border

We can also add a mask texture to define an overall shape along with the border.


firemask
It still looks a bit static, but we can add movement with particles or with some waves like I’ll show next.

Waves (Optional)

With simple math and UV offsets, we can make a wave effect to add more movement. In this case, I’m adding an offset to the X axis based on the Y axis of the UV, using Time and Sin to achieve the wave effect to both sides. I can also use a map texture to define how much the wave will affect each part of the object (darker values means less effect). A gradient works best, but using the UV can also work if you don’t need a custom map. I also use some parameters to control the waves:

  • WaveSize: how many waves will be produced, higher values make more waves
  • WaveSpeed: time multiplier for the waves, higher values make it wave faster
  • WaveAmount: how far the waves will travel, higher values make them more intense

Then I just plug it into every texture sampler offset (including the mask), so it can create consistent waves across the entire effect.


firewaves

firecirclewaves
No waves; Soft waves; Intense waves

Particle Effects Tips

When using this shader for particle effects, it’s important to keep some things in mind.

You can use Vertex Color for things like Start Color or Color Over Lifetime, as the particle system uses this input for these values. Apply it to both emission and opacity.

When spawning multiple particles, the panning values for each particle will be synchronized, causing patterns that look unnatural. You can use the particle system’s Custom Vertex Streams to add a random value to each particle’s offsets, creating a way better looking effect. This value is sent to the shader via the Vertex TexCoord property.
customvertex

fireparticles
Left: no vertex streams; Right: random vertex streams
(By the way, the effect above uses only 7 particles! Pretty good result with a very low performance impact)

Sometimes you might want to use the default synched style to create a specific effect, so this is totally optional.

fireexplosions
Left: no vertex streams; Right: random vertex streams

Closing Thoughts

With all of this put together, the final shader looks like this:


(It’s a bit messier than I’d like, but it works!)

Here’s some more examples using different textures:

SoftClouds

firetextures

That’s it! Even though is a very simple shader, I hope you enjoyed and that it can help someone make their own cool VFX! I’d also love some feedback and suggestions on how this might be improved upon, and I’ll try to answer any questions you guys might have.

Thanks for reading!

46 Likes

It really helped me, and I’m glad I saw it.
thanks.

1 Like

Great stuff! This is very well made. Now not only do we have a “Diablo 3 Technique” for Unreal 4 but for Unity as well! That said, there is one slight thing I would like to point out that I feel would +1 this. It’s all about the “Noise” Textures. This is a very beginner friendly effect, and so I’m thinking in that “What-If” context. There is a lot of weight on the Texture for this effect as presented. A Keystone, if you will. Yet you made no mention on the creation of the texture which is so important to make this effect. Photoshop? Substance Designer? When you made these textures, did you know what they would be, or were you just playing around until you got what you were looking for?

Now, if I had to guess, you made these in Photoshop with Render > Clouds as a base, and then used some combination of Min/Max, Threshold, or even some “Art” Filter on top. Then you did the work with the shader nodes as shown and bing-bang-boom; Fire! :fire: That is my guess.

With that little quibble aside, this really is great. You did a fantastic job. Thanks. :slight_smile:

1 Like

Wow, thank you for being so generous with your knowledge, Aka!

This post is really informative and well thought-out which makes it extremely useful to someone new to realtime VFX like me - I really appreciate the care and effort you put into sharing this, thank you! :smiley::+1:

1 Like

Hey @Mez , thanks for pointing that out! I really should have given some direction about the noise textures, as I’ve struggled a bit with this myself before.

Basically, I have a bunch of noise textures lying around that I have made for various effects in the past. When I make a new effect, I test out the ones I already have before making new ones, mostly to save time. In this case, the texture showcased already existed, so I didn’t create it for this specific effect.

There’s a great online texture generator that I used to generate a lot of noises: EffectTextureMaker I believe the texture featured was made using the FbmNoise2 option. Sadly most textures don’t have seamless tiling, so I edit them in Substance B2M to make them seamless.

The second texture, the caustics looking one, I think was made in Substance Designer by blending some noise nodes, but I can’t remember the exact steps right now, it’s been some time.

The third one I think is just a Photoshop Render > Clouds, like you guessed, but I don’t remember if I made any more changes.

Overall my tip is to experiment with different stuff and see what you get, you might end up discovering some cool effects you didn’t expect.

Also, @bayunhuiye and @ryvanc, thank you for your kind words! I’m really glad I’m able to help and I hope I can make more of these in the future. I’m pretty new to professional VFX myself, so I still have a lot to learn, but I’ll try to share anything that I find interesting and helpful as I grow.

Thanks!

1 Like

Great Work!

AfterEffects is a good solution for making these type of textures. It has a built in FractalNoise component and it’s very flexible.

1 Like