Endless Ocean
A glass float adrift on a sea that never ends. Paddle it about, ride the
swell, bounce off the buoys, and turn the sea and the sky with the sliders,
from flat calm at dawn to a storm with crests twenty metres from trough to
top. Nothing is painted: the water, the sky and the light are worked out as
they are drawn, so it never repeats.
It is built on madness-engine:
the stage, the controls, the splashes, the sound and the glass float (the
engine's marble, blown up) are the engine's, and so is the sea itself,
madness-engine/ocean, which any game on the engine can use.
| |
|---|
| |
| Dawn | Night |
| |
| A long swell at dusk | The sliders |
Run
npm install
npm run dev # http://localhost:5173
npm run build # static build in dist/
Needs WebGPU or WebGL 2 (any current browser); ?renderer=webgl or
?renderer=webgpu pins one. ?sea=storm&sky=dusk starts in any of the
presets (seas: glass, calm, breeze, swell, storm; skies: dawn, noon, dusk,
storm, night), and ?panel=closed with the panel folded away.
Controls
- Arrows or WASD, or hold anywhere: paddle
- Right-drag, Q/E, or two fingers: look round; wheel, +/− or pinch: zoom
- C: the view back home; M: sound
The sliders
- Sea: the presets, then wave height, wavelength, choppiness (how
sharp the crests are), crests (long and lined up, or confused), where
the wind blows from, and whitecaps. Each change rolls into the sea
smoothly rather than jumping.
- Sky: the presets, then the time of day (the sun, or the moon, goes
over), overcast, clouds, haze and exposure, and Let the day go by: a
day in four minutes.
- View: how far back the camera is. It also rises on its own to see
the float over any crest in the way.
How the sea works
All of this is in madness-engine (src/ocean.js and src/ocean/), taken
from what Neverending Tunnel III's barrel of water does:
- The water is sixteen Gerstner waves: each lifts the water and carries it
along, so the crests sharpen, and where the waves pile up they pinch
together, and there the water breaks into foam.
- It is drawn on a grid of rings round the camera, finest underfoot and
coarser out to the horizon, that goes wherever the camera goes. The grid
leaves out the waves too short for it; the shading puts them back, down
to a pixel, with a dozen short ripples on top.
- Every wave's phase under the camera is worked out on the CPU in double
precision and handed to the shaders modulo 2π, as the tunnel does with
its barrel, so however far you drift and however long you stay, nothing
shimmers.
- The light through the thin crests glows, brightest looking into the sun,
as the tunnel's lip does; the deep water picks up the light; the sky is
reflected, the sun glints, and it all fades into the haze.
- The float, the buoys and the camera ask the same sum, in JavaScript,
where the water is: the float rides the water it sees.
Layout
src/main.js: the stage, the sea, the loop, and what the sliders dosrc/float.js: floating, surfing down the wave faces, splashing downsrc/buoys.js: buoys moored all over the endless sea, worked out from where you aresrc/panel.js, src/styles.css: the sliderssrc/sound.js: the wash, the hiss of spray, splashes and knocks, made from noise
