Procedural elevation
Two octaves of Perlin noise sculpt the ground on the GPU, and the landscape drifts endlessly towards you.
Real-time WebGL · Three.js · GLSL
Terrain drawn in
flowing light
A procedurally generated landscape traced by glowing contour lines. Every elevation band carries its own colour, and every colour keeps moving.
Features
Built from noise, painted with shaders
Chromatic contour lines
Major lines carry a flowing gradient while the mini lines between them each get their own hue and travelling pulses.
Scroll-driven camera
Scrolling flies the camera through the scene, reshapes the terrain and shifts the palette. Scroll faster and the colours rush.
How it works
One plane, three passes of math
- 01
Displace
The vertex shader lifts a 600×600 plane using layered noise, flattening a valley in the middle.
- 02
Contour
The fragment shader slices the elevation into bands and draws anti-aliased lines with
fwidth. - 03
Colour
A cosine palette, offset by position, time and line index, keeps every line flowing.
// contour line, 1.0 on every band edge
float contour(float v, float t) {
float d = abs(fract(v + 0.5) - 0.5);
return 1.0 - smoothstep(0.0, fwidth(v) * t, d);
}
// flowing hue for the major lines
float hue = pos.x * 0.06 - uTime * 0.12;
vec3 color = palette(hue);Playground
Make it yours
Every control updates the live terrain behind this page. Want to get hands on? Fly around it, sculpt hills and drag them across the landscape.
Orbit · pan · zoom · sculpt · drag