Leitfaden zur Open-World-im-Browser-Serie

Von Oleg Sidorkin, CTO und Mitgründer von Cinevva

Diese Seite ist die zentrale Navigation für die gesamte Serie.

Wenn du über einen beliebigen Teil hierhergekommen bist, beginne hier.

Update vom März 2026: Wir haben in Teil 12 einen externen Abgleich mit der Implementierung aus den Vuntra-City-Devlogs hinzugefügt und den begleitenden Technikleitfaden für Open Worlds im Browser um dieselben Erkenntnisse erweitert.

Update vom April 2026: Die Teile 13–14 behandeln die Terrain-Modellierung (Spikes 25–27) sowie die visuelle und spielmechanische Ebene: Texturierung mit mehreren Materialien, instanziierte Vegetation und einen Charakter-Controller mit HM+SDF-Kollision (Spikes 28–30).

Update vom Mai 2026: Die Serie wuchs auf 29 Teile an. Die Teile 15–29 behandeln die lange mittlere Phase der Entwicklung, Multiplayer-Terrain und Wasser, eine Überarbeitung der Codestruktur, Animationen und KI-gestützte Verteilung, Impostors und Parallaxe, den Sichtbarkeitspuffer, der sich nicht auszahlte, Wolken und Meshlet-Culling, gebündelte Avatare und räumlichen Sprachchat, Weltpersistenz und GPU-Wind, universelle Charaktere, drei Ansätze für Wasser, eine prozedurale Insel, Gras und Okklusion sowie einen austauschbaren Charakter-Controller, der jeden Körper steuern kann (Spikes 31–60).

Update vom Juni 2026: Teil 30 ergänzt eine kollisionsbewusste Kamera, einen Federarm mit austauschbarem Collider-Vertrag und eine Signed-Distance-Sonde, die die Kamerasicht nicht nur an Hügeln, sondern auch an Überhängen und Höhlendecken stoppt.

Was „Spike“ in dieser Serie bedeutet

Ein Spike ist ein kurzes, gezieltes Experiment.

Jeder Spike prüft eine einzelne riskante Fragestellung. Wir halten den Umfang eng begrenzt, messen das Wesentliche und entscheiden anschließend über die nächsten Schritte. Betrachte ihn als Lerninstrument, nicht als ausgereiftes Feature.

In diesem Projekt sind Spikes größtenteils eigenständige Seiten unter /spikes/*, die du direkt ausprobieren kannst.

Die Serie in der richtigen Reihenfolge

1. Teil 1: Wir versuchten zuerst, alles kaputtzumachen
2. Teil 2: Worker-Physik und die Angst vor Eingabeverzögerung
3. Teil 3: Die unspektakulären Spikes, die uns retteten
4. Teil 4: Streaming vor aufwendigem Terrain
5. Teil 5: Ein Budget für die hübschen Dinge
6. Teil 6: Clipmaps veränderten den Verlauf
7. Teil 7: Marching Cubes und die ersten echten Höhlen
8. Teil 8: Integration, ohne unsere Ausgangsbasis zu verlieren
9. Teil 9: Transvoxel begann mit einem Grundgerüst
10. Teil 10: Nahtchaos und der Bosskampf an der Ecke
11. Teil 11: Richtlinienmodus statt fest codiertem Modus
12. Teil 12: Ringe, Himmelsnebel und was wir wieder so machen würden
13. Teil 13: Terrain-Modellierung und das Ende der mathematischen Funktion
14. Teil 14: Die Welt erwacht zum Leben
15. Teil 15: Erst die Ausgangsbasis ersetzen, dann synchronisieren
16. Teil 16: Eine Struktur für eine Welt, die ständig wächst
17. Teil 17: Animationen ohne Retargeting und eine Live-Asset-Suche
18. Teil 18: Ein Verteilungspinsel, der wie KI-Platzierung wirkt
19. Teil 19: Der Impostor, der einen Wald überstehen muss
20. Teil 20: Vorgetäuschte Tiefe auf einer flachen Ebene
21. Teil 21: Ein schnellerer Renderer, der nicht schneller war
22. Teil 22: Beleuchtbare Wolken und Culling, das gefüttert werden muss
23. Teil 23: Fünfzig Avatare und eine Stimme im Raum
24. Teil 24: Eine Welt speichern und Wind sichtbar machen
25. Teil 25: Ein Skelett für jedes Outfit
26. Teil 26: Drei Wege, Wasser zu erzeugen
27. Teil 27: Eine Insel aus Rauschen und Boden, der wie Boden aussieht
28. Teil 28: Gras bis zum Horizont und Boden, der sich selbst verdeckt
29. Teil 29: Ein Controller für jeden Körper
30. Teil 30: Eine Kamera, die Wände respektiert

Interaktive Spike-Übersicht

Beginne hier, wenn du dich direkt durch die technische Zeitleiste klicken möchtest.

Spike 1 Terrain und Instanziierung · Quellcode
Spike 2 Worker-Physik · Quellcode
Spike 3, Lasttest für Durable-Object-Broadcasts, lief als Dienstskript und nicht als eigenständige Seite
Spike 4, Qualitätsbeschränkungen für Mobilgeräte, getestet über einen Abfrageparameter von Spike 1
Spike 5, Zuverlässigkeit des LLM-Verhaltens, lief als Skript und nicht als eigenständige Seite
Spike 6 Laden und Austauschen von Chunks · Quellcode
Spike 7 Vegetation aus Dichtekarten · Quellcode
Spike 8 Kosten des Terrain-Materials · Quellcode
Spike 9 Budget für kaskadierte Schatten · Quellcode
Spike 10 Clipmaps und Geomorphing · Quellcode
Spike 11 Heightmap-Chunk-Streaming · Quellcode
Spike 12 WebGPU Marching Cubes · Quellcode
Spike 13 Ausgangsbasis für die WebGPU-Integration · Quellcode
Spike 14 schrittweise Stabilisierung · Quellcode
Spike 15 Naht-Grundgerüst · Quellcode
Spike 16 erste Transvoxel-Fläche · Quellcode
Spike 17 duales MC-LOD · Quellcode
Spike 18 Heightmap-Naht · Quellcode
Spike 19 Ecke mit gemischter Auflösung · Quellcode
Spike 20 GPU-Ecknaht · Quellcode
Spike 21 GPU-MC-Ecknaht · Quellcode
Spike 22 Rückfall von MC auf HM · Quellcode
Spike 23 richtlinienbasierte Chunk-Modi · Quellcode
Spike 24 Clipmap-Ringe und Himmelsnebel · Quellcode
Spike 25 Heightmap-Pinsel auf abgetasteten Daten · Quellcode
Spike 26 SDF-Pinsel per GPU-Compute · Quellcode
Spike 27 Integration von HM + MC + Pinsel · Quellcode
Spike 28 Texturierung mit mehreren Materialien · Quellcode
Spike 29 Vegetation und Shader-Gras · Quellcode
Spike 30 Terrain-Physik und Charakter-Controller · Quellcode
Spike 31 Multiplayer-Terrain-Synchronisierung · Quellcode
Spike 32 Wasser und Schwimmen · Quellcode
Spike 33 Überarbeitung der Codestruktur · Quellcode
Spike 34 Bearbeitung direkt in der Welt · Quellcode
Spike 35 Kampfanimationen und Retargeting · Quellcode
Spike 36 Live-Suche nach Assets auf Poly Haven · Quellcode
Spike 37 KI-gestützte Verteilung von Requisiten · Quellcode
Spike 38 oktaedrische Impostors · Quellcode
Spike 39 Parallax-Occlusion-Mapping · Quellcode
Spike 40 Renderer mit Sichtbarkeitspuffer · Quellcode
Spike 41 Impostors in einem Wald · Quellcode
Spike 42 Behebung des Impostor-Flimmerns · Quellcode
Spike 43 Atmosphäre und volumetrische Wolken · Quellcode
Spike 44 Meshlet-Hi-Z-Culling · Quellcode
Spike 45 gebündeltes Avatar-Skinning und Netzwerksynchronisierung · Quellcode
Spike 46 räumlicher Sprachchat · Quellcode
Spike 47 serverautoritative Weltpersistenz · Quellcode
Spike 48, Integration des Avatar-Rigs, wurde von späteren Spikes als gemeinsamer Code wiederverwendet (keine eigenständige Seite)
Spike 49 GPU-Wind für Requisiten und Blattwerk · Quellcode
Spike 50 universelle Charaktere und tragbare Gegenstände · Quellcode
Spike 51 Wasser mit Screen-Space-Reflexionen · Quellcode
Spike 52 Wasser mit planaren Spiegelungen · Quellcode
Spike 53 produktionsreife Wasserbibliothek · QuellcodeSpike 54 prozedurale Inselgenerierung · Quellcode
Spike 55 Terrain-Shading und Aufbrechen von Kachelmustern · Quellcode
Spike 56 GPU-basiertes Gras aus gekreuzten Quads · Quellcode
Spike 57 Verdeckungsberechnung für Terrain · Quellcode
Spike 58 austauschbarer Charakter-Controller · Quellcode
Spike 59 Controller mit einem echten Avatar · Quellcode
Spike 60 Synty-Polygon-Animationen · Quellcode