Bioluminescent Ocean WebGL — Deep Sea Simulation
About This Simulation
This bioluminescent ocean is rendered in real time on your GPU using WebGL2 GLSL fragment shaders — no video, no pre-rendered frames. Three layers of Voronoi cellular noise generate glowing cyan and turquoise organisms drifting through dark navy water. Four harmonic sine waves plus a noise term produce a realistic rolling surface. Move your cursor to disturb the water, or click anywhere to send an expanding ring ripple across the entire scene.
Frequently Asked Questions
What is bioluminescence and how does this simulation recreate it?
Bioluminescence is the production of light by living organisms — plankton, jellyfish and deep-sea fish are famous examples. This simulation uses Voronoi cellular patterns in a GLSL fragment shader: each glowing cell represents a cluster of bioluminescent microorganisms. The cells drift and pulse in real time entirely on your GPU, with no video or pre-rendered frames involved.
How does the Voronoi algorithm create the bioluminescent glow?
Voronoi noise divides space into irregular cells by computing the distance from each pixel to a set of animated seed points. An exponential falloff function converts that distance into a sharp, glowing halo — bright at the cell centre and fading outward. Three density layers (coarse, medium and fine) are blended in cyan, blue and green tones to mimic mixed populations of real deep-sea organisms.
What happens when I click on the ocean?
A click records the canvas position and the current animation time. The GLSL shader calculates the time elapsed since that click and draws an expanding circular ripple wave centred on that point. The ripple decays naturally over four seconds, exactly as a real water surface disturbance would.
What technique is used to simulate the ocean waves?
The wave surface is built from four sine waves at different frequencies and propagation angles, plus a low-amplitude Perlin noise term for fine surface texture. This technique — summing harmonic sinusoids — is called Gerstner-inspired wave synthesis and is the same principle used in real-time ocean rendering for games and visual effects.
What ASMR sound pairs well with this ocean visual?
Ocean Waves or Deep Rain from the Sound Mixer complement this simulation perfectly. Open the mixer in a separate tab and set the volume low for a meditative deep-sea atmosphere.
Does this simulation work offline?
Yes. ASMR Sanctuary is a Progressive Web App. After your first visit the Service Worker caches all assets including this page and its shaders, so the ocean runs fully offline with no internet connection needed.
Does my mouse position affect the ocean?
Yes. Moving your cursor (or dragging on touch screens) creates a subtle continuous ripple at your pointer position. The ripple travels outward and fades with distance, simulating surface tension disturbance. Click anywhere for a stronger expanding ring wave.
What does the Glow slider control?
The Glow slider scales the brightness of the bioluminescent Voronoi cells. At the minimum (0.3) the organisms are barely visible, producing an ultra-dark, calming scene. At maximum (2.5) the cyan and turquoise glow floods the water with intense light for a more vivid look.
Will this simulation run smoothly on my device?
The shader runs at up to 2× device pixel ratio to avoid unnecessary GPU load on high-DPI screens. On mid-range phones from 2020 onwards it typically holds 60 fps. Press Pause to stop rendering completely if your device runs warm. The Speed slider does not increase GPU load — it only changes the animation playback rate.
What is tone mapping and why is it used here?
Raw HDR colour values from the shader can exceed 1.0, causing harsh clipping. Tone mapping applies the formula col = 1 − exp(−col × 1.9) to compress highlights while preserving dark detail — similar to how a camera sensor handles bright light. A gamma correction step then recovers natural-looking contrast before the frame is displayed.