← 🌿 Nature & Climate
🌊 Ocean · Gerstner waves

🌊 Parameters

Drag — rotate · Scroll — zoom

🌊 Ocean Waves — 3D

A procedural ocean rendered with GLSL shaders using Gerstner wave models. Adjust wind speed and storm intensity to morph from glassy calm to towering storm waves in real time.

🔬 What It Demonstrates

Gerstner waves model water surface motion where particles move in circles (not just up-down). Multiple waves superpose, creating realistic interference patterns.

🎮 How to Use

Adjust wind speed for wave height. Increase storm intensity for chaotic seas. Watch sun reflections change as wave slopes steepen.

💡 Did You Know?

Real ocean waves are generated by wind transferring energy to the water surface. A fully developed sea (unlimited wind fetch) follows the Pierson-Moskowitz spectrum from 1964.

About this simulation

This simulation renders a procedural sea surface in real time using a GLSL vertex shader built around the Gerstner wave model. Six directional wave components of differing amplitude and wavelength are summed so that surface points trace circular orbits rather than simply bobbing up and down, producing sharp crests and broad troughs. Each component obeys the deep-water dispersion relation w = sqrt(g·k), so longer waves travel faster, and a Blinn-Phong plus Fresnel fragment shader handles sun glint, sky reflection and crest foam.

🔬 What it shows

A sum of six Gerstner waves displaces a plane mesh: each point moves horizontally as well as vertically (steepness factor Q = 0.55), forming pointed crests. Wave speed follows the deep-water dispersion w = sqrt(9.81·k) where k = 2π/L, and the storm control adds extra chop and steepens the seas. The fragment shader blends deep and shallow water colour by height, adds specular sun highlights, Fresnel sky reflection and white foam on the steepest crests.

🎮 How to use

Drag to orbit the camera and scroll to zoom. The sliders set wave Amplitude, Wavelength, Wind direction (0–360°), wave Speed, Storm intensity (0–1) and atmospheric Fog density. The Storm button instantly raises amplitude, speed and storm chop for a wild sea, while the Calm button flattens it to a near-glassy surface. A small sailing boat bobs on the waves as a scale reference.

💡 Did you know?

Gerstner waves, described by Franz Josef Gerstner in 1802, were one of the first exact solutions for periodic water waves. Their trick of moving particles in circles is why real wave crests look sharp and troughs look flat, and the same model is widely used for ocean rendering in games and film.

Frequently asked questions

What is a Gerstner wave?

A Gerstner wave is a mathematical model of a water wave in which each surface particle moves in a circle rather than just up and down. This horizontal motion gathers water toward the crests, making them sharp and pointed while the troughs stay broad and flat, which is much closer to real ocean swell than a plain sine wave.

How does the simulation build a realistic sea from this?

It sums six Gerstner components in the vertex shader, each with a different direction, amplitude and wavelength, all steered by the wind-direction slider. Because these waves interfere, the surface gains the irregular, ever-shifting look of a real sea. The fragment shader then adds depth-based colour, sun specular highlights, Fresnel sky reflection and foam on the steepest crests.

What do the sliders and buttons control?

Amplitude sets wave height and Wavelength sets their spacing. Wind direction (0–360°) rotates the dominant travel direction, Speed scales how fast the waves move, and Storm (0–1) adds chaotic chop while darkening the sky and water. Fog adjusts atmospheric haze. The Storm and Calm buttons jump straight to preset rough or glassy conditions.

Is the wave physics accurate?

The motion is physically grounded: each component uses the deep-water dispersion relation w = sqrt(g·k) with g = 9.81 m/s², so longer waves correctly travel faster than short ones. It is a visual approximation rather than a fluid solver, since it uses a fixed set of six waves and stylised foam and lighting, but the core wave shape and dispersion behaviour are true to theory.

Why do steeper waves eventually break in the real ocean?

A Gerstner wave can be made so steep that particle orbits at the crest overtake the wave itself, at which point the surface folds over and the model is no longer single-valued. In nature this is exactly when waves break into whitecaps, typically once the crest angle approaches about 120 degrees, which is why this simulation paints foam on its sharpest, fastest-moving crests.