Separate flame from heat
Treat visible flame, emissive color, and screen distortion as separate layers. If all three are driven by the same noisy mask, the effect becomes muddy fast.
01
Visual Target
What we are building: a flame card or hot surface material with a clear bright core,
soft outer alpha, upward motion, and a separate heat wobble that can be reduced or disabled.
Image placeholder: fire and heat hero
Future image should show a stylized flame sheet with warm core, orange outer body, soft alpha, and subtle heat shimmer above it.
02
Use Cases
03
Mental Model
Flame has direction
Even stylized fire needs upward rhythm. The large shapes should climb. Smaller noise can twist or flicker, but if everything moves randomly, the viewer reads it as TV static.
Distortion is seasoning
Heat wobble should be visible only when it helps the shot. Too much distortion makes silhouettes behind the fire unreadable and can feel expensive even when it is not.
04
Graph Steps
Vertical UVs
Large flame mask
Detail noise
Color ramp
Soft alpha
Heat offset
1. Build the flame silhouette
Use a vertical gradient multiplied by broad noise. The bottom should stay stronger; the top should break apart. This gives the flame a clear root and a softer tip.
2. Add moving detail
Pan one broad noise slowly upward and one smaller noise slightly sideways. The cross-motion makes the flame feel alive without losing direction.
3. Shape alpha separately from color
The alpha edge should be soft enough to layer. The emissive core can stay sharp. If both use the exact same mask, the fire often looks like a sticker.
4. Remap heat into color
Use a ramp from dark red to orange to yellow-white. Keep the hottest value small and centered so bloom does not flatten the entire card.
5. Add heat distortion as an optional output
Distortion can use the same motion family but a lower contrast mask. Give it a separate intensity control and a cheap off switch.
05
Artist Controls
06
HLSL Sketch
float2 uvA = uv + float2(0.0, -time * flowSpeed);
float2 uvB = uv * detailTiling + float2(time * sideDrift, -time * detailSpeed);
float vertical = saturate(1.0 - uv.y);
float broad = Texture2DSample(noiseTex, noiseTexSampler, uvA).r;
float detail = Texture2DSample(noiseTex, noiseTexSampler, uvB).g;
float flameMask = saturate(vertical * broad + detail * flickerAmount);
float alpha = smoothstep(alphaMin, alphaMax, flameMask);
float heat = smoothstep(coreMin, coreMax, flameMask);
float3 color = lerp(coolColor, hotColor, heat);
float3 emissive = color * lerp(edgeEmission, coreEmission, heat);
float2 distortionOffset = (detail - 0.5) * distortionStrength * alpha;
return float4(emissive, alpha);07
Senior Notes
Use material LODs for repeated fire
A hero campfire can afford more layers than twenty background torches. Keep a low-cost instance with fewer samples and no distortion.
Watch overdraw before shader math
Fire often gets expensive because of large translucent cards stacked in the same screen area. Profile overdraw before shaving tiny math nodes.
Bloom changes color perception
Tune the ramp in the final post-process setup. A beautiful orange ramp can become flat yellow-white when bloom and exposure are active.
08
Common Mistakes
- Using the same mask for alpha, emission, and distortion with no separate controls.
- Moving every noise layer at the same speed, which makes the fire feel like a scrolling texture.
- Making the whole card bright instead of preserving a small hot core.
- Leaving distortion on for every instance, even when it is too subtle to notice.