How we built the ocean on our homepage

The ocean at the top of our homepage is not a video. It is drawn live, every frame, by a fragment shader running on your graphics card. There are no libraries and no image files involved, just one small script. Here is how it works.

The water is six waves added together

The surface is a height field: for any point on the water, a function returns how high the water is there. That function adds up six swells, each with its own direction, frequency, height and speed. Big slow swells set the shape, and small fast ones add chop on top.

A plain sine wave looks too round for water, so each swell is sharpened: the shader raises e to the power of the sine. That keeps the troughs broad and flat and pinches the crests into points, which reads as water at a glance.

Finding the surface

For every pixel, the shader casts a ray from the camera. If the ray points up, it shows the sky. If it points down, the shader marches along the ray until it dips below the water, then narrows in on the exact crossing with a few steps of binary search. The surface normal comes from sampling the height field at two nearby points.

Light, reflection and the moon

• The sky is procedural too: a dark gradient, a warm haze on the horizon, a moon with a soft halo, and stars placed by a hash function so they never repeat.
• The water reflects that sky using the Fresnel effect: almost nothing straight down, almost a mirror at a glancing angle.
• A tight specular highlight of the moon on every wave builds the gold path across the water. A wider, softer one adds the glitter around it.
• Distance fog blends the water into the horizon haze, and a final grade lifts the golds and adds a vignette.

Keeping it smooth on every machine

Raymarching every pixel at full resolution would be heavy, so the ocean renders at a fraction of the screen's resolution and the browser scales it up. A small governor measures the frame rate every second and a half. If it drops below 40 frames a second, the resolution steps down; if there is headroom, it steps back up. When the ocean scrolls off screen, rendering stops completely. If your system asks for reduced motion, it draws a single still frame.

Why bother?

We make games that run in a browser tab, and the homepage should prove the point. The same thinking runs through our games: Last Ember paints its textures and synthesizes its sound at load, with no image or audio files, and its co-op runs peer to peer between players' browsers.