Showcase 08 · Procedural world
World
A flight over an endless island landscape with mountains, sea, clouds and a whole day in brand colours. None of it is an image: every pixel is computed from formulas. Move your mouse over the stage to steer and climb, or swipe sideways; without input the autopilot follows the valleys. The slider sets the time of day.
The live demo needs JavaScript and WebGL 2. The picture shows the landscape at dusk; the explanation below reads fine without it.
- Time
- –
- Steps/pixel
- –
- Render resolution
- –
- Frames/s
- –
- Shader
- –
How it works
The landscape is a single formula: fractal noise, many layers of ever finer waves stacked on top of each other. Their derivatives are computed along the way and damp the fine layers on steep slopes, which gives smooth valleys and rugged ridges as if shaped by erosion. For every pixel a ray feels its way across this height function until it meets the ground (raymarching); further away the steps grow longer and the detail coarser.
The water mirrors the sky and the mountains and, following the Fresnel equations, lets the refracted sea floor show through depending on the viewing angle, losing light with depth. The clouds are a volume the ray walks through step by step, scattering the sunlight. The sky follows the scattering in the atmosphere and the distance fades into haze. The times of day, from the violet dusk to the Frozen-blue morning, come from the design tokens. Everything renders at a reduced resolution that, like step count, shadows and clouds, adapts to the frame rate.