Build a single-file interactive WebGPU diorama called "Koi Jelly" for a "Material Studies" series: a Japanese castle stroll garden around a koi pond, cut out as a square block of clear jelly standing on a pale paper-grey table. Plain JS + WGSL, no libraries, everything inline, no network requests.
SCENE (block ~5.2 × 5.2 units, water level ~1.0):
- The pond fills the front and right of the block; its cut faces show koi swimming through the jelly.
- Back right: a castle bailey on sheer dry-stone walls (ishigaki) rising straight out of the water, a white multi-tiered keep (tenshu) with dark tiled roofs and upturned eaves, a stone stair down to the paths.
- Back left: a five-storey pagoda on a hill and a bell tower with a big bronze bell.
- Between them: a waterfall pouring off a rocky knoll through a notch with a sheer face into a plunge pool, with foam and a current pushing out into the pond; maples and azaleas on the knoll.
- Left: a lawn and moss garden, a raked-gravel rock garden (karesansui), and a tea house with a veranda by the water, a red parasol (nodategasa) and red bench cloths. Stone lanterns (tōrō, yukimi-dōrō) along gravel paths, a deer-scarer (shishi-odoshi) that slowly fills, tips and knocks.
- A promontory leads to a red arched drum bridge (taiko-bashi) onto the big island: a weeping cherry with long pink strands, a snow-viewing lantern, a leaning pine.
- A zigzag plank bridge (yatsuhashi) crosses an iris marsh in a back cove. A crane island with tall rocks and a leaning pine; a turtle island with flat basking rocks.
- ~17 cherry trees in full bloom, azaleas, pines, maples, edging stones round the pond, a pebbly pond bed with algae.
WATER: a real-time shallow-water heightfield (~168² grid) with refraction, colour absorption, caustics on the bed, foam and ripples. Everything disturbs it: koi gulps, ducks, the boat, raindrops, the waterfall current. Drag on the water to stir it; drag on the ground to tilt the whole jelly block (it wobbles back).
LIFE:
- 16 koi in real varieties (kohaku, sanke, showa, yamabuki ogon, platinum, asagi, chagoi, tancho) with procedural patterns, cruising just under the surface and schooling loosely; little medaka.
- Pairs of mandarin ducks; a kingfisher that perches and dives; a grey heron that wades, strikes and flies between spots; Japanese white-eyes flitting in the blossom.
- Pond turtles that bask on rocks, slide in with a plop when startled, swim around the island and haul out again.
- People strolling the paths and crossing the bridges, a monk at the bell, a boatman poling a pleasure boat.
EVENTS (four main buttons):
1. Feed the koi (also Space, or tap the drum bridge): a visitor walks to the crown of the bridge and throws five handfuls of floating pellets; the koi crowd in, mouths open, and slurp every pellet (count shown).
2. Hanami: a gust shakes the cherries; hundreds of petals tumble and drift, gathering into petal rafts (hanaikada) on the water; picnic mats appear; the boat sets out. Tap any cherry to shake down a shower.
3. Lantern night (or tap the bell tower): dusk falls with a temple bell; paper lanterns are set afloat and drift on the current; stone lanterns light up with warm pools of light on the ground and water; rockets rise from behind the castle and burst as large coloured chrysanthemum shells that light the garden in their colour; dawn returns with the bell.
4. Spring rain: the sky greys, rain streaks and drop rings, the waterfall swells, strollers leave, the koi go deeper, distant thunder.
SOUND: synthesised with WebAudio, only for events (no constant ambience): pellets pattering, koi gulps, a koto phrase and wind for hanami, temple bell, rocket whistle, boom and crackle, lantern plink, the deer-scarer's knock, oar, kingfisher, duck, heron, plop, thunder. A rain loop plays only while it rains.
UI: a masthead (eyebrow "Material Studies", serif italic title "Koi Jelly.", a short description). A floating control panel at top right: the four event buttons, Reset, Pause, Sound on/off, View. Three status lines (koi / garden / sky) with tallies (koi fed, petals on the pond, fireworks) and an activity meter. Jelly palettes Ramune / Sakura / Matcha. Sliders for Firmness, Damping and Breeze (m/s). The panel folds to just its buttons (header or H key) and folds itself away when you zoom in close. Right-drag to orbit, wheel or pinch to zoom; a bottom sheet on phones; a polite fallback card when WebGPU is missing.
RENDERING: MSAA, a sun shadow map, a caustics pass, refraction from scene and depth textures, instanced creatures, soft studio lighting, a real night mode. Smooth at 60 fps. Prompt by @vib3coded , posted on X on 2026-10-28. x.com/vib3coded/status/2115484540487503872 . Copies include this credit. 