Toon Fire Write-up

If you haven't yet watched the video detailing the creation of this shader, you can watch it right here: https://www.patreon.com/posts/24140440 

Source files for source file patreons are available here: https://www.patreon.com/posts/toon-fire-files-21988132

This effect is pretty simple, created mostly by panning noise against itself, confining that to a flame shape, and then using step cutoffs to define where the inner, outer and transparent areas of the flame are.

I've used this swiss cheese noise texture, but you can use different noises for different flames.

Panning two copies of the noise upwards, at different speeds, and multiplied together, gives this main animated texture.

Then we simply blend that with a mask texture, something to define the overall shape of the fire. Here I've added it in first, to boost the fire towards the middle, and then afterwards multiplied it on top to contain the animated texture into the classic tapered flame shape

You can take this greyscale animated noise, and pipe it into the U channel of a the texCoords of a (clamped) gradient texture, which will map the horizontal colour to the brightness of the noise. This gives you a lot of control over the interior colours.

But personally I prefer to use a step cutoff so that I can adjust the shape of the flame in the editor more easily. A step cutoff makes any pixel above a set value into pure white, and any pixel below that value into pure black, so it's perfect for making hard edges for a cartoony look. The first step cutoff goes into the opacity clip input. The second step cutoff will break the remaining flame into two sections.

We can take these two sections, one minus the black part, and multiply each of them by their own colour, and then add them back together.

For a bit of extra colour control, I like to split the outer colour into a blend of 2 colours via a vertical gradient, using the V texture coordinate. You can use a smooth step to define the blend between these colours.

That's the basics of a toon flame visuals, but another nice addition I like is to also multiply this by the soft greyscale version of the flame, just to add a bit of shading into the mix. You can use a slider to define how much shading to add depending on the style you're going for. You'll have to adjust a final brightness multiplier at the end to account for this extra shading though.

Another optional addition I like to do for this shader, is to multiply in some depth fade, in order to blend the flame with any nearby geometry, such as the ground or campfire model. If you're using forward rendering you need to have a shadow casting light active in order to get a Depth pass on the camera. If you don't, then you can force it to render depth by having this script on the camera, where you manually set the cameras depthTextureMode to DepthTextureMode.Depth (see attached script, which you can toggle on and off through the right click context menu).

Rather than using additive blending on the shader, I prefer to use Premultiplied blending, and pipe the greyscale into the Opacity input. With premultiplied blending, white pixels in the opacity will be more opaque, whereas darker pixels will blend more additively. I think. That's what it looks like to me anyway.

Now one last cool tweak to this effect is to make it a camera facing billboard, and also to push the quad towards the camera slightly, this will give the flame a bit more volume, so when you rotate around it, it overlaps whatever is on fire more.

Here's what it looks like when it's pushed forward slightly, when combined with the depth fade, creates a nice coverage of the campfire geometry.

I hope you go something out of this toon shader write up. Let me know if you have any questions in the comments or in the discord. Thanks!

P.S. The sparks/embers are a separate particle system, using the noise module to create the swirly motion. Here are the relevant settings for the particles to get that effect.