topographic

Topographic terrain rendered with WebGL. Generate a land or turn a real place into a topographic terrain.

Fine granite in 3D: a summit ringed by pale contour lines, gullies fanning out to a dark horizon

Use it in plain HTML, in JavaScript or in React. In the playground, pick a real place or shape a land, then copy the code, a PNG image or a video.

Examples

Real places

Turn a real place into a terrain, from real elevation data. In the playground, pick a famous place or frame any area on the map.

Istanbul, with the Bosphorus between the two shores

Looks

Or generate a land of your own. You change its shape, the lines, the colours and the motion, and the same settings always draw the same land.

Survey ridge: pale lines around a long ridge on dark paper

Sea dunes: blue-green dune lines on deep teal

Stepped petals: plum lines on pale pink paper

3D

Every terrain can also be shown in 3D, and you can view it from any angle.

Night flower in 3D: blue rings rising to a soft dome

Terraces in 3D: amber lines stepping up a hill

Rocky spine in 3D: brown lines over a rough ridge on light paper

Try it: Playground

In the playground, choose a real place under Map or a look at the bottom, change the settings under Tune, and copy the code, a PNG image or a video under Export.

The playground in dark mode: Istanbul in 3D behind the page, the dock of looks along the bottom, the controls at the top right and a minimap of the place in the corner

The Map popover over Istanbul: a dark map with a white frame around the city, the place menu above, and Clear and Applied below

Library architecture

How topographic fits together: the web component, the React component and the playground call one public API, which also takes an optional heightfield. Settings resolve from the params table, styles and presets, and one WebGL renderer draws them as a 2D contour shader or a 3D terrain pass, whose frames record() encodes as video. — The web component, the React component and the playground all use the same code. One renderer draws both 2D and 3D.

One terrain, two views

From a place to a terrain

How a real place becomes a terrain in the playground: the Map popover gives a bounding box, a worker fetches Terrarium elevation tiles, stitches and resamples them to a 256 by 256 grid, scales the relief and smooths it, and the region hook hands the heightfield to the renderer with setHeightfield(). — The playground downloads height data for the area, smooths it and turns it into a grid of heights. setHeightfield() then draws it.

Nextshipyard →