A simple and realistic fire shader

Here’s a relatively simple yet realistic fire shader I made. I ended up making this after trying to find another fire shader to slot into a sketch but wasn’t satisfied with what was out there.

The code ended up being deceptively simple and relies on two techniques: fractional brownian motion and domain distortion. I additionally used gradient noise in fractional brownian motion instead of simplex noise. For the fractional brownian noise implementation I used Lygia.

Here’s the code:

precision mediump float;

#define FBM_OCTAVES 5
#define FBM_NOISE_FNC(UV) gnoise(UV)

#include "lygia/generative/fbm.glsl"

uniform vec2 u_resolution;
uniform float u_time;

vec3 fire(vec2 _st, float _time) {
  float time = _time * 0.5;
  vec3 p = vec3(_st.x * 2., _st.y * 1. - _time * 2., time);

  // Domain distortion
  vec3 q = vec3( fbm( p + vec3(0.0,0.0, time)),
                fbm( p + vec3(0.3, 1.3, time) ), time );
  return fbm(p + q * 0.5) * 10.0 * vec3(0.9765, 0.2784, 0.0);
}

void main() {
  vec2 st = gl_FragCoord.xy / u_resolution.xy;
  vec3 color = fire(st, u_time);
  gl_FragColor = vec4(color, 1.0);
}