Building an open world in the browser, part 6: Clipmaps changed the plot

By Oleg Sidorkin, CTO and Co-Founder of Cinevva

New here? Use the series guide. It explains what a spike is and links all parts.

Before Spike 10, our mental model was still "bigger world means more geometry." After Spike 10, the model became "constant geometry budget, camera-centered ring updates." That shift changed the project trajectory.

The idea behind geometry clipmaps is straightforward. You render terrain as a set of concentric rings centered on the camera. The innermost ring has the highest vertex density. Each ring $k$ outward doubles the vertex spacing, $s_k=s_0\cdot 2^k$, so it covers $4\times$ the ground area of the ring inside it.

That doubling is the whole trick. View distance grows geometrically with the number of rings, $d_{\text{view}}\approx s_0\cdot 2^L$, while the vertex cost grows only linearly:

$$V_{\text{total}}\approx N^2\cdot L$$

for $L$ rings of $N\times N$ vertices each. Doubling how far you can see costs one more ring, not four times the geometry. The triangle count stays roughly constant no matter the world size, because you always render the same $L$ rings at the same resolution.

Open Spike 10 in a new tab ↗ · View source

The practical trick was geomorphing at ring boundaries. When a vertex transitions from one LOD ring to the next, its height has to blend smoothly between the high-res and low-res sample. Without that, you get visible pops every time the camera moves and rings shift. We handled this with a blend factor based on the vertex's distance to the ring edge, interpolating height in the vertex shader:

$$h=\mathrm{lerp}(h_{\text{fine}},h_{\text{coarse}},\alpha ),\alpha =\mathrm{smoothstep}(d_{\text{near}},d_{\text{far}},d)$$

where $d$ is the vertex's distance from the camera. Inside the ring ($d\le d_{\text{near}}$) the vertex uses its full-resolution height; by the time it reaches the next ring ($d\ge d_{\text{far}}$) it has already migrated to the coarse height that ring will use, so there's nothing left to pop.

One subtle lesson came from camera movement testing. It's easy to judge clipmaps in static screenshots and miss transition artifacts. We spent time running constant-speed traversals through ring boundaries and watching for temporal noise. Screenshots lied. Motion told the truth.

This spike also gave us a clean architectural boundary. Near-field terrain could become dynamic and expensive over time, with volumetric editing, higher material complexity, and physics interaction. Far-field terrain could stay stable, predictable, and cheap. That separation became the backbone of every architectural decision from this point forward.

If you're evaluating clipmaps for your own project, test stress loops, not beauty shots. Long traversal paths, changing camera altitude, and repeated boundary crossings are what expose the real problems.

In part 7 we add volumetric meshing and move from "terrain as a surface" to "terrain as editable volume." That was the point where this project stopped being a renderer and started becoming a world editor.

Technology referenced in this chapter

Geometry clipmaps. Introduced by Losasso and Hoppe at SIGGRAPH 2004 (paper), geometry clipmaps render terrain as concentric square rings centered on the camera. Each ring is twice the area of the previous one at half the vertex resolution. The total vertex count is constant: roughly $N^2\cdot L$. With $N=256$ and $L=8$ levels, that's ${256}^2\times 8\approx \mathrm{524,000}$ vertices regardless of world size. The CPU updates heightmap data for each ring as the camera moves. The vertex shader reads height from a texture and displaces the flat grid. See our landscape guide on geometry clipmaps and GPU Gems 2, Chapter 2.

Geomorphing. The biggest visual artifact in terrain LOD is popping: vertices suddenly jump when a patch switches LOD level. Geomorphing eliminates this by blending vertex positions between LOD levels over a transition zone. Each vertex stores both its current-LOD height and its coarser-LOD height. A morph factor based on camera distance smoothly interpolates between them: morphedHeight = mix(fineLodHeight, coarseLodHeight, smoothstep(lodNear, lodFar, distance)). The transition zone is typically the outer 20% of each ring. At normal camera speeds, the transition is invisible. See geomorphing details.

CDLOD (Quadtree-Adaptive Clipmaps). An improvement on fixed-ring clipmaps by Strugar (2014, paper). Instead of concentric rings with uniform resolution, CDLOD uses a quadtree that adapts to terrain complexity. Flat areas use coarse nodes, while areas with high detail (cliffs, ridges) get finer subdivision. This matters for creator worlds where different chunks have vastly different complexity. See CDLOD in our landscape guide.

---

Part 6 of 12.
Previous: Part 5 - Budgeting the pretty stuff
Next: Part 7 - Marching cubes and the first real caves
Series guide: /blog/2026-02-25-open-world-browser-series-guide