Terrain · WebGL 1 · fragment shader No heightmap, no mesh, no photograph. Every ridge on the horizon is a stack of noise octaves evaluated per pixel, and the ground you are flying over has never existed before this frame. Drag to steer; the dock is right there.
No GPU, so no ground
This landscape is a raymarched heightfield: a fragment shader that
evaluates a stack of noise octaves for every pixel and intersects the
view ray with the result, which needs a working
WebGL 1 context. This browser gave us none. The
ridgelines above are CSS polygons.
Any current Chromium, Firefox or Safari with hardware acceleration on will run it, including under a software rasteriser.
How it works
A heightfield made of noise, marched one ray at a time
There is no terrain data anywhere in this file. The ground is a sum of eight octaves of value noise, each one twice the frequency and roughly half the amplitude of the last, and the ridged variant inverts and squares each octave — which is what turns rolling hills into the sharp crests and flat valleys that read as mountains rather than as dunes.
The camera does not sit above a mesh. Each pixel casts a ray, the shader steps that ray forward in increasing steps, and where the ray's height falls below the terrain it bisects back in. The three lighting presets are three sets of sky, sun and fog constants, and the sun direction is what actually changes the picture.
Infinite, and the same everywhere
Because the ground is a function of world position and not of anything stored, the landscape is infinite in every direction and the ridge you are looking at is the same ridge you will pass in ninety seconds — the flight path is a closed loop, so the loop is invisible. You are always somewhere new over terrain that is always the same mountain.
Aerial fog is doing a lot of the work. It separates each range from the one behind it, which is the entire trick of a landscape painting, and here it is a single exponential on distance with a colour the preset supplies.
Every control changes pixels in this viewport
On a wide screen the dock is a 260px column on the right with the artwork full-bleed behind it. Under 1024px it becomes a bottom dock capped at 44svh with the groups in two columns, and the caption lifts clear of it. Frames per second and the quality tier in force are printed inside the dock, never over the landscape.
Press H to take the dock away; an opaque pill comes back in its place. Press C to collapse it to one row. The lighting presets are the honest test: they move the sun, the sky, the rock colour and the fog together, so the frame is a different picture and not the same picture with a number changed.
Land, on a page, without an asset budget
Property, resorts, ski and trail, national parks, a game landing page, a documentary masthead. A real terrain tile set is megabytes and a build step; this is a few kilobytes of arithmetic and it never ends at the edge of a tile.
- 19 Raymarch Forge
- The same technique pointed at a sculpture instead of a landscape.
- 06 Cartograph
- Map-led storytelling with a real 3D surface under the pin.
- 11 Deep Field
- Both pages put a real-time sky in the top half of the frame.
- Stack
- WebGL 1, GLSL ES 1.00. No
#version 300 es, no WebGPU, no float render targets, no extensions. - Cost
- One full-screen triangle, one fragment program. The cost is fill, so the drawing buffer is capped and stepped down hard on small screens. The octaves, the march steps and the render scale are all in the readout.
- Degrades to
- CSS ridgelines if there is no WebGL context, and a single static frame under
prefers-reduced-motion— same layout, same palette, no loop.