A beautiful ocean surface rendered with GLSL shaders featuring foam, moonlight reflections, Fresnel effect and subsurface scattering. Presets for calm seas, storms, ripples and tsunami — click to throw stones.
Gerstner waves with multiple frequency components. Fresnel equations control reflection/refraction balance. Foam appears where wave slopes exceed a threshold.
Choose a preset (calm, storm, ripple, tsunami). Click on the water to create ripple impacts. Watch moonlight reflections shift as waves move.
The Fresnel effect means you see more reflection at shallow angles and more refraction looking straight down — this is why distant water looks like a mirror while nearby water is transparent.
This simulation renders a real-time, GPU-shaded ocean surface using a sum of Gerstner waves. Each Gerstner wave displaces vertices both vertically and horizontally so crests sharpen and troughs broaden, mimicking how real water particles move in circular orbits. Four overlapping waves of differing wavelength, direction and speed are stacked, with the deep-water dispersion relation c = sqrt(9.8 / k), where k = 2π / wavelength, setting each wave’s phase speed.
The control panel adjusts amplitude (steepness), wave speed, wind direction (which reorients the dominant waves), turbidity (extra choppy high-frequency ripples), colour depth and mesh resolution. Clicking the water spawns an expanding, decaying ripple and a splash. Such techniques drive water rendering in games, films and oceanographic visualisations, where convincing surfaces must be produced far faster than a full fluid solver allows.
What does this simulation show?
It shows a moonlit ocean surface animated in real time with WebGL and Three.js. The water height comes from several combined Gerstner waves, while a GLSL shader adds foam on steep crests, a Fresnel reflection rim, specular moonlight glints and a subsurface-scatter tint.
What is a Gerstner wave?
A Gerstner (or trochoidal) wave is a classic model in which surface points trace circular orbits, displacing horizontally as well as vertically. This produces sharp peaks and flat troughs that look far more like real waves than a plain sine displacement, which is why it is widely used in real-time water rendering.
What do the controls do?
Amplitude sets wave steepness, Speed scales how fast crests travel, and Wind (dir.) rotates the dominant wave direction in degrees. Turbidity adds fine choppy ripples, Colour depth shifts the deep-to-shallow water tint, and Resolution changes the mesh subdivision used for the surface.
Each Gerstner wave uses the deep-water dispersion relation, where the phase speed c equals the square root of g divided by the wavenumber k, with k equal to 2π divided by the wavelength and g taken as 9.8. The phase is k times the dot product of direction and position minus c times speed times time.
The shader compares each vertex’s vertical displacement against a threshold near the wave amplitude. Where a crest rises steeply above that threshold the foam value increases, and the fragment shader blends in a near-white foam colour. This approximates how real waves break and aerate when their slope becomes too steep.
The Fresnel effect describes how reflectivity rises as your viewing angle approaches grazing. The shader raises one minus the dot product of the surface normal and view direction to a power, so distant water at a shallow angle looks mirror-like while water viewed from directly above appears darker and more transparent.
A click raycasts onto a flat plane at the water level to find the impact point, then registers a ripple impulse and spawns a dozen splash particles. The ripple is a radially expanding sine wave that decays with both distance and time, so the disturbance spreads outward and fades, like a stone dropped into a pond.
It is a visually faithful approximation rather than a true fluid simulation. The Gerstner model and deep-water dispersion relation are physically grounded, but the choppy turbidity terms, ripple decay and foam are artistic heuristics. It captures the look and motion of an ocean without solving the full Navier–Stokes equations.
Calm uses low amplitude, slow speed and light turbidity for a gentle sea. Storm raises amplitude, speed and choppiness sharply. Ripples sets a near-flat surface and scatters many small impacts. Tsunami uses a very large amplitude with a single huge ripple launched from one edge of the grid.
Sum-of-Gerstner-waves rendering powers oceans in video games and film visual effects, where realistic water is needed every frame. Similar wave-spectrum methods inform offshore engineering, ship simulators and oceanographic visualisation, offering believable surfaces at interactive speeds without the cost of a full computational fluid dynamics solver.