Contour terrain

Why contours

Most 3D landscapes on the web are shaded meshes, and they tend to look like screensavers. A survey map says more with less: every line is one elevation, lines that crowd together mean steep ground, and a closed loop is a summit or a basin. I spend my days on Oklahoma mineral data and my weekends on backcountry maps, so this is the visual language I already read without trying.

How it works

The ground is a flat grid of about 40,000 points in Three.js. In the vertex shader each point is lifted by four layers of 3D simplex noise. Time is the third dimension of the noise, so the land changes shape slowly instead of sliding past. A soft Gaussian bump follows the pointer, which is where the hill under your cursor comes from.

The lines are not geometry. The fragment shader takes the height at each pixel, multiplies it by the contour spacing, and draws a line wherever that value crosses a whole number. fwidth() measures how fast the value changes across one pixel, so lines stay one pixel wide whether they're near or far. Every fifth line is an index contour, drawn heavier like on a real topo map. Higher ground fades from ink toward rust, and distance fog dissolves the horizon into the paper.

Keeping it polite

The renderer only runs while the canvas is on screen and the tab is visible. Three.js loads after the rest of the page, never on Save-Data connections, and with reduced motion turned on you get a single still frame. On the home page the same module sits behind the header, masked away from the text.