Eine offene Welt im Browser erstellen, Teil 11: Richtlinien statt fest codierter Modi
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.
Nach dem Kapitel über das Naht-Chaos mussten wir aufhören, nur zu reagieren, und stattdessen klare Regeln aufstellen.
Spike 23 ersetzte Ad-hoc-Verhalten durch explizite Richtlinien. Statt Chunks einfach das tun zu lassen, was ihr lokaler Zustand nahelegte, traf nun ein zentrales Richtliniensystem die Entscheidungen. Welche LOD-Stufe erhält dieser Chunk? Wird er als Heightmap oder mit Marching Cubes gerendert? Benötigt er Übergangszellen, und wenn ja, an welchen Seiten? Die Antworten kamen von einer Richtlinienfunktion, die den Abstand zur Kamera, den Bearbeitungsverlauf und die Auflösungszustände benachbarter Chunks auswertete.
Spike 23 in einem neuen Tab öffnen ↗ · Quellcode ansehen
Die entfernungsbasierte LOD-Zuweisung verwendete konzentrische Ringe um die Kamera, ähnlich dem Clipmap-Konzept, jedoch auf das Chunk-Raster angewendet. Chunks in Ring 0 erhalten MC mit voller Auflösung. Ring 1 erhält MC mit halber Auflösung. Ring 2 und alle weiteren verwenden den Heightmap-Modus. Die Nachbarschaftsbedingung war entscheidend: Für jeweils zwei benachbarte Chunks fordern wir
Die HM/MC-Umschaltlogik prüfte die Bearbeitungs-Bitmap jedes Chunks. Wenn ein Chunk volumetrische Bearbeitungen enthielt – etwa Höhlen, Tunnel oder Terrain-Modellierungen –, blieb er unabhängig von der Entfernung im MC-Modus. Unbearbeitete Chunks konnten in den Heightmap-Modus wechseln, sobald sie weit genug entfernt waren. Dieser hybride Ansatz gab uns volumetrische Freiheit, wo sie wichtig war, und Effizienz, wo sie nicht benötigt wurde.
Von außen wirkte dieser Spike kleiner als einige der vorherigen. In der Praxis verbesserte er die Entwicklungsarbeit erheblich.
Wenn dein System erklären kann, warum ein Chunk den Modus gewechselt hat, verbringst du weniger Zeit mit Rätselraten. Wir fügten farbcodierte Overlays hinzu: Grün für Heightmap-Chunks, Blau für MC-Chunks und Orange für Seiten mit aktiven Übergängen. Wenn für die Sichtbarkeit von Nähten eigene Render-Steuerelemente vorhanden sind, sinkt die Mehrdeutigkeit bei der visuellen Fehlersuche. Wenn Zeichenbereiche explizit an die aktiven Vertex-Anzahlen aus dem Richtliniensystem gekoppelt sind, verschwenden Geister veralteter Geometrie nicht mehr deinen Nachmittag.
In diesem Spike überarbeiteten wir außerdem das Kameraverhalten. Frühere Spikes hatten eine einfache Orbit-Steuerung, die für Screenshots ausreichte, zur Reproduktion von Fehlern aber nutzlos war. Spike 23 ergänzte eine WASD-Flugkamera mit konfigurierbarer Geschwindigkeit, umschaltbarer Höhenfixierung und Positionsanzeige. Das klingt nach einer Kleinigkeit. Es machte jedoch den Unterschied zwischen „Ich habe irgendwo in der Nähe dieses Bergrückens einen Fehler gesehen“ und „Der Fehler tritt an Position (142, 12, -67) mit Blick nach Nordwesten auf“ aus.
Die zentrale Erkenntnis dieses Kapitels lautet, dass Richtlinien die Komplexität nicht verringerten. Sie organisierten sie. Es gab weiterhin dieselbe Anzahl an Sonderfällen. Doch nun hatte jeder Sonderfall einen Namen, eine Auslösebedingung und eine Stelle im Code, an der man einen Haltepunkt setzen konnte. Das ist eine andere Art von Erfolg – und genau sie entscheidet darüber, ob sich ein System weiterentwickeln kann oder unter seinem eigenen Gewicht zusammenbricht.
Am Ende von Spike 23 hatten wir eine Verhaltensebene für das Nahfeld, die vorhersehbar genug war, um sie mit einer Clipmap-Ringstrategie für das Fernfeld zu verbinden, ohne ständig Angst vor Wechselwirkungsfehlern haben zu müssen.
In Teil 12 behandeln wir Spike 24, in dem Ringübergänge, Skybox-Nebel und die Shader-Integration auf Ebene der Three.js-Version dieses Kapitel des Projekts abschließen.
In diesem Kapitel erwähnte Technologien
Entfernungsbasierte LOD-Richtlinie. Eine zentrale Funktion, die jedem Chunk anhand des Abstands zur Kamera, des Bearbeitungsverlaufs und der Zustände benachbarter Chunks eine LOD-Stufe und einen Rendermodus zuweist. Konzentrische Entfernungsringe bestimmen das grundlegende LOD: Ring 0 = MC mit voller Auflösung, Ring 1 = MC mit halber Auflösung, Ring 2+ = Heightmap-Modus. Die Richtlinienfunktion wird bei jeder Bewegung der Kamera pro Frame ausgeführt und löst Chunk-Übergänge aus. Dadurch werden Ad-hoc-Entscheidungen einzelner Chunks durch ein vorhersehbares, gut debuggbares Regelsystem ersetzt. Das entsprechende Compute-Shader-Verfahren findest du unter GPU-gesteuerte LOD-Auswahl.
Nachbarschaftsbedingungen. Der Transvoxel-Algorithmus unterstützt ausschließlich Auflösungsverhältnisse von 2:1. Wenn sich zwei benachbarte Chunks um mehr als eine LOD-Stufe unterscheiden – beispielsweise LOD 0 neben LOD 2 –, können die Übergangstabellen keine gültige Nahtgeometrie erzeugen. Das Richtliniensystem erzwingt diese Bedingung, indem es den Detailgrad des gröberen Chunks erhöht, sobald der LOD-Unterschied größer als 1 ist. Diese Weitergabe von Bedingungen kann Kaskaden auslösen: Wird der Detailgrad eines Chunks erhöht, müssen möglicherweise auch seine Nachbarn angepasst werden. Die Implementierung ist ein einfacher iterativer Durchlauf, der bei typischen Rasterkonfigurationen nach zwei bis drei Iterationen konvergiert.
Bearbeitungs-Bitmap für die Modusauswahl. Jeder Chunk verwaltet eine Bitmap, die festhält, ob er volumetrische SDF-Bearbeitungen enthält, etwa Höhlen, Tunnel oder Modellierungen. Chunks mit Bearbeitungen bleiben unabhängig von der Entfernung im Marching-Cubes-Modus, sodass die Änderungen des Creators erhalten bleiben. Unbearbeitete Chunks wechseln in ausreichender Entfernung von der Kamera in den Heightmap-Modus und sparen dadurch Rechenleistung und Speicher. Die Bitmap besteht aus einem einzelnen Flag pro Chunk, kann aber um die Erfassung der Bearbeitungsdichte erweitert werden, um eine feiner abgestufte Modusauswahl zu ermöglichen.
Debug-Visualisierungs-Overlays. Farbcodiertes Chunk-Rendering, bei dem Grün für den Heightmap-Modus, Blau für den MC-Modus und Orange für Seiten mit aktiven Übergängen steht. Hinzu kommen Overlays pro Chunk mit Nummern der LOD-Stufen, Modusbezeichnungen und Drahtgitter-Umschaltern. Dabei handelt es sich um Entwicklungswerkzeuge und nicht um ausgelieferte Funktionen. Bei der Fehlersuche in LOD-Übergängen und Nahtartefakten machen sie sich jedoch immer wieder bezahlt. Zusammen mit einer WASD-Flugkamera, die die genaue Weltposition anzeigt, verwandeln sie „Ich habe irgendwo einen Fehler gesehen“ in „Der Fehler tritt bei (142, 12, -67) mit dieser LOD-Konfiguration auf“.
Teil 11 von 12.
Zurück: Teil 10 – Naht-Chaos und der Bosskampf an den Ecken
Weiter: Teil 12 – Ringe, Himmelsnebel und was wir wieder genauso machen würden
Serienleitfaden: /de/blog/2026-02-25-open-world-browser-series-guide