Godot Visual Shader: Simple Fire

GodotEngine Mar 4, 2019

Fire is very complicated and can be made by many techniques. I usually use particles but there is even simpler way using visual shader. For some small detail in the background it's perfect. Also it's super fast.

It's the same idea I took with flag shader but enhanced a little bit to looks more like a fire.

Video Version

You can watch or read. Exact same material.

Flame

This shader is for one small plain that will represent a flame. Take few of them and put with different Y rotation. I've added few stones also as I don't have any wood models at the moment.

Assets List

For this you'll need:

noise texture
gradient black-white-gray for movement
gradient texture white-yellow-red-brown, transparent at the end for flame colours

Fragment Shader

The basic idea is to make this colours of a flame and mix it with animated noise so it will look like alive.

UV will be used for the nose and coloured gradient.

To animate the noise first the UV is reduced to 5% X and 10% Y. Then I decompose it to just change the X value. Time is slowed down 50% and then subtracted from the position. Finally vector is created and connected to the noise uv.

This makes the texture "move" in the same direction as the gradient will be (left to right).

Lastly colour operator mixes both colourful gradient and the noise by overlay.

Metallic is set to 0 and roughness to 1.

Vertex Shader

Vertex shader is kinda similar. It uses animated noise to move flame left or right. But it uses gradient mask to determine scale of the movement. No movement at the bottom (black), then rapid movement (white) and slowed down (grey) at the top.

Each vertex is decomposed. Two versions of those positions will be used. One for the original position (no movement) and second for distorted positions (max movement).

Distortion or animation is made by adding time to the Y position. Then together with X it's connected to the noise uv. Noise gives values from 0 to 1 and we want to distort flame also in opposite direction. For this .5 is subtracted making final positions from -.5 to .5.

Both values are then added to the positions X and Z. The Y is just copied (connected without any changes).

Lastly both positions (original and distorted) are mixed using gradient mask. When it's black (bottom of a flame) original, not touched position is selected. Closer to the white the more distorted positions gets selected.

Vertex position is set.