Build "Jelly Pool": a single self-contained HTML file. It shows a sunlit outdoor swimming pool in real-time 3D, and the user drops soft-body jelly sea animals into it: a marlin, a humpback whale, an orca and a hammerhead shark. Each animal is made of clear, wobbly jelly that refracts the pool behind it and has a milky core and dark glossy eyes. It splashes in, dives and swims with a travelling body wave, and wobbles as it turns. The whales surface to breathe and blow spray. Everything is procedural: no image, model or sound files. English UI.
TECH
- three.js r128 from cdnjs (UMD build, global THREE), WebGL 2 required. If WebGL 2 is missing, show a friendly fallback message.
- Soft-body physics runs in Web Workers created from a blob URL. Put the worker source in a <script type="text/plain"> tag in the page and use navigator.hardwareConcurrency − 1 workers, clamped to 1–3. Spread the animals across the workers and give each new animal to the least busy one.
- Each step, the main thread sends the swim frames to the workers. The workers reply with packed Float32Arrays as transferables.
- Use adaptive quality: lower the internal render scale when frames run slow. On coarse-pointer or low-core devices, use coarser jelly meshes and cap the pool at 6 animals instead of 8.
THE POOL
- A rounded-rectangle pool under a pitched perspective camera, fitted to the screen in any aspect ratio. The floor slopes from a shallow end on the left (≈0.55 m) to a deep end on the right (≈1.85 m).
- Pale stone deck. Coping blocks with a rounded bullnose edge overhanging the waterline, standing a little proud of the deck, with a soft shadow along their outer edge and darker splash-wet stone near the water.
- Shell: procedural mosaic tiles in a shader (field, border and a darker waterline band), each tile with bevel normals and a glassy glaze highlight.
- Dappled shadow from a palm crown leaning over one corner, moving gently in the breeze.
- Water simulation: a GPU heightfield wave equation on ping-pong float render targets, damped, with walls as boundaries. Touching or dragging across the water makes ripples. Add a slow circulation from return jets and gentle lapping swells.
- Water surface: computed normals, refraction of the shell and the animals beneath (with the deep end bluer and darker), Fresnel reflection of the sky, and a reflection of the coping and the tiled wall band. Add a sharp sun glint, a meniscus and coping shadow along the walls, and foam patches from splashes.
- Caustics: refract a grid of sun rays through the surface heightfield onto the floor into a caustic texture (area-change brightness). Use it to light the shell and anything under water.
- Tools on the water:
- Breeze: wind ripples from scrolling noise gradients.
- Rain: random drop impulses plus ring ripples, and rain sound.
- Whirlpool: a vortex that swirls the surface and the animals, a darkened funnel and spiral foam arms.
THE ANIMALS (soft bodies)
- Define each species as a signed-distance body: smooth unions of ellipsoids and capsules, with fins as flattened shapes.
- Marlin: long bill, tall sail fin, forked tail.
- Humpback: long pectoral fins, throat pleats, knobby head.
- Orca: tall dorsal fin, rounded head.
- Hammerhead: wide cephalofoil, tall dorsal.
- From the SDF, build:
1. A tetrahedral simulation lattice: a voxel grid, keeping cells that intersect the body, each split into tets.
2. A smooth render surface via surface nets, plus an inner milky core from an offset SDF and two eyes.
3. An embedding: each render vertex is stored as the tet that contains it plus barycentric weights.
- Physics in the worker, XPBD:
- co-rotational shape matching per tet (warm-start rotations) plus edge-based internal viscosity, firmer in the core than the skin;
- in the water (y < 0) the body is weightless with quadratic drag; above the water, gravity, so it falls back with a splash;
- steering through a soft "hold" constraint that pulls the chest and head nodes (never fins or tail) toward a swim frame (position + rotation) moved by the main thread;
- swimming by strain: a travelling wave of target lengthening and shortening along the spine toward the tail. It is side to side for fish (marlin, hammerhead) and up and down for whales (humpback, orca, using each tet's offset above or below the spine), with a bend toward the direction of a turn.
- Output per step: node positions plus a per-node cofactor matrix of the deformation gradient F = Ds·Dm⁻¹ (columns f1×f2, f2×f0, f0×f1), averaged over the surrounding tets. Pack them as four rows of RGBA texels per node (position, then three cofactor columns) so the GPU can transform rest normals to deformed normals.
JELLY RENDERING (GPU skinning + passes)
- Upload the node texture as a float DataTexture each frame. In the vertex shader, use texelFetch to read the 4 nodes of the embedding tet, blend the positions with the barycentrics, and transform the rest normal with the blended cofactor.
- Pass order:
1. Opaque under-water scene into an RGBA half-float target: the shell, bubbles, and each animal's milky core and eyes, lit by caustic sunlight through the surface. Store the view depth in alpha.
2. Jelly back faces into a float target: the linear view depth of the far side.
3. Jelly front faces:
- thickness = back depth − front depth;
- Beer–Lambert absorption with a per-species tint;
- refraction: bend the view ray and sample the opaque target behind;
- Fresnel sky reflection and sun specular;
- a soft glow where the sun passes through thin parts (fins, tail).
4. A pale, soft floor shadow per animal, with the core a little denser.
5. The water surface composited over everything, so animals under water are seen through the refracting, caustic-lit water, and parts above the water are seen directly.
- Pigment patterns live in rest-space coordinates, so they ride the wobble. Each is a filtering film on the back, not paint:
- marlin: cobalt back with a wavering edge and a silver belly, vertical bars on the flank that glow brighter when it is excited (soften them at a distance to avoid moiré), dark fins, the bill dark above;
- humpback: no pigment, only throat pleats and a mouth line as shadowed grooves;
- orca: black above the white line and on every fin, the white eye patch, a grey saddle;
- hammerhead: a steel-grey cape over the back and the top of the hammer, dusky fin tips, five gill slits.
- Eyes: glossy dark beads with a pale ring and a wide pupil.
BEHAVIOUR
- Steering field: an SDF of where an animal may swim and still be seen. Keep it inside the walls, away from the band hidden under the near coping (the band gets wider the deeper the animal swims) and out from under the dock of cards, leaning back toward the open middle.
- Keep the centre, snout and tail inside.
- Wander in depth.
- Animals separate from each other (steering plus a direct positional push, so two bodies never share the water).
- Whales: humpback and orca surface every so often. The back breaks the surface, then they blow: a puff of spray from the blowhole and a ring of ripples.
- Close under the surface an animal leaves wakes, and the swish of a turn makes ripples. Crossing the surface makes splashes, droplets and foam.
- States: in the air (held or thrown), diving in, swimming, leaving.
- "Clear pool": the animals rise out of the water and melt away back into their cards.
- Start state: a humpback and a marlin already swimming, and an orca thrown in a moment later.
INTERFACE (glass dock at the bottom, light and clean)
- Four cards, each with:
- a live thumbnail of the jelly animal in its rest pose, rendered with the same shaders;
- name and short description: Marlin "Cobalt, silver belly", Humpback "Ocean blue", Orca "Black & white", Hammerhead "Steel grey".
- Card interaction:
- tap a card: the animal is tossed into the pool;
- drag a card: the animal hangs over the water under the pointer, dangling and wobbling, and drops in where it is released.
- Tool buttons with SVG icons: Breeze (B), Rain (R), Whirlpool (W), Clear pool, Sound (M), Hide interface (H), plus a "Show interface" restore button.
- Also:
- a brand label "Jelly Pool" with a live count ("Empty pool", "3 jellies");
- a hint: "Tap a jelly to release it, or drag one onto the water";
- a toast when the pool is full: "The pool is full. Clear it to add more jellies".
- Accessibility: aria-labels on the canvas and the cards, keyboard shortcuts, respect for prefers-reduced-motion, and a responsive layout down to phone width.
SOUND (Web Audio, synthesized, off by default)
- Gentle water lapping.
- Splashes and plops scaled by impact.
- Rain hiss.
- Whale blows as a breathy whoosh.
- Breeze. Prompt by @vib3coded , posted on X on 2026-10-29. x.com/vib3coded/status/2115912474566488307 . Copies include this credit. 