name: lightning-energy-skill-vfx description: Build the effects of a close-combat energy skill as one visual language in Three.js. Lightning that reads as lightning, dynamic but never in your face: trees of strips (trunk, forks of forks, hair-fine branchlets) with a fine white core in a violet-blue glow, each channel reaching out as a stepped leader, flaring as it connects, holding its shape and fading through an afterglow, one discharge at a time; a storm-cloud orb (a lit billow surface that churns in place, 10-15 plasma-globe arcs from a small white core to its inner wall, crawlers on the rim, a hairline fresnel); ground strikes that flash when the leader arrives, crawl along the stone's own cracks and reflect in wet stone (the demo's floor is a scanned CC0 texture); a torn black shadow with dry-brush edges that hangs off the orb and streams behind it, air bursts felt as refraction, orange sparks, fractured rocks that land or float in a storm domain, and impact frames that hold, invert in two-tone ink with tapered speed lines, shake and bend the lens, limited to three flashes a second. Use for anime or dark-fantasy skill effects, lightning or thunder fists, plasma or energy balls, charge-ups, dashes with shadow trails, ground strikes, storm or domain rings, ultimates, hit-stop, impact frames, negative flashes, screen shake, "black lightning", "thunderstorm fist", "realistic lightning", "afterimage" or "skill effects only". Includes a reusable module and a five-beat demo with failure-mode switches.

Lightning Energy Skill VFX

Use this for the effect half of a skill: what the fist throws, what the air does, what the hit leaves. Reach for a sibling instead in these cases:

• 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 and game-dev-combat-animation.

Source: a 30-second skill-showcase brief for a dark-fantasy ability user. White-blue lightning, a semi-transparent thunderstorm orb ahead of the fist, black smoke afterimages like a shattered cloak, air bursts, orange sparks and impact frames. Only the effect language is kept here. The character, story and shot list are left out.

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 Dry 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 still opens from disk.

The mechanism

One effect clock, one composite, and a shadow that belongs to the orb.

• One clock. Lightning re-rolls on it, a hit freezes it (a hold), and a time ramp slows it. A 0.1 s hold therefore stops sparks, smoke, rings and lightning together.
• One composite. Every layer that bends the air writes a signed screen offset into one shared distortion buffer. The composite reads colour through that offset, adds bloom and tone maps once. Only then does it draw the impact frame on top, so a negative flash inverts the finished image rather than one layer.
• The orb carries its own shadow. A black teardrop is drawn behind the orb, and ribbons and billows leave from the orb's back. Wherever the fist goes, the black follows it; nothing is emitted from a body you cannot see.
• Lightning is a tree of strips in one point ring. A bolt is a trunk, its forks, their forks and twigs. All their points live in one ring buffer and the GPU buffers are sized by a point budget, so thousands of twigs fit. Points of bolts anchored to the orb are stored relative to it and the anchor is a uniform, so the buffers change only when the lightning re-rolls (30 Hz), not every frame the orb moves.
• Lightning has a life, drawn in the shader. Every vertex carries when the leader reaches it, so a channel grows out from its origin (forks from their junctions) in 30–90 ms on the lightning's own clock, flares as the return stroke connects, holds its shape for a few ticks, and fades through an afterglow. The ground flashes when the leader arrives.

Reuse the working effect

Copy assets/storm-energy.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 { createStormEnergy, ENERGY_LIGHTS_GLSL, GROUND_HEAT_GLSL } from './storm-energy.mjs';

const fx = createStormEnergy(THREE, { renderer, scene, camera });   // bakes the noise texture
fx.setSize(width * dpr, height * dpr, dpr);       // drawing-buffer pixels, again on resize
fx.warmup();                                      // compile every effect before the first hit

const orb = fx.createOrb({ radius: 0.4 });        // shadow: true by default (teardrop, ribbons, billows, motes)
orb.reach = [shoulder, elbow, head];              // Vector3s the arcs can leap back to
orb.strikeAt = groundSpot;                        // optional: aim its ground strikes; orb.strikes = false stops them

// Optional: let ground arcs follow your ground's cracks. Return [x,y,z,...] walking from (x, z).
fx.options.crackPath = (x, z, heading, length) => traceAlongCracks(x, z, heading, length);

// Ground and props: add ENERGY_LIGHTS_GLSL (+ GROUND_HEAT_GLSL, WET_GLSL), spread fx.lightUniforms
// (+ fx.heatUniforms) into their uniforms, and add energyLight(...) and
// uGlow * groundHeat(p.xz) * yourCrackMask to their colour. Use wetness(p.xz) for the ground's
// roughness: the bolts' reflections are masked by the same function.

function frame(realDt) {
  const dt = fx.update(realDt);                   // sim seconds: 0 during a hold, scaled by ramps
  // move the fist with dt, then:
  orb.position.copy(fist).addScaledVector(aim, orb.currentRadius * 0.92); orb.axis.copy(aim);
  fx.render();                                    // the orb's shadow follows from its motion here
}

// A heavy hit:
fx.blast(orb.position, aim, { length: 4.6, radius: 1.5 });   // a few divergent bolts + a refraction funnel
fx.burst(orb.position, { strength: 0.9 });        // air burst: felt as refraction
fx.burst(groundUnderFist, { strength: 0.6 });     // ground burst: ring, dust, chips, spark fountain, heat
fx.impact({ hold: 0.1, frame: 'full', at: orb.position });

Other calls:

• fx.bolt(a, b, opts): levels, jag, width, minPx, intensity, life (ticks), hold (keep the shape at full strength for its life, then an afterglow), leader (seconds to reach out; default by length, 0 = at once), anchor, branches (first forks), twigK (twigs per fork), twigs (fork depth, up to 3), fringe (hair-fine branchlets along trunk and first forks), forkLen, core (the white core's share), flat (pin to a height: ground arcs), shell / inside (on or within a sphere round the anchor), inner (inside the orb: dimmed behind its core), path (follow a polyline), hit (false: no ground strike).
• fx.sparks, fx.debris, fx.puff and fx.shards.
• fx.ring for a single pressure front.
• fx.createTrail({ chain, chainSize }) for any other smoke stream, with billows laid along its path.
• fx.vortex(center, opts) for a storm domain.
• fx.addHeat(pos, radius, amount) to make the ground glow.
• fx.ramp(scale, seconds) for a time ramp.
• fx.repeat(ticks, fn) to re-throw something on the next lightning ticks.
• fx.attractor to pull everything into a charge; attractor.lift (0–1) makes debris float in it.

The layers, with the numbers that shipped

| layer | numbers | | --- | --- | | Lightning | Midpoint displacement with 4–7 levels (bolts longer than 1.5 m get one more), up to 129 points per strip. Each split lands 32–68% of the way along; the offset is 0.15–0.34 × the length and falls ×0.58 per level (halving left the fine scale smooth), the first level at 0.6×. Trunk weight varies 0.85–1.45×. Forks of forks: a strip throws min(12, (1.2 + 1.5·len)·branches) first forks, then (0.8 + 4·len)·twigK and 7·len·twigK more per level, down to depth 3. Forks leave 5–85% of the way along at 0.3–0.85 rad, 0.1–0.65 × the length (a power law, × forkLen); twigs leave at 0.45–1.2 rad, 0.05–0.55 × the length, with a weaker pull toward the trunk's direction, so they splay instead of combing. By depth: width 1 / 0.4 / 0.22 / 0.13, minimum px 1 / 0.46 / 0.28 / 0.18, brightness 1 / 0.62 / 0.42 / 0.3, jag ×1.2 then ×1.5. Points live in a 131,072-point ring with 16,384 strips; the GPU buffers hold 60,000 points. Fringe: up to 24 branchlets (n/6 × fringe) along a trunk, 0.6× that along first forks, 1.2–5% of its length (×1.4 on forks) at 0.5–1.3 rad, two kinks each (jag ×2), width 0.09, minimum px 0.14, brightness 0.18–0.32, almost all glow. Life: shapes re-roll on a 30 Hz tick. A one-off bolt steps 1.0 → 0.55 → 0.28 → 0.14; a held one (hold) stays at 0.9–1.0 for its life, then 0.55, 0.2 and 0.07 (afterglow). Leader: it reaches out in min(0.09, 0.03 + 0.014·len) s (0.03 s inside the orb), with a tip ×(1 + 1.3) and a return-stroke flare ×(1 + 0.8e^(−20t)) once it connects. Ribbon 3 × the width, at most 40 px × dpr. A fine core: radius max(0.4 px, min(9% of the half-width × share, 1.25 px)) × dpr, share 1 / 0.7 / 0.45 / 0.34 / 0.26 by depth; core ×3.8 white × share, a tight glow e^(−px / 0.22 half-width) × 1.45 and a wide halo (1 − s)³ × 0.38 of (0.15, 0.17, 1.0) (linear violet-blue). Brightness along the channel × (0.62 + 0.24 sin 8.3t + 0.14 sin 21.7t), trunks × (1.12 − 0.3t), and about one point in ten on trunks and first forks a hot bead ×1.65. | | Orb | A lit billow surface, not a soft volume. March 28 steps from a random per-pixel start through r < 1 on a two-octave field, then refine the first hit with 5 bisections on the full field, 1.5 n₁ + 0.8|n₂| − 0.3 + 0.5|n₃| − 0.12 + 0.28|n₄| − 0.08 (the abs octaves make rounded lobes with creases), minus 1.2 × smoothstep(0.93, 1, r) at the limb and a clear pocket of radius 0.22 round the core. It churns in place: the coordinates turn only t(0.05 + 0.07·pressure) + 0.25(1 − r) round the punch axis and are not scrolled; the warp field (×0.7, amplitude 0.95) drifts through at (0.09, 0.16, −0.07) per second, so the billows boil and deform where they are. Scale ×2.5. A march step counts as a hit only when the cheap field passes −0.06 and the full field passes 0, or the edges stepped. The normal comes from a tetrahedral gradient (e = 0.014). Lighting: a key from above and in front, wrapped (0.6 N·L + 0.4)^1.6 × 0.14; tops key^6 × 0.07 in (0.42, 0.52, 1.0); a rim (1 − N·V)³ × 0.06; cavities darkened by depth to 0.22; the core (0.5 + 1.1·pressure)/(0.02 + 12d²) × 0.55 on the side facing it; and each arc's light along its segment from the core to its wall end, w(e^(−300q²) + 0.1e^(−25q²)). Base colour (0.17, 0.27, 1.0) × (0.55 + 0.6·pressure)(1 + 0.9·instability). Core: 7e^(−1400d²) + 0.8e^(−120d²) + 0.08e^(−9d), seen 45% through the cloud, plus a haze 0.22 × Ic × e^(−7d²). Rim: a hairline, e^(−e/0.006) + 0.04e^(−e/0.05), e being the distance in from the silhouette in radii, and a faint 0.015-radius glow outside. Arcs are real ribbons: 10 + 5 × pressure (8 + 5 when the orb is under 120 px) from a core that wanders 0.07 r, to ends spread on a slowly turning Fibonacci sphere (0.35 rad/s, each wandering 0.32 off its place). Each channel holds one shape for 4–9 ticks, then re-rolls (15% stay dark a turn). Width 0.08 r, minimum px 0.8 × 0.016 × the orb's screen radius, core 0.5, two fork levels, fringe 1.3. 30% crawl on along the inner wall (0.975 r); now and then (p = 0.3 × (0.5 + 0.6·pressure) a tick) a crawler hugs the outside of the membrane at 1.0