Eine offene Welt im Browser entwickeln, Teil 6: Clipmaps änderten den Kurs

Von Oleg Sidorkin, CTO und Mitgründer von Cinevva

Neu hier? Nutze den Serienleitfaden. Dort wird erklärt, was ein Spike ist, und du findest Links zu allen Teilen.

Vor Spike 10 lautete unser mentales Modell noch: „Eine größere Welt bedeutet mehr Geometrie.“ Nach Spike 10 wurde daraus: „Konstantes Geometriebudget, kamerazentrierte Ringaktualisierungen.“ Dieser Wandel änderte den weiteren Verlauf des Projekts.

Die Idee hinter Geometrie-Clipmaps ist unkompliziert. Das Terrain wird als eine Reihe konzentrischer Ringe gerendert, deren Mittelpunkt die Kamera bildet. Der innerste Ring hat die höchste Vertexdichte. Mit jedem weiter außen liegenden Ring $k$ verdoppelt sich der Vertexabstand, $s_k=s_0\cdot 2^k$, sodass er die $4\times$ so große Bodenfläche wie der nächstinnere Ring abdeckt.

Diese Verdopplung ist der ganze Trick. Die Sichtweite wächst geometrisch mit der Anzahl der Ringe, $d_{\text{view}}\approx s_0\cdot 2^L$, während die Vertexkosten nur linear steigen:

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

für $L$ Ringe mit jeweils $N\times N$ Vertices. Eine Verdopplung der Sichtweite kostet einen zusätzlichen Ring, nicht die vierfache Geometrie. Die Anzahl der Dreiecke bleibt unabhängig von der Weltgröße ungefähr konstant, weil stets dieselben $L$ Ringe mit derselben Auflösung gerendert werden.

Spike 10 in einem neuen Tab öffnen ↗ · Quellcode ansehen

Der entscheidende praktische Kniff war Geomorphing an den Ringgrenzen. Wenn ein Vertex von einem LOD-Ring zum nächsten übergeht, muss seine Höhe fließend zwischen der hochauflösenden und der niedrigauflösenden Abtastung überblendet werden. Andernfalls entstehen jedes Mal sichtbare Sprünge, wenn sich die Kamera bewegt und die Ringe verschoben werden. Wir lösten das mit einem Überblendfaktor, der auf dem Abstand des Vertex zum Ringrand basiert, und interpolierten die Höhe im Vertex-Shader:

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

wobei $d$ der Abstand des Vertex von der Kamera ist. Innerhalb des Rings ($d\le d_{\text{near}}$) verwendet der Vertex seine Höhe in voller Auflösung. Bis er den nächsten Ring erreicht ($d\ge d_{\text{far}}$), ist er bereits auf die gröbere Höhe übergegangen, die dieser Ring verwenden wird – es bleibt also nichts mehr übrig, was sichtbar springen könnte.

Eine subtile Erkenntnis ergab sich aus den Tests der Kamerabewegung. Clipmaps lassen sich leicht anhand statischer Screenshots beurteilen, wobei Übergangsartefakte unbemerkt bleiben. Wir investierten viel Zeit in Durchläufe mit konstanter Geschwindigkeit über Ringgrenzen hinweg und achteten dabei auf zeitliches Rauschen. Screenshots logen. Bewegung zeigte die Wahrheit.

Dieser Spike verschaffte uns außerdem eine klare architektonische Grenze. Das Terrain im Nahbereich konnte mit der Zeit dynamisch und aufwendig werden – mit volumetrischer Bearbeitung, komplexeren Materialien und Physikinteraktionen. Das Terrain im Fernbereich konnte stabil, vorhersehbar und günstig bleiben. Diese Trennung wurde zum Rückgrat jeder weiteren Architekturentscheidung.

Wenn du Clipmaps für dein eigenes Projekt in Betracht ziehst, teste Belastungsschleifen statt Hochglanzaufnahmen. Lange Bewegungsstrecken, wechselnde Kamerahöhen und wiederholte Grenzübertritte bringen die tatsächlichen Probleme ans Licht.

In Teil 7 ergänzen wir volumetrisches Meshing und wechseln von „Terrain als Oberfläche“ zu „Terrain als editierbares Volumen“. Ab diesem Punkt war das Projekt nicht mehr nur ein Renderer, sondern entwickelte sich zu einem Welteditor.

In diesem Kapitel erwähnte Technologien

Geometrie-Clipmaps. Geometrie-Clipmaps wurden von Losasso und Hoppe auf der SIGGRAPH 2004 vorgestellt (Paper) und rendern Terrain als konzentrische quadratische Ringe um die Kamera. Jeder Ring deckt bei halbierter Vertexauflösung die doppelte Fläche des vorherigen Rings ab. Die Gesamtzahl der Vertices bleibt konstant: ungefähr $N^2\cdot L$. Bei $N=256$ und $L=8$ Ebenen sind das unabhängig von der Weltgröße ${256}^2\times 8\approx \mathrm{524,000}$ Vertices. Die CPU aktualisiert die Heightmap-Daten jedes Rings, während sich die Kamera bewegt. Der Vertex-Shader liest die Höhe aus einer Textur und verformt damit das flache Raster. Siehe unseren Landschaftsleitfaden zu Geometrie-Clipmaps und GPU Gems 2, Kapitel 2.

Geomorphing. Das auffälligste visuelle Artefakt beim Terrain-LOD ist das sogenannte Popping: Vertices springen plötzlich, wenn ein Patch die LOD-Stufe wechselt. Geomorphing verhindert dies, indem die Vertexpositionen innerhalb einer Übergangszone zwischen den LOD-Stufen überblendet werden. Jeder Vertex speichert sowohl seine Höhe im aktuellen LOD als auch seine Höhe im gröberen LOD. Ein von der Kameradistanz abhängiger Morph-Faktor interpoliert fließend zwischen beiden: morphedHeight = mix(fineLodHeight, coarseLodHeight, smoothstep(lodNear, lodFar, distance)). Die Übergangszone umfasst üblicherweise die äußeren 20 % jedes Rings. Bei normalen Kamerageschwindigkeiten ist der Übergang unsichtbar. Siehe die Details zum Geomorphing.

CDLOD (Quadtree-adaptive Clipmaps). Eine von Strugar entwickelte Verbesserung gegenüber Clipmaps mit festen Ringen (2014, Paper). Anstelle konzentrischer Ringe mit einheitlicher Auflösung verwendet CDLOD einen Quadtree, der sich an die Komplexität des Terrains anpasst. Flache Bereiche verwenden grobe Knoten, während Bereiche mit vielen Details wie Klippen und Bergrücken feiner unterteilt werden. Das ist für von Creatorn erstellte Welten wichtig, in denen sich die Komplexität einzelner Chunks stark unterscheiden kann. Siehe CDLOD in unserem Landschaftsleitfaden.

---

Teil 6 von 12.
Zurück: Teil 5 – Das Budget für die schönen Dinge
Weiter: Teil 7 – Marching Cubes und die ersten echten Höhlen
Serienleitfaden: /de/blog/2026-02-25-open-world-browser-series-guide