Fire & flames

How it works

A flame is hot gas rising. It is narrow where it starts, it flickers more the higher it goes, and its color says how hot each part is: dark red at the cooling edges, orange, then yellow and near white in the hottest region, the same order a heated piece of metal glows through. A fire shader rebuilds each of those observations with a small piece of math, and every fire effect, from a candle to a torch to a fireball, is the same three pieces arranged differently.

1. A shaped mask. A smoothstep around a distance gives the flame’s outline: a teardrop for a candle, a wide cone for a campfire, a circle for a fireball. Shaping curves (a square root, a power, one minus the height) make its profile round at the bottom and pointed at the top.
2. Rising noise. An fBm whose coordinate scrolls upward with time pushes the mask sideways and breaks it into tongues. Pushing more near the top than at the bottom keeps the base anchored and lets the tip whip around, which is what makes it read as fire rather than as a wobbling shape.
3. A hot palette. The mask and the noise together give a heat value between 0 and 1. A palette maps it to color from black through red, orange and yellow to white, so the same number drives both the shape and the color, and the colors always stay in the right order.

Over a scene

Fire is light. Drawn opaque it needs a black background, which is how the cards show it first. In a game it goes on a camera-facing quad or a particle with additive blending: the flame’s color is added to what is behind it, black adds nothing, so the quad’s edges disappear and overlapping flames brighten each other instead of covering each other. The shader stays the same; only the blend mode changes.