Spielwiese

Dragon Voyage

Ein kleines Echtzeit-3D-Spiel direkt im Browser – und alle, die gerade auf dieser Seite sind, segeln im selben Hafen. Entzündet gemeinsam die schwimmenden Laternen, fahrt durch die Torii-Tore, rettet Schiffbrüchige und schlagt eine Piratenflotte zurück, an Bord einer Dschunke mit goldener Drachen-Galionsfigur.

  • three.js · WebGL
  • Live-Multiplayer
  • 5 Quests · Piratenflotte
  • 0 Bild- oder Modelldateien
  • Tastatur, Maus und Touch

So ist es gemacht

Alles, was du siehst, entsteht im Code

Es gibt keine heruntergeladenen Modelle, Texturen oder Sounds. Der ganze Hafen – Wasser, Berge, Stadt, Schiffe, Piraten und Drache – entsteht beim Laden aus rund 7.000 Zeilen TypeScript und GLSL.

  • Nativ im Browser

    Gebaut mit three.js auf WebGL statt als Unity- oder Unreal-Export: kein Plugin, keine mehrere Megabyte große Runtime, geladen erst, wenn du diese Seite öffnest.

  • Ein gemeinsamer Hafen

    Ein winziger WebSocket-Relay ohne Abhängigkeiten bringt alle auf der Seite in dieselbe Session. Wer am längsten verbunden ist, hostet die Quests und die Piraten-KI; Schiffe, Kanonenfeuer und Fortschritt werden etwa zehnmal pro Sekunde synchronisiert, und ohne Verbindung läuft das Spiel solo weiter.

  • Physikalisch basierter Ozean

    Sechs Gerstner-Wellen laufen identisch auf GPU und CPU, deshalb stampft und rollt das Schiff auf genau den Wellen, die du siehst. Himmels- und Bergspiegelungen, Fresnel, Gischt und Laternenglitzern werden pro Pixel berechnet.

  • Prozedurale Welt

    Noise-Funktionen formen die Bucht, die schroffen Berge und die Inseln; fünftausend instanzierte Kiefern, eine terrassierte Stadt mit leuchtenden Fenstern und eine fünfstöckige Pagode werden nach Regeln platziert, nicht von Hand.

  • Ein lebendiges Schiff

    Der Rumpf der Dschunke ist aus mathematischen Spanten geformt. Die Lattensegel sind Stoffnetze, die sich nach Lee blähen und beim Reffen einholen, und der goldene Drache ist aus Kurven und auf ein Canvas gemalten Schuppentexturen modelliert.

  • Filmische Bildqualität

    Eine HDR-Pipeline mit bildbasierter Beleuchtung aus dem Dämmerungshimmel, Bloom an jeder Laterne, ACES-Tonemapping, Luftperspektive, die in den Sonnenuntergang übergeht, Vignette und Filmkorn.

  • Gebaut für flüssiges Spielen

    Eine adaptive Auflösung hält die Bildrate, das Spiel pausiert, sobald es aus dem Bild scrollt oder der Tab verborgen ist, und alle GPU-Ressourcen werden freigegeben, wenn du die Seite verlässt.

Entwickelt in einem agentischen Workflow mit Claude Code als KI-Pair-Programmer – genauso, wie ich Produktivsoftware baue.