GLSL shader example
Fire
A procedural fire shader: rising fBm noise shaped into a flame and mapped to a black-red-yellow-white color ramp.
Live example
Edit the code and the preview updates as you type.
How it works
Fire has three ingredients here: a shape, some turbulence, and a color ramp.
Shape. 1.0 - uv.y * 1.1 - abs(x) * 1.8 is a triangle-like gradient: 100% at the bottom center, falling off toward the top and toward the sides. On its own it is a smooth, static cone.
Turbulence. fbm(...) adds layered noise to that cone. Subtracting u_time * 1.5 from the y coordinate scrolls the noise upward, so tongues of flame break off and rise. (n - 0.5) * 0.9 centers the noise around zero, so it pushes the edge both in and out.
Color. heat is a single 0..1 value. The first term turns it into red and orange; pow(heat, 4.0) is near zero except at the hottest spots, so yellow-white only appears in the core. Real flames work the same way: the hotter the gas, the closer to white it glows.
Try changing it
| Change | Result |
|---|---|
u_time * 1.5 to u_time * 4.0 | A fierce, fast-burning fire |
abs(x) * 1.8 to abs(x) * 4.0 | A thin candle flame |
* 0.9 to * 1.6 | Wilder, more ragged edges |
vec3(1.5, 0.5, 0.1) to vec3(0.1, 0.5, 1.5) | Blue gas flame |