Top FIRE Shader Graphs for Unity - 2D Fire Shader Graphs

Three different ways to make fire shader graphs in Unity.

I wanted to make a fire shader graph video, and couldn't pick my favorite technique. So I went with my top three. That has made it a much longer video than normal, but it's still packed full of great info.

The three fire shaders I'll show are: sprite based, cartoony, and realistic.

As (almost) always, I have a written version of this tutorial on my site. This time the written version is mostly focused being a reference to the video, rather than being a stand alone tutorial. It has plenty of high res screenshots of the shader graphs so can look at detail.

Assets used

**** Update for Shader Graph 10.x
This video was made with Shader Graph 8.2
If you are using Shader Graph 10.x there are a couple key differences:

The create shader options have moved within a sub-menu called "Universal Render Pipeline, and some are renamed. So "Create--Shader--PBR graph" becomes "Create--Shader--Universal Render Pipeline--Lit Shader Graph"
The per-input settings that were in the blackboard are now in the "Graph Inspector" within the "Node Settings". You must have the input selected to see its settings in that window.
Some other settings that were on-node are now also in that Graph Inspector, though you can generally ignore these.
If you want to generate a code shader from the graph, you do so on the graph asset inspector (not on the master node as you did in 8.2). Now select the graph asset, and hit "View Generated Shader" button in its inspector.
****

0:00 Intro
2:09 Sprite Fire
5:20 S. Haze
8:07 S. Layering
12:27 S. Time
15:10 Cartoon Fire
18:20 C. Color
20:46 C. Shape
23:50 C. Sideways
28:05 Realistic Fire
31:13 R. Shape
35:44 Fire in 3D

In the realistic technique, I start with the cartoon fire shader graph. Then I brighten the color by chaning it to HDR, and adjust the shape. Included in shape adjustment is changing one of the Voronoi nodes to be Gradient Noise, and also feeding time into the Voronoi Angle Offset. Both of which I could have done on the cartoon shader effect if that sort of shape was desired.

Lastly I show how to add 2D fire to a 3D scene in an elegant way.

And don't forget to subscribe!!!

[GameDevBill]

This is my first go at a longer video. Let me know what you think! Do you prefer the 10-minute posts? Longer ones like this? Or do you just prefer "make it as long as it needs to be for the content" (which is basically my current approach).

[vostrogames]

Bill, thank you for the video, it's really helpful!

[GameDevBill]

Clarification to a question someone asked me on Reddit... the realistic fire uses the cartoony graph that I had just _before_ I started making it go sideways. Basically the cartoon shader as of 23:49 (after that I start adding the sideways movement).
I did this because the realistic fire didn't feel like it needed the sideways movement.

[charlessnix]

very cool! well laid out video, saved it.

[whatamiwitnessing]

I myself would love a series where you try to make something bringing multiple things in to practice. I normally learn more from seeing how things are applied to a actual project and do it along with the video.

[HaniSharif]

Which one do u suggest that I use for mobile platforms. I need one for Oculus quest 2. The one that is not costly on GPU/Cpu