Raymarched wave heightfield

Sunset Ocean

Drift over an endless raymarched sea at sunset, with sharp-crested waves, a blazing sun glint, cloud bands and haze on the horizon.

Parameters

Seed – Saved in the address bar, so a link reproduces this variation. Keys on the canvas: Space, R, N, F.

How it works

The sea is a height function made of up to 28 directional waves. Each octave rotates its direction by the golden angle, multiplies frequency by 1.19 and amplitude by 0.8, and moves at sqrt(g k), the deep-water dispersion relation, so long swells outrun the ripples. Each wave is exp(sin(x) - 1), which has sharp crests and long flat troughs like real swell, and before the next octave the sample point is dragged along the wave slope, which bunches small waves on the crests (Choppiness).

Rays below the horizon are only marched between two planes: the top of the waves (y = amplitude) and y = 0. The march steps by the height difference divided by the ray slope (so it takes big steps at grazing angles), uses only 9 octaves, and when it crosses the surface it refines the hit with one secant step between the last two samples. About 26 iterations at most per pixel.

Normals use the full detail, 26 octaves close up, 18 in the middle distance and 11 far away, with the finite-difference step growing with distance; far normals are also blended towards flat. This level of detail saves time and stops the horizon from sparkling with aliasing.

Shading: a Schlick fresnel term mixes the water body colour with the sky reflected in the normal; crests facing the sun get a green subsurface tint; a very tight specular lobe draws the sun glint path; and exponential fog fades into the horizon colour. The sky has a gradient, a sun halo and disc, and clouds from five octaves of value noise projected onto a plane above the camera.

The canvas renders at Resolution scale (0.5 of device pixels by default). Drag to look around; the camera eases back towards the sun.

  • raymarching
  • heightfield
  • fresnel
  • waves
  • GLSL

Source

/assets/demos/webgl/ocean.js

More WebGL / GLSL demos