Godot Visual Shader: Simple Fire

Godot Visual Shader: Simple Fire

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.

Fire Shader Example

Video Version

You can watch or read. Exact same material.


Fireplace and single 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

Fragment Shader Overview

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.

Animated noise

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

Final flame colours

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 Overview

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.

Vertex positions\

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

Animated noise

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.

Compose vector

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

Mix animations

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.


And that is all for today's shader.

Fireplace in jungle
Fireplace in house
Fireplace at mountain