Demos · Techniques · 01 / 12

Geometry clipmap

Nested rings of terrain centered on the camera: dense near, sparse far — one mesh, one draw, displacement in the vertex shader.

SNOWFLOW · desert WebGL · Three.js

How it works

Instead of one huge heightmapped plane, you build concentric rings (or one mesh with a ring-level attribute). Ring 0 has ~fine spacing; each outer ring doubles the world extent covered per vertex.

Vertex attributes: gridIndex, ringLevel only
VS places the vertex in world XZ from those indices + player center
Center is snapped to ring-0 vertex spacing so the near lattice doesn’t swim as the player moves
Height sampled from a noise / height texture in the VS
Every ring samples the same field at the same amplitude — vary only tessellation density, never the height, or the seams tear
CDLOD morph (implemented here) snaps each ring’s outer edge onto the next coarser lattice, so the two tessellations share vertices instead of leaving T-junction cracks

cost ≈ O(ringVerts) draws: 1 · no CPU rebuild

Why it matches the demos

SNOWFLOW ships 8 rings, 8.5 cm inner spacing, ~870 m radius, 333k tris — one static mesh. The desert explorer uses the same idea with Three.js TSL.

Controls

Inner spacing (relative)1.0

Height scale4.0

Color by ring level (teaching view)

Wireframe

Watch: the marker is the player, and the rings are centred on it. The ring colours hold still on screen while the heightfield flows through them — the terrain is world-locked, the lattice is not. Nothing is rebuilt on the CPU; only uCenter changes.

Try: drag to orbit. Toggle ring colors — outer rings cover more world space per triangle. That’s the LOD win. Turn on wireframe to see the tessellation halve at every ring boundary.

Source prompts

SNOWFLOW waterbending · Desert explorer

Technique notes · All techniques

← All demos Next: wind noise →

rings · tris