Eine offene Welt im Browser entwickeln, Teil 9: Transvoxel begann mit einem Gerüst
Von Oleg Sidorkin, CTO und Mitgründer von Cinevva
Neu hier? Nutze den Serienleitfaden. Er erklärt, was ein Spike ist, und verlinkt alle Teile.
An Nähten stirbt das Vertrauen.
Alles kann stabil wirken, bis zwei Auflösungen aufeinandertreffen. Ein Chunk mit LOD 0 liegt neben einem Chunk mit LOD 1. Ihre Meshes werden unabhängig voneinander erzeugt. An ihrer gemeinsamen Grenze stimmen die Vertexpositionen nicht überein, weil der Chunk mit der niedrigeren Auflösung nur die halbe Gitterdichte hat. Das Ergebnis sind sichtbare Risse, T-Junctions und flackernde Kanten.
Der Transvoxel-Algorithmus löst dieses Problem, indem er entlang der Grenzfläche zwischen zwei Chunks mit unterschiedlicher Auflösung spezielle Übergangszellen erzeugt. Diese Zellen nehmen gleichzeitig Samples aus dem hochauflösenden und dem niedrigauflösenden Gitter und erzeugen Dreiecke, welche die beiden Oberflächen miteinander vernähen. Der Algorithmus verwendet eigene Lookup-Tabellen, getrennt von den regulären Marching-Cubes-Tabellen, mit 512 Fällen für Übergangszellen.
Zu diesem Zeitpunkt hatten wir bereits genug Narben von Integrationen, um es besser zu wissen, als die Implementierung zu überstürzen.
Spike 15 hatte eine einzige Aufgabe: einen verlässlichen Nahtteststand zu bauen, bevor wir den vollständigen Algorithmus anfassten. Wir richteten eine kontrollierte Umgebung ein, in der zwei Chunks mit bekannten SDF-Daten und unterschiedlichen Auflösungen nebeneinanderlagen. Dazu kamen Visualisierungsoptionen, mit denen sich Haupt-Mesh, Naht-Mesh, Wireframe und Normalen unabhängig voneinander ein- und ausblenden ließen.
Spike 15 in einem neuen Tab öffnen ↗ · Quellcode ansehen
Nachdem der Teststand stabil war, validierte Spike 16 die tabellengesteuerte Erzeugung von Übergangszellen auf einer einzelnen Seite. Wir wählten eine achsenparallele Seite (+X-Grenze), implementierten die Auswertung der Übergangszellen ausschließlich für diese Seite und verglichen die Ausgabe mit den Referenzdaten aus dem Transvoxel-Paper.
Spike 16 in einem neuen Tab öffnen ↗ · Quellcode ansehen
Wir testeten bewusst immer nur eine Seite, weil die Verdrahtung der Übergangstabellen viele voneinander unabhängige Fehlerquellen hat. Die Berechnung des Fallindex hängt davon ab, dass die richtigen Vertices aus beiden Gittern abgetastet werden. Die Vertexindizierung innerhalb einer Übergangszelle verwendet ein anderes Nummerierungsschema als reguläre Marching-Cubes-Zellen. Die Winding Order muss mit dem Haupt-Mesh übereinstimmen, sonst verschluckt das Backface Culling die Nahtdreiecke. Wenn man alle sechs Seiten gleichzeitig testet, wirkt jedes Symptom zufällig. Testet man dagegen eine Seite gründlich, erhält man aussagekräftige Fehler, die sich gezielt debuggen lassen.
Ein weiterer, weniger offensichtlicher Erfolg dieser Phase war die Investition in Werkzeuge. Wir bauten früh Sichtbarkeitsschalter, eine reine Nahtdarstellung und farbcodierte LOD-Indikatoren. Damals fühlten sich diese Bedienelemente wie zusätzlicher Aufwand an. Später, als die Sonderfälle hässlich wurden, machten sie sich immer wieder bezahlt, weil wir genau isolieren konnten, welche Nahtzellen sich falsch verhielten.
Am Ende dieses Kapitels waren wir nicht „mit den Nähten fertig“. Aber wir waren nun in einer Position, in der wir Nahtfehler nachvollziehen konnten, anstatt sie zu fürchten.
In Teil 10 beginnt die eigentliche Achterbahnfahrt. Ecken mit gemischten LODs, umgekehrte Winding Orders, Geisterartefakte durch partielles Überzeichnen und jene Momente, in denen man sich sicher ist, dass der Algorithmus falsch ist, nur um dann festzustellen, dass ein Draw Range über die aktive Vertexanzahl hinausliest.
In diesem Kapitel erwähnte Technologie
Der Transvoxel-Algorithmus. Transvoxel wurde von Eric Lengyel entwickelt (transvoxel.org) und löst das schwierigste Problem beim LOD von volumetrischem Terrain: Nähte zwischen Chunks mit unterschiedlichen Auflösungen. Wenn ein hochauflösender Chunk neben einem niedrigauflösenden Chunk liegt, stimmen die Marching-Cubes-Meshes an der Grenze nicht überein, wodurch sichtbare Risse entstehen. Transvoxel fügt entlang der Grenzflächen spezielle Übergangszellen ein, die den Auflösungsunterschied mit zusätzlichen, zu beiden Seiten passenden Dreiecken überbrücken. Der Algorithmus verwendet eigene Lookup-Tabellen, getrennt von regulärem Marching Cubes, mit 512 Fällen für Übergangszellen, die auf 73 Äquivalenzklassen reduziert werden. Er ist patentfrei und wurde in veröffentlichten Spielen wie Space Engineers und Astroneer eingesetzt. Siehe unseren Landschaftsleitfaden zu Transvoxel.
Übergangszellen. Spezielle Zellen, die an der Grenzfläche zwischen zwei LOD-Stufen erzeugt werden. Anders als reguläre Marching-Cubes-Zellen, die 8 Ecken eines einzigen Gitters abtasten, nehmen Übergangszellen gleichzeitig Samples aus dem hochauflösenden und dem niedrigauflösenden Gitter. Die hochauflösende Fläche hat
LOD-Übergangsnähte. Die Grenze zwischen zwei Mesh-Auflösungen, an der eine nicht übereinstimmende Topologie sichtbare Artefakte verursacht. Ohne Vernähung entstehen zwischen einem Chunk mit LOD 0 (1-m-Gitter) und einem benachbarten Chunk mit LOD 1 (2-m-Gitter) T-Junctions: Das feine Mesh besitzt Vertices entlang der Grenze, die nicht mit dem groben Mesh geteilt werden. Dadurch entstehen Risse, durch die Licht hindurchscheint. Transvoxel, Geomorphing und Skirt-Geometrie sind drei Ansätze zur Behebung dieser Nähte. Für volumetrisches Terrain ist Transvoxel die Standardlösung, da Geomorphing nur bei Höhenkarten funktioniert. Siehe LOD für volumetrisches Terrain.
Teil 9 von 12.
Zurück: Teil 8 – Integration, ohne unsere Ausgangsbasis zu verlieren
Weiter: Teil 10 – Nahtchaos und der Bosskampf an den Ecken
Serienleitfaden: /de/blog/2026-02-25-open-world-browser-series-guide