Koi Pond WebGL — Flow-Field Fish Simulation

A flow field assigns a direction to every point in space. Perlin noise generates that direction smoothly and organically rather than randomly, so nearby points flow in similar directions while the overall pattern slowly drifts over time. Each koi samples the field at its own position every frame and gently steers toward the direction it finds there, producing the graceful curved swimming paths real fish display.

Each fish is a signed-distance shape evaluated directly in the fragment shader: an ellipse for the body, bent near the tail using a sine wag synced to the clock, with a soft white patch stamped near the head for the classic koi colour pattern. Up to sixteen fish positions and headings are simulated on the CPU each frame and passed to the shader as a uniform array, so the GPU only has to evaluate each fish's shape once per pixel.

Clicking or tapping the pond records the world position and the current time into a small ring buffer of up to six ripples. The shader measures the distance from every pixel to each ripple's centre and its age since the click, then draws a sine wave ring that expands and fades over about three and a half seconds — the same idea used in the Bioluminescent Ocean simulation's click ripples.

All sixteen koi are always simulated in the background regardless of the setting, since fish motion is cheap to compute. The buttons simply control how many of them the shader is told to render, letting you choose a calmer pond with a few fish or a livelier one with the full school without any change in animation smoothness.

Not in the strict sense of a separate blur pass over a bright-pass render target. Instead, sun glints and fish highlights add a soft exponential glow directly in the same shader pass, which reads visually the same as bloom without the cost of extra render targets — a common lightweight technique for single-pass GLSL scenes.

Each fish checks its distance from the pond centre every frame. Once it crosses roughly 80% of the pond radius, its steering gradually blends away from the flow field and toward the centre, with the blend strength increasing the further out it drifts. This keeps the whole school naturally contained without a hard wall or a sudden direction snap.

Each fish is assigned one of eight colour variants inspired by real koi varieties — kohaku orange-and-white, taisho sanshoku red-black-white, ogon gold, and so on — plus its own random tail-wag phase seed, so no two fish swim or flick their tails in perfect sync.

Gentle Rain or a soft Water Stream track from the Sound Mixer complements the pond beautifully. Wind Chimes also works well if you would like a touch of melody alongside the quiet swimming.

Yes. ASMR Sanctuary is a Progressive Web App. After your first visit the Service Worker caches the page and all assets, so the koi pond simulation runs fully offline with no internet connection required.

Lower the Fish Count to Few, which reduces how many fish shapes the shader evaluates per pixel. Shrinking the browser window or zooming in also reduces the total pixel count the shader has to process. Pausing stops both the fish simulation and the render loop, which is the most effective way to save battery.