name: ice-frost-skill-vfx description: Build the effects of an ice and frost skill as one visual language in Three.js. Frost that grows like real frost, not a painted fern: a dendritic tree grown on the CPU from a seed point, stems racing outward with barbs and sub-barbs that compete for space in one time-ordered queue, side branches leaned toward their tips, baked into a distance field so the shader draws hairline feathers growing out from the seed with a bright tip, rime, crystal glints and a contact shadow. Faceted ice spikes built from half-spaces and ray-traced against their own planes (Snell, Fresnel, total internal reflection, Beer-Lambert blue, trapped bubbles, a fracture network, frosted edges) that erupt along the frost line, crack along visible planes and shatter into convex pieces that tumble, land on a face and rest, with snow lumps and ice chips settled into the crust. A low freezing mist marched as wind-stretched banks that churn in place and part around the ice, a blizzard column of powder on helical strands with a fibrous veil, glinting diamond dust, and a scanned snow floor with dunes, broken crust, a raking moon with self-shadow and two populations of glints. Use for ice or frost skills, frost novas, ice spikes or walls, glacial eruptions, shattering ice, blizzards, snow devils, freezing mist, frozen ground, "ice and frost", "frost creep", "ice shards", "realistic ice" or "skill effects only". Includes two reusable modules and a five-beat demo on a scanned CC0 snow floor with a failure-mode switch.

Ice and Frost Skill VFX

Use this for the effect half of an ice or frost skill: what forms in the hand, what spreads across the ground, what erupts, what the wind does and what breaks. 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.
• Flames, smoke, embers and burning ground: fire-smoke-skill-vfx.
• 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 the user 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 shadows"). There is no character: the frost blooms in an implied hand at chest height. Then eight self-critique rounds, two rounds of review on the blizzard, and a three-round dream loop against GPT Image edits of the page's own frames (see references/scorecard.md).

Verified stack: Three.js r170, WebGL2, GLSL ShaderMaterials (one in GLSL3 for a two-target bake), HalfFloat render targets with a depth texture, a 96³ baked noise texture, and a hand-written bloom, composite and FXAA. No post-processing library. The demo's floor is Poly Haven's Snow 02 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

Frost is grown once and drawn by its arrival time; ice is traced against its own planes; the air is marched where the cold pools.

• Grow the frost, then let the shader reveal it. growFrost runs a small diffusion-limited growth on the CPU in about 50 ms: stems, barbs and sub-barbs advance as events in one time-ordered heap, so whichever tip reaches a patch first claims it and later tips stop against it. Every segment carries the time the front reached it. The tree is baked once into a 2048-wide HalfFloat distance field, and the ground shader draws hairlines from it by comparing that arrival time with the frost clock. Nothing is re-rolled or scrolled: the pattern grows.
• Ice is a convex hull you can trace exactly. Each spike is a set of planes (sides, tip facets, chips, a base) clipped from a cube. The fragment shader refracts into the hull, finds the exit plane in closed form, reflects internally while total internal reflection holds, and samples a mip-mapped copy of the world pass for what is seen through it. Cracks are planes too: the spike shatters along exactly the planes the viewer watched crack.
• Pieces are rigid bodies with one contact. Every fragment and chunk keeps its hull vertices, so the lowest corner is known each substep. An impulse with friction lands it, and when it slows it tips onto the face nearest the snow, so nothing ends balanced on a point, floating or sunk.
• Mist is a ray march in banks, not cards. Each bank is a wind-stretched ellipsoid marched over its own span at a third of the resolution, with domain-warped fibres advected in two crossfaded phases so it churns in place. A mist-only debug view (fx.debug = 'mist') is how it was calibrated.
• One wind field moves everything. A column vortex (foot inflow, core lift, top outflow, an S-shaped axis) drives the powder, the flakes, the hairline streamers and the mist's rotation.
• One clock and one composite, as in lightning-energy-skill-vfx: holds freeze every layer, a time ramp slows the crack, refraction rings go into a half-resolution distortion buffer, bloom has a high threshold, and the impact frame draws after tone mapping. FXAA runs only on pixels the ice pass marks, because MSAA on a HalfFloat target resolves to garbage.

Reuse the working effect

Copy assets/frost-energy.mjs and assets/frost-growth.mjs side by side (frost-energy imports ./frost-growth.mjs). You pass in your own THREE, and neither module imports a second copy. The demo runs these same modules, inlined by demo/build.mjs because a page opened from disk cannot import modules.

import { createFrostEnergy, LIGHTS_GLSL, FROST_GLSL, TNOISE_GLSL, HASH_GLSL, LAYERS } from './frost-energy.mjs';

const fx = createFrostEnergy(THREE, { renderer, scene, camera, seed: 11 });   // bakes the 96³ noise
fx.setSize(width * dpr, height * dpr, dpr);       // drawing-buffer pixels, again on resize
fx.options.shake = 0.6; fx.options.fisheye = 0.65;   // felt, not thrown at the viewer

// Grow the frost once: a seed point, a forward direction, a reach and the ground area it may use.
const F = fx.growFrostField({ origin: new THREE.Vector3(1.05, 0, -0.08), dir: new THREE.Vector3(1, 0, 0),
  radius: 5.6, area: [-3.0, -4.8, 7.6, 4.8], seed: 7 });
fx.frost.t = 0;                                    // start the growth front; advance it on the effect clock

// Spikes along the frost's main stem, then the obstacle map the mist and snow read.
const s = fx.spineAt(2.35);                        // { x, z, t, dir } 2.35 m along the spine
const spike = fx.createSpike({ base: new THREE.Vector3(s.x, 0, s.z), axis: new THREE.Vector3(0.2, 1, 0).normalize(),
  height: 1.1, radius: 0.12, seed: 3, erupt: 0.7, rise: 0.27 });
fx.buildObstacles();
fx.state.spikeT = 0;                               // the eruption clock; each spike rises when it passes `erupt`

// The ground (or any prop): add TNOISE_GLSL + HASH_GLSL + LIGHTS_GLSL + FROST_GLSL, spread
// fx.lightUniforms, fx.frost.uniforms and fx.obst.uniforms into its uniforms, light it with
// energyLight(P, N, V, albedo, rough) and draw frostAt(p.xz, metresPerPixel) on top. Put it on LAYERS.world.

function frame(realDt) {
  const dt = fx.update(realDt);                   // sim seconds: 0 during a hold, scaled by ramps
  fx.frost.t += dt; fx.state.spikeT += dt;
  fx.render();                                    // world, ice, mist, column, light effects, refraction, post
}

// Crack, then shatter along the same planes:
for (let k = 0; k < 4; k++) fx.crackSpike(spike, k, 0.12 + 0.14 * k, 0.4);
// ...1.4 s later:
fx.shatterSpike(spike, spike.base, 1);
fx.impact({ hold: 0.1, frame: 'full', shake: 0.02, at: spike.base });

Other calls:

• growFrost(opts) (in frost-growth.mjs) returns { seg, count, spine, paths, tips, duration, branches }: seg is 12 floats a segment (x0, z0, x1, z1, t0, t1, half-width 0 and 1, level, rand, arc length 0 and 1); spine and paths are [x, z, t] points of the forward stem and of each seed stem (for lights that ride the front); tips are branch ends for glints. Options: seed, origin, dir, radius, area, speed (2.6 m/s), stems (11), density, symmetric (a stellar frost of n stems), fan, maxSegments.
• fx.growFrostField(opts) runs growFrost, bakes the distance field (2048 wide by default, res), builds the tip stars and the hub crystal clumps, and fills fx.frost.uniforms. fx.frost.t, .fade, .glow drive it. fx.stemTip(path, t, out) and fx.spineAt(s) read the grown tree.
• fx.createSpike({ base, axis, height, radius, seed, erupt, rise }) returns a spike; fx.crackSpike(S, k, delay, duration) starts crack k (0–2 across the shaft, 3 down its length); fx.shatterSpike(S, center, strength); fx.resetIce(keepFrags), fx.clearFrags(); fx.buildObstacles() after placing spikes.
• fx.spawnChunks(pos, { count, speed, size, chips, dir, life, glow }): snow lumps, or translucent ice chips with chips: true.
• fx.spawnMote(kind, pos, vel, opts): kind 0 snowflake, 1 diamond dust (a tumbling facet that glints), 2 cold spark, 3 chipped flake, 4 long straight streak; life, size, gravity, drag, wind, bright, column (fades once it leaves the vortex body), soft (never under 2.2 px).
• fx.spawnWisp(type, pos, vel, opts): type 0 vapour, 1 powder, 2 ground mist; size, grow, life, opacity, drag, buoy, gravity, wind, stretch (aligns to its screen motion).
• fx.spawnStreamer(pos, { life, width, opacity }): a hairline ribbon carried by the wind.
• fx.setBanks([{ id, c, ra, rc, hb, ang, dens }]): up to 8 mist banks (centre, half-length along the wind, half-width, height, wind angle, density); banks not in the list ease out, new ones ease in at 1.1/s.
• fx.wind.vortex (on, center, radius, height, swirl, inflow, lift, outflow, sDir, sAmp, veil, phase), fx.windAt(x, y, z, out), fx.vortexAxis(y, out), fx.coreAt(y).
• fx.mist (amount, height, origin, flowSpeed), fx.bloom (the hand's frost flower: group, t, fade), fx.setLight(i, pos, energy, { rate, color, snap }), fx.flashLight(i, pos, energy, decay, color), fx.lightAt(x, y, z, out).
• fx.ring(center, normal, { radius, thick, life, delay, amp }) (refraction only), fx.impact({ hold, frame: 'center' | 'full' | 'none', flash, shake, shakeMode, fisheye, at }), fx.ramp(scale, seconds).
• fx.options: flashes ('full' | 'safe'), shake, fisheye, ice ('traced' | 'flat', the demo's Shaded failure). fx.debug = 'mist' renders the mist alone over black. fx.stats().

The layers, with the numbers that shipped

| layer | numbers | | --- | --- | | Frost growth | 11 seed stems (the forward spine plus 10 at ±0.42–3.14 rad, the back ones 0.42–0.7 × as long), 2.6 m/s slowing to 0.7× at the edge, spine 1.1×. Per level: step 24 / 14 / 8 mm, clearance 55 / 10.5 / 6.2 mm, half-width 1.6→0.9 / 1.1→0.5 / 0.5→0.28 mm. Barbs every 18–30 mm on stems (55% paired), sub-barbs every 9–16 mm on barbs, at 0.98–1.12 rad (ice's 60°); barbs 0.25–1.2 × a per-stem 0.16–0.3 m, sub-barbs 12–42 mm. Stems fork every 0.28–0.65 m (p 0.8 inside 88% of the reach) at 0.45–0.8 rad; 5.5% of barbs (2% on the spine) run on as new feathers. A tip dies on its maximum length, the area edge, or a point of another branch within the clearance (a branch leaving its parent ignores the parent). Then the side branches lean to the tip: each is rotated about its own root by −0.36 rad (barbs) or −0.28 rad (sub-barbs) toward its stem's tip and sh