Elemental abilities

Elemental abilities

13 elemental abilities and 3 boosts for a three.js character: lances, crowns, portals, a meteor and a beam, each with a ground aim indicator, decals, lights, particles and camera shake.

It's Chiro Visuals' two Elemental Sandboxes (MIT), fused into one scene by Patch with both sandboxes' code unedited. The abilities are Frost Lance, Storm Lance, Cinder Fall, Nova Beam, Voltaic Snare and Glacial Crown (the September sandbox), and Pyre Crown, Kraken Crown, Electrical Sphere, Earthen Spire, Verdant Gate, Tidewrought Ring and Fire Portal (the August one); the boosts wrap the character in lightning, magic ribbons or fire. In the live demo, move the pointer over the floor to aim the chosen ability and click to cast it; right click or Esc puts it away until the next click.

The character is Patch's mannequin, the 1.8 m jointed test dummy, with an idle and three casts. Everything here is open: the code is MIT and the art is CC0.

Use it in a game

Each sandbox's abilities are a system you drive from your own loop. demo.js builds both into one three.js scene (FusedApp), and is the reference for wiring them:

1. Make the shared pieces once: the ParticleEngine, a LightPool, CameraShake, ScreenFlash and each sandbox's decal and burst systems (sandbox-august/effects, sandbox-september/effects).
2. Make each sandbox's ability system with them (sandbox-august/abilities, sandbox-september/abilities), and its AimController for the ground indicator.
3. Cast at a point on the ground from your character's position, and call each system's update(dt) every frame. The boosts (ElectricBoost, MagicBoost, FireBoost) attach to the character's rig.
4. Tune each ability's look in sandbox-*/config/settings.js (colours, sizes, timings, ELEMENT_META).

Your own character. The casts play settings[element].castAnim (cast1, cast2 or cast3) over a looping idle, and the boosts hang their arcs, ribbons and flames on the skeleton by bone name (Hips, Spine, Spine1, Spine2, Neck, Head, then LeftShoulder, LeftArm, LeftForeArm, LeftHand, LeftUpLeg, LeftLeg, LeftFoot, LeftToeBase and the same on the right). mannequin.js shows the smallest way in: it extends the August CharacterController and replaces only load, with a GLB holding the body and clips named idle, cast1, cast2 and cast3.

Everything is three.js 0.185 with custom GLSL; the HDRI only lights the scene and feeds the shaders' fake reflections.

Warm it up before the first cast. Each ability builds its meshes and materials the first time it's cast, and three compiles a shader program the first time it draws one, which froze the page for 0.1 to 0.7 s on most abilities' first cast (and 2.5 s right after it loaded). FusedApp#warmUp in demo.js does all of it while the demo loads: it fills every ability's pool (four of each), compiles every material in the background keyed for the post stack's render target (where the scene is drawn), draws one frame with everything forced visible, then casts every ability once with the canvas hidden and puts the scene back. Do the same behind your own loading screen.

Controls

The block page talks to the demo over the patch-block message channel (lib/patch-block.js). Casting happens in the frame: the chosen ability is armed while the pointer is over it, and a click casts it there. Boosts are toggles (boost.electric, boost.magic, boost.fire) for agents.

For people (the block page shows these):

The abilities are grouped by how they're aimed (ELEMENT_META[...].cast in each sandbox's settings):

• Line, cast along a line from the character: Frost Lance, Storm Lance, Cinder Fall, Nova Beam, Earthen Spire.
• Area, dropped on a circle where you aim: Voltaic Snare, Glacial Crown, Pyre Crown, Kraken Crown, Electrical Sphere.
• Gates, a standing structure that stays until you build another: Verdant Gate (a gate), Tidewrought Ring (a ring) and Fire Portal (a portal drawn in the air).

Each option has a picture, thumbs/abilities/<id>.webp: a 112 x 112 still of that ability mid-cast, captured from the built demo in headless Chromium (patch-lab's oss/ability-vfx/lab/block/make-thumbs.mjs) and kept in this repo.

On the page, for people: Ability, as a row of groups and then the group's pictures, then Speed and Glow, and Clear. The boosts, camera shake and keep casting are for agents.

Trigger: Clear (clear): Takes away every cast and what it left behind. Boosts that are on stay on.

For agents (5 more, in recipe.json with every range and default):

The character

public/models/mannequin.glb (0.7 MB, about 27,000 triangles) is Patch's scale figure: separate light shells around dark ball joints, each shell a rigid child of one bone, so there's no skinning at all. mannequin/ rebuilds it in Blender (build.blender.py, from the figure's fields in figure.py): it meshes every shell on its own, lays the figure out in the clips' T-pose, and retargets four clips onto it by turning each bone the way its source bone turns away from its rest pose, in world space.

Both packs are CC0 (quaternius.com, also on OpenGameArt as universal_animation_librarystandard.zip and universal_animation_library_2standard.zip); the build reads the Godot/Unreal GLB from each.

Build it

npm install
npm run build        # writes recipe.json, then dist/ (~9 MB), with thumbs/ copied in

dist/ is the live demo exactly as released, with index.html at the top and nothing loaded from other hosts. The build halves the HDRI to 1024 x 512 (hdr-half.mjs), since it only lights the scene.

Left out: the sandboxes' own pages, docs and the rest of their public/ (their sample characters and the August one's material library, upstream's "cathedral" floor maps, which name no source, and the author's contact photo).

Credits and licences

• Elemental Sandbox by Chiro Visuals (mohamedachrefelouafi), both of them, MIT, © 2026 mohamedachrefelouafi (sandbox-august/LICENSE, sandbox-september/LICENSE): the abilities, boosts, aim indicators, effects and GLSL. Credit line: "Elemental Sandbox by Chiro Visuals (MIT)". August, September.
• HDRI (public/hdri/spruit_sunrise.hdr): Spruit Sunrise, Poly Haven, CC0.
• Floor (public/floor/): Rock030, ambientCG, CC0.
• Red Hat Mono: The Red Hat Project Authors, SIL Open Font License 1.1 (fonts/OFL-red-hat-mono.txt).
• three.js and lil-gui: MIT.
• The mannequin (public/models/mannequin.glb, mannequin/): Patch's scale figure, rigged by Patch, CC0.
• Its clips: retargeted from Quaternius' Universal Animation Library 1 and 2, CC0.
• Fusing the two sandboxes, the demo page, its label and mannequin.js: Patch, MIT. The pictures in thumbs/: stills of this demo, Patch, CC0.

Code: MIT (LICENSE). Art: CC0 (the HDRI, the floor, the mannequin and its clips, and the pictures); the font is OFL 1.1.