name: fire-smoke-skill-vfx description: Build the effects of a fire skill as one visual language in Three.js. Flames that read as fire, not as orange fog or cones: ray-marched flame volumes whose turbulence rises with buoyancy (slow at the root, accelerating and stretching as it climbs) instead of scrolling, a temperature ramp from a white-hot core a little above the fuel through yellow and orange to deep red tips, broad brighter licks inside, walls of fire broken into clumps of separate tongues of very different heights with notches between them and licks that detach and go out, a fire whirl wound in helical sheets with a waist and a blue root; charcoal smoke drawn premultiplied over the frame and lit only by the fire (cauliflower billows for a burst, a thin streaked curtain off a grass-fire front, fibrous wisps off small fires, ragged hot cracks inside a burst's smoke); embers and sparks that drift on a curl field, cool from white through orange to red and fall as ash; heat haze as refraction; firelight shared with the world; a world-space heat map that makes the ground's needles smoulder as hairlines and its pockets breathe; and gentle ink impact frames limited to three flashes a second. Use for fire or flame skills, fireballs, fire waves or breath, rings of fire, fire tornadoes or whirls, burning ground, wildfire fronts, smoke columns, embers, smouldering aftermath, "fire and smoke", "realistic fire", "flame thrower", "inferno", "burning field" or "skill effects only". Includes a reusable module and a five-beat demo on a scanned CC0 burned-ground floor with failure-mode switches.

Fire and Smoke Skill VFX

Use this for the effect half of a fire skill: what the hand holds, what it throws, what burns and what the fire leaves. Reach for a sibling instead in these cases:

• Lightning, an energy orb, black afterimage smoke and air bursts: lightning-energy-skill-vfx. This skill reuses its clock, composite, impact frames and flash limiter.
• Readable, budgeted gameplay effects in general (telegraphs, status, cleanup rules): create-game-vfx. Its readability rules still apply here.
• Scoring a skill out of 10, or polishing the caster's body and timing: game-dev-combat-skill-polish.

Source: a brief for elemental skill pages built to the Black Lightning demo's bar, with the notes its owner gave on that demo ("not as in-your-face", "more fine lines", "smooth transitions", "a more realistic floor", "no sliding textures", "more detail in the smoke"). There is no character: the flame is held by an implied hand at chest height. Then two rounds of a dream loop against GPT Image edits of the page's own frames (see references/scorecard.md).

Verified stack: Three.js r170, WebGL2, GLSL ShaderMaterials, HalfFloat render targets, a 96³ baked noise texture, and a hand-written bloom and composite. No post-processing library. The demo's floor is Poly Haven's Burned Ground 01 by Rob Tuytel (CC0), its 1k colour, normal and AO/roughness maps in demo/assets/ground/, embedded by demo/build.mjs as data URIs so the page opens from disk.

The mechanism

Fire is a field that rises, cools and lights the world; smoke is what the fire lights.

• One flame shader, three shapes. Every flame is a ray march through a signed field: a profile (a plume from a source disc, a wall along an arc, a teardrop ball) minus the distance from its axis, pushed in and out by noise. Density is a narrow band of that field, so tongues have crisp edges and islands above the tips are detached licks.
• Buoyancy, not scrolling. The noise's height coordinate is y0·ln(1 + h/y0) minus time, so features leave the root slowly and accelerate and stretch as they climb, and a slow warp drifting through the noise deforms them on the way. A scrolled texture (the Scrolled switch) slides over the flame.
• Temperature drives everything. One temperature per sample picks the colour from a ramp, decides what hides the background (only hot gas does) and where soot absorbs (only a burst's cooling gas). The hottest gas along a ray shows through the cooler skin.
• Detail is band-limited to the buffer. Flames march into their own reduced-resolution target. Every octave fades out before it gets finer than a few pixels of that target at the sample's distance, and the target comes up with a smooth B-spline. Detail the buffer cannot hold aliases into a mosaic.
• One light set for everything. Eight firelights (one for flashes, seven claimed by flames and stage lights) light the ground, the smoke and the haze. They swell fast and settle slowly, so firelight breathes and never strobes.
• One clock and one composite, as in lightning-energy-skill-vfx: holds freeze every layer at once, heat haze and pressure fronts write into one half-resolution distortion buffer, and the impact frame draws after tone mapping.

Reuse the working effect

Copy assets/fire-fx.mjs. You pass in your own THREE, and the module does not import a second copy. The demo runs this same module, inlined by demo/build.mjs because a page opened from disk cannot import modules.

import { createFireFX, FIRE_LIGHTS_GLSL, GROUND_HEAT_GLSL, TNOISE_GLSL } from './fire-fx.mjs';

const fx = createFireFX(THREE, { renderer, scene, camera, seed: 23 });   // bakes the 96³ noise texture
fx.setSize(width * dpr, height * dpr, dpr);       // drawing-buffer pixels, again on resize
fx.warmup();                                      // compile every effect before the first hit
fx.options.shake = 0.6; fx.options.fisheye = 0.65;   // felt, not thrown at the viewer

// A flame held in the hand: a teardrop that grows in.
const held = fx.flame({ mode: 'ball', pos: hand, radius: 0.11, height: 0.44, temp: 1.06, light: 3.2,
  embers: 0.9, smoke: 0.9, smokeKind: 'wisp', swirl: 3.5, spin: 2.2, ragged: 0.45 });

// A wall of fire rolling out: a fan of arc sectors you move with set().
const front = fx.flameArc({ center: origin, R: 0.7, w: 0.32, height: 0.6, a0: -0.6, a1: 0.6, segments: 8,
  lights: 2, lean: { x: 0.3, y: 0.55 }, light: 4.6, smoke: 2.2, embers: 2.2, heat: 0.6, hvar: 0.5, wobble: 0.05 });

// Ground and props: add FIRE_LIGHTS_GLSL and GROUND_HEAT_GLSL (and TNOISE_GLSL for tn()), spread
// fx.lightUniforms and fx.heatUniforms into their uniforms, add fireLight(P, N, V, albedo, rough) to
// the colour, and let groundHeat(p.xz) (heat in .x, burn in .y) light the ground's own cracks.

function frame(realDt) {
  const dt = fx.update(realDt);                   // sim seconds: 0 during a hold, scaled by ramps
  front.set({ R: front.R + 2.4 * dt });           // move flames on the effect clock
  fx.render();                                    // heat map, scene, flames, sparks, haze, bloom, composite
}

// A heavy hit:
fx.flash(at, 30, 3.2, 1);                         // slot 0: a hot flash that decays at 3.2/s
fx.ring(groundSpot, up, { radius: 7, thick: 0.14, life: 0.55, amp: 0.03 });   // refraction only
fx.sparks(at, { count: 46, speed: [4, 11], life: [0.5, 1.3], flake: 0.25 });
fx.impact({ hold: 0.08, frame: 'center', shake: 0.016, fisheye: 0.14, at, radius: 0.36 });

Other calls:

• fx.flame(opts) returns a flame you change every frame (radius, height, pos, intensity, temp, light, smoke, embers, ...) and end with kill(seconds). Options:
  • shape: mode ('plume', 'arc', 'ball'), pos, radius, height, lean {x, y}, ragged (tongue depth, default 0.24 plume / 0.4 arc / 0.34 ball), stretch (how tall the features are, default 1.25), scale (noise feature size in metres), swirl and spin (a fire whirl: helical sheets, funnel, S-bend), wander (the axis drifts), billow (a burst: rounded lobes, cooling unevenly into hot pockets), wobble and hvar (arcs: radius lobes and height variation);
  • colour: intensity, temp (1 = nominal; above 1.05 the light runs hotter), blue (a blue root band), soot (absorbs only where a burst cools);
  • output: light (claims a firelight slot), smoke, smokeKind ('billow' or 'wisp'), smokeSize, smokeLife, embers, heat (into the heat map), haze;
  • life: fadeIn (seconds), steps (pin the march steps), seed (pin the noise; the first 121 flames take the demo's recorded seeds unless you pass one).
• fx.flameArc({ center, R, w, height, a0, a1, segments, lights, ...flame options }) returns { segs, set(props), kill(s), alive }. a1 − a0 ≥ 2π makes a closed ring; a fan's ends taper.
• fx.spawnSmoke(pos, vel, opts): type (0 billow, 1 ash flake, 2 wisp, 3 curtain), size, grow, life, opacity, glow, aspect, fibre (4.5 or more marks a burst's hot-pocket sprite), buoy, drag, curl, color.
• fx.sparks(pos, opts) and fx.spawnSpark(pos, vel, opts): count, dir, spread, speed, life, size, heat, cool, gravity, drag, buoy, curl, flake (the chance a cooled spark falls as ash).
• fx.addHeat(pos, radius, amount, { burn, tau, shape, R, w, a0, a1 }): a lasting heat patch (disc, or a ring band for a front) that cools as e^(−t/τ) and leaves a burn mark.
• fx.flash(pos, energy, decay, hot), fx.glint(pos, { size, life, intensity }), fx.ring(center, normal, { radius, thick, life, delay, amp }).
• fx.impact({ hold, frame: 'center' | 'full' | 'none', flash, shake, shakeMode: 'axial' | 'radial', fisheye, at, radius }).
• fx.ramp(scale, seconds), fx.repeat(ticks, fn), fx.curlAt(x, y, z, t, out), fx.stats(), fx.debug (noFlames, noSmoke, noHaze, noSparks).
• fx.options: noise ('advected' | 'scrolled'), smoke ('over' | 'additive'), flashes ('full' | 'safe'), shake, fisheye, tickHz 30, lightGain 2.4, flameScale (the flame layer's share of the buffer, set per shot) and flameBudget 260 (march work above this lowers the scale, never below 0.5).

The layers, with the numbers that shipped

| layer | numbers | | --- | --- | | Flame march | A box per flame (a bent slab for arc sectors, a tube otherwise) drawn back-face with no depth test into the flame target. Steps min(32 arcs / 38 others, max(14, 12 + px/12)), px the flame's size on screen; the start is dithered per pixel. On entering the flame, 4 bisection steps find the surface, so every pixel starts on it (a dithered start came out as grain). Light saturates within a third of the radius: σ = 6/R, edge band 0.07R + 3 mm. Cheap bounds first: a cylinder clip, a skip-ahead outside the reach, a top cut at 1.75H (2.6H for arcs), and the ground. Every bound fades the gas before it cuts it (r/reach 0.8–1, h/top 0.82–1). Coverage goes into alpha as 0.85 (plumes) or 0.4 (arcs) × the share of hot gas (T 0.35–0.65), so a flame in front of another layers instead of adding a seam. | | Buoyancy and turbulence | Height coordinate y0·ln(1 + h/y0) with y0 = 0.45H + 3 cm, rising at 0.95 (the Scrolled switch uses h at 1.7). A low-frequency read at 0.34× the noise frequency sways the whole flame by R(0.08 + 0.85h/H) and warps the noise by 0.9. Octaves are staged: the first decides whether a tongue can reach the sample at all, a ridged second octave 0.42 − 1.3|n₂| makes tongues end in points, a third adds fine licks toward the tips. Noise frequency 1/max(1.2 cm, scale or 0.45R plumes / 0.8R arcs). | | Licks and sheets | Broad brighter licks: noise at (1.6, 0.55, 1.6) × the frequency, 1 − smoothstep(0, 0.45, |n|), scale density by mix(1, 0.45 + 1.1·lick, 0.55) (0.3 in a ball, 0.8 in a whirl) and temperature by 0.9 + 0.2·lick. Fire whirl: sheets 1 − smoothstep(0.12, 0.62, |sin(2θ + 1.1h)|) with θ warped by the first octave, a funnel profile R(0.42 + 1.25y)(1 − 0.28e^(−((y − 0.26)/0.1)²)) (the waist at a quarter of the height), an S-bend of 0.55R, and temperature falling with 0.62 × the height so it burns hot most of the way up. Plumes split into 6 tongues round the source, each 0.