TerrainRelief

Options

paper #fbfaf4

css colour

The paper behind the land. Match it to your page background or the horizon reads as a hard edge. `auto` takes it from the page, so the effect adopts whatever it is dropped onto.

land #f4f1e7

css colour

The land itself. Keep it close to the paper but not identical, or the horizon disappears entirely. A light-dark() pair picks by the ground it lands on.

ink #6f665a

css colour

The contour lines. A warm grey reads as print; pure black reads as a wireframe. A light-dark() pair picks by the ground it lands on.

indexInk #c44400

css colour

Every fifth line is an index contour, the one a real map would label. This is the obvious place for your own colour. A light-dark() pair picks by the ground it lands on.

relief 1.9

0.2 to 5, good: 1 to 2.4

Height of the land. Past about 3 the ridges are steeper than the sun can light and the far side goes black.

scale 0.3

0.1 to 2, good: 0.2 to 0.5

Size of the landforms. Lower is broader country with fewer, longer ridges.

density 1.7

0.5 to 12, good: 1.2 to 3

Contour lines per unit of height. More lines reads as steeper country. Past about 8 the lines are closer than the pixels and the map turns grey.

weight 0.72

0 to 1, good: 0.45 to 0.85

Weight of the lines. Zero is bare land with no map printed on it, which is a perfectly good backdrop in its own right.

elevation 26

5 to 80 deg, good: 15 to 40

Sun height above the horizon. Low rakes the ridges and is most of where the depth comes from. High flattens the whole thing into a map.

azimuth 38

0 to 360 deg, good: 20 to 70

Sun direction around the compass. Convention on a printed map is light from the north west, which is about 315.

tilt 0.72

0 to 1, good: 0.3 to 0.7

Camera height. Zero is down on the deck with a horizon, one looks straight down at a map. The interesting ground is in between.

zoom 1.3

0.3 to 2, good: 0.45 to 0.8

How much of the frame the land fills.

drift 0.2

0 to 1.5

How far the land travels through noise space on its circuit. Separate from how fast it travels, and the one that matters behind a heading: a slow period still moves the same ground the same distance, and distance is what the eye catches. At 0 the land is fixed and the only thing that moves is nothing.

period 36

4 to 120 s, good: 6 to 40

Seconds for one loop of the morph. The land travels a closed orbit through noise space and returns exactly. Slow on purpose: ground that visibly moves behind a heading is the fastest way to lose a reader.

reducedMotionTime 3

0 to 120 s

The single frame shown when the user prefers reduced motion. Any time works here: a still relief is a map, which is a finished thing to look at.

What it needs

Category

Backdrops, an effect

Dependencies

three@>=0.160.0

Browser

WEBGL1

Frame budget

~6 ms · 1 context

Pinned to

v0.13.0

• three.js must already be a dependency of the project. It is not bundled
• The displacement runs in the vertex shader, so a 160 square grid is one upload and costs memory rather than frame time
• The same displacement is injected into a custom depth material. Without that the land casts the shadow of a flat plane and the relief detaches from its own shading
• 25,600 vertices, four octaves of noise each, twice: once for the surface and once for the shadow pass
• Nothing is uploaded per frame. Only uniforms change

Concept credit: real-time terrain with shader displacement, by Codrops. The implementation here is written from scratch.