Gallery

3 works tagged “shader”

Eighteen Swords Aloft

御劍術 · 月下馭十八劍 — a swordsman rises off a cliff above a moonlit sea of cloud and flies eighteen blades through nine formations without touching one of them. Every sword is a critically damped follower: a formation function says where it should be and which way it should point, and the sword chases that with a spring stiff enough to snap and soft enough to overshoot. Nothing is keyframed per sword — swapping formations IS the performance. They pull out of the rock into a ring, wind into a double helix, open as a lotus, drop into a vortex, shell into a fibonacci sphere, draw into one lance, fire past the lens and loop back. Orientation blends from the formation's direction to the velocity direction as a sword speeds up, which is what makes them look flown rather than placed; the ribbon trails are keyed to speed, so only a sword actually moving leaves light. The moon is the only light in the scene. Sky, stars, cloud deck, terrain, the swords and the cloth on his back are all generated at runtime — nothing is loaded. A 13.5 second directed sequence plays on loop. Press F for a free camera (drag to orbit, scroll to zoom), R to replay, space to pause, S for slow motion. The whoosh you hear is triggered per sword as it passes the lens, synthesised with WebAudio, and wakes on your first click. three.js r185 is bundled; there are no other dependencies.

three.js procedural formation

Leon· 2026-08-20 81 views

Where The Palm Landed

降龙十八掌 · 凌空一掌 — an old master gathers himself, leaps seven metres off a dry lakebed, turns over at the top and drives one palm straight down. What is left is an eight-metre handprint pressed into the earth, fingers and thumb and all. The ground under the impact is its own 200,000-vertex mesh that never moves on the CPU: the handprint is a signed distance field (a rounded palm smooth-minned to five capsules) and the shock ripple is a decaying travelling sine, both evaluated in the vertex shader, with the surface normal taken from finite differences of the same function. The crust is a wrapped Voronoi — F2 minus F1 gives the mud polygons — and inside the print it swaps to unbleached earth, because the crust is gone there. Nothing is loaded: no meshes, no textures, no audio files. A 12 second directed sequence plays on loop, ending on the reveal from above. Press F for a free camera (drag to orbit, scroll to zoom), R to replay, space to pause, S for slow motion. Sound is synthesised with WebAudio and wakes on your first click. three.js r185 is bundled; there are no other dependencies.

three.js procedural sdf

Leon· 2026-08-20 84 views

Haughty Dragon Repents

降龙十八掌 · 亢龙有悔 — an old master gathers qi into a dragon and splits a boulder on a cliff above a sea of clouds. Nothing is loaded: no meshes, textures, or audio files. The rock is carved at build time into 74 Voronoi cells that sit together seamlessly, so until it is struck it reads as one stone; a fracture front then travels out from the point of contact at 6 m/s, lighting each seam as it passes and releasing that cell as a rigid body (per-vertex impulse contacts, so the rubble tips, rolls and settles — and about a fifth of it goes over the cliff edge). The dragon is a single master spline with the body rebuilt along it every frame. The old man is a 22-bone rig with Verlet cloth. Sky, cloud sea, granite and the crack network are all procedural. A 12.5 second directed sequence plays on loop. Press F for a free camera (drag to orbit, scroll to zoom), R to replay, space to pause, S for slow motion. Sound is synthesised with WebAudio and wakes on your first click. three.js r185 is bundled; there are no other dependencies.

three.js procedural fracture

Leon· 2026-08-19 72 views