Browsergames: Wie wir Relic Hunter mit Three.js und KI-Bildern gebaut haben

Ich wollte, dass Relic Hunter: Tempeleinsturz wie ein echter Tempel aussieht und nicht wie die Spielversion eines Tempels. Die KI-Bilder hatten gemeißelten Stein, warmes Fackellicht und tiefe Schatten. Mein erster Three.js-Entwurf bestand aus Kisten mit einer sich wiederholenden braunen Textur.

So habe ich diese Lücke geschlossen und aus einem einzigen KI-generierten Gang ein begehbares Labyrinth gemacht. Relic Hunter ist ein kostenloses Browserspiel, das auf Desktop und Handy läuft, ohne Download und ohne Installation. Hinter diesem einfachen Link stecken ein Projektionssystem, ein eigener Shader und eine Reihe praktischer Kompromisse, die alle um eine Frage kreisen: Wie lädt ein filmreifes 3D-Spiel schnell in einem Webbrowser?

Warum ein 3D-Spiel für den Browser?

Der größte Vorteil von Browsergames ist der Zugang. Man folgt einem Link und legt sofort los. Zwischen Neugier und erstem Lauf gibt es keinen Installer, keine App-Store-Seite und kein Konto. So sind kostenlose Browsergames leicht zu finden, auszuprobieren und weiterzuschicken.

Die Einschränkung: Jedes zusätzliche Modell, jede Textur und jede Animation verlängert die Wartezeit vor dem Spielen. Relic Hunter brauchte deshalb ein Bildsystem, das mit wenigen Assets sechs Level bestreitet, ohne dass jeder Gang wie hineinkopiert aussieht.

Das Spiel unter dem visuellen Experiment

Relic Hunter ist kein endloser gerader Gang, der nur wie ein Labyrinth bemalt ist. Jede der sechs Prüfungen entsteht aus einem generierten Labyrinth mit Kreuzungen, alternativen Wegen und echten Sackgassen. Vor jedem Durchgang hast du ein paar Sekunden, um die Karte zu studieren. Sobald der Timer läuft, musst du dir den Weg merken, an jeder Kreuzung richtig abbiegen und in Bewegung bleiben.

Das macht es zu einem Teil Labyrinth-Rennspiel, einem Teil Gedächtnisherausforderung und einem Teil Tempelflucht. Ein falscher Abzweig kostet mehr als ein paar Schritte: Du musst umkehren, während der Einsturz-Timer weiterbrennt. Mit gehaltener M-Taste wirfst du noch einen Blick auf die Karte, aber sie beim Laufen zu lesen, bringt seinen eigenen Druck mit.

Drei gemeinsame Leben tragen durch die ganze Kampagne. Die Gefahren kommen erst einzeln, dann überlagern sie sich: Schwingende Klingen musst du unterducken, umgestürzte Balken und kaputte Böden überspringen, und gemeißelte Löwenköpfe speien Feuer quer über den Weg. In der fünften Prüfung holt sich Mira oder Vikram endlich den Syamantaka, Suryas Sonnenstein. Die sechste ist die Flucht, während hinter dir der Tempel zerfällt.

Warum normale 3D-Texturen falsch aussahen

Die Bildidee begann mit KI-Bildern von Gängen aus gemeißeltem Stein, warmem Fackellicht und tiefem Schatten. Als Standbilder wirkten sie überzeugend. Die erste spielbare Version nicht. Den Stein als gewöhnliche Textur zu wiederholen, ergab eine gekachelte Kiste und warf das Wichtigste am Ausgangsbild weg: sein Licht.

Ein Foto wirkt vor allem wegen des Lichts echt: der weiche Schatten, wo Wand auf Boden trifft, der Schein um eine Fackel und die Dunkelheit am anderen Ende einer Halle. Eine wiederholbare Textur wird absichtlich flach gemacht, damit sie ohne Nähte kacheln kann. Als ich das Licht entfernte, um das Bild wiederholen zu können, hatte ich auch den Teil entfernt, der es echt wirken ließ.

Tour Into the Picture: das Bild auf 3D projizieren

Die Lösung kam aus einer Technik der Computergrafik namens Tour Into the Picture, kurz TIP. Stell dir vor, das Ausgangsbild wäre mit einer echten Kamera aufgenommen worden. Ich setze eine virtuelle Kamera an den entsprechenden Punkt in der Three.js-Szene, gebe ihr eine passende Ansicht und projiziere das Bild wie ein Diaprojektor auf einfache Boden-, Wand- und Deckengeometrie.

In der Nähe dieses Standpunkts behält der Gang die Schatten, den Glanz und die Tiefe des Originalbilds und verhält sich trotzdem wie ein Raum, durch den man sich bewegen kann. Im Shader fragt jeder Punkt einer Fläche, wo er im Bild des Projektors landet, und liest diese Farbe aus. Der erste gelungene Prototyp fühlte sich an, als würde man in ein Gemälde hineinlaufen.

Die fünf Probleme, sobald sich der Spieler bewegte

1. Dehnung: Je weiter sich der Spieler vom Projektor entfernte, desto mehr verzerrte sich das Bild.
2. Löcher: Seitliche Öffnungen und ferne Flächen außerhalb des Blickfelds der Quellkamera hatten keine projizierten Details.
3. Flimmern: Wenn an Kreuzungen die Projektionsrichtung wechselte, sprangen oder flirrten die Wände.
4. Bewegungsschlieren: Ein Pixel des Ausgangsbilds konnte sich auf Böden und Seitenwänden über viele Bildschirmpixel ziehen.
5. Eingebackenes Licht: Das projizierte Bild enthielt das Licht schon, deshalb konnten normale Echtzeit-Fackeln es nicht einfach neu beleuchten.

Diese Probleme übersah man leicht auf Screenshots und konnte sie beim Laufen unmöglich ignorieren. Das änderte, wie ich die Grafik beurteilte: Jede Verbesserung musste Bewegung, Abbiegen und Zurücklaufen überstehen, nicht nur ein sorgfältig gewähltes Standbild.

Das Hybridsystem, das erschienen ist

Statt eines Projektors für eine lange Halle verteilt das Spiel Projektoren entlang jedes offenen Gangs in beide Richtungen. In jedem Bild wählt es nahe Projektoren aus, die in Blickrichtung des Spielers zeigen, und blendet eine begrenzte Zahl davon ineinander. So ist der Spieler nie so weit von einer brauchbaren Quelle entfernt, dass das Bild zu einem gedehnten Brei zerfällt.

Knifflige Architekturstellen nutzen echte Geometrie. Abschlusswände bekommen gemeißelte Paneele, damit sie nicht wie Gänge aussehen, die ewig weitergehen. Seitliche Öffnungen nutzen Torbogen-Paneele mit richtigen Löchern, sodass jede Abzweigung gut lesbar ist. Flächen außerhalb der besten Projektion fallen auf Stein zurück statt auf Schwarz.

Der fertige Shader ist ein Hybrid. Er misst für jedes Pixel, wie stark das projizierte Foto gedehnt ist. Scharfe Stellen behalten das Foto. Steile, verschmierte Flächen mischen eine knackige Steinkachel dazu. Diese Kachel borgt sich verwischtes Licht aus dem Foto. Das KI-Bild bestimmt weiterhin, wo der Gang warm oder dunkel ist, und die Kachel bringt in der Bewegung die feinen Details zurück. Anisotrope Filterung und Mipmaps schärfen die übrigen Proben unter steilen Winkeln.

Figuren und Fallen getrennt halten

Der Gang ist die Bühne. Mira, Vikram, schwingende Klingen, feuerspeiende Löwenköpfe, umgestürzte Balken und kaputte Böden sind eigene interaktive Ebenen. Alles, was der Spieler treffen, umgehen oder animiert sehen kann, braucht ein eigenes Objekt. Eine Falle ins Gangbild einzubacken, lässt die Interaktion flach wirken.

Die animierten Teile laufen durch eine eigene Pipeline: saubere Standbilder aus ChatGPT, kurze Clips, mit Grok animiert, und das Entfernen des Greenscreens, bevor sie in die Three.js-Szene gesetzt werden. Weil Welt und bewegliche Teile getrennt blieben, ließen sich beide leichter abstimmen.

Was dieser Ansatz für Browserspiele bedeutet

Moderne Browserspiele können Echtzeit-3D-Grafik, eigene Shader, Animation, Ton und responsive Eingabe in einer ganz normalen Seite liefern. Relic Hunter schafft das mit einem Hauptbild des Gangs, einem Torbogen-Paneel und einer kleinen Auswahl an Steintexturen, statt mit einer schweren Bibliothek detaillierter 3D-Umgebungen.

Das Ergebnis ist ein kompaktes Three.js-Spiel, dessen Gänge die Stimmung der KI-Bilder behalten, während du läufst, abbiegst und zurückgehst. Diese sparsame Nutzung von Assets ist wichtig für Spiele ohne Download: Kleinere Dateien verkürzen die Zeit zwischen dem Öffnen der Seite und dem eigentlichen Spielen.

So spielst du Relic Hunter online

1. Öffne Relic Hunter: Tempeleinsturz in deinem Browser.
2. Wähle Mira oder Vikram als Reliktjäger.
3. Studiere die Karte, bevor jede Prüfung beginnt.
4. Biege an den Kreuzungen ab, spring oder duck dich an den Fallen vorbei und erreiche den Ausgang, bevor die Zeit abläuft.
5. Hol dir den Syamantaka-Edelstein und entkomme dem letzten Einsturz.

Wenn du ein kostenloses 3D-Browserspiel, ein schnelles Tempel-Labyrinth oder eines der kostenlosen Online-Browsergames ohne Konto suchst, dann starte einen Durchgang und finde heraus, ob du den Sonnenstein zurück ins Tageslicht bringst.

Spiel jetzt Relic Hunter. Es ist kostenlos, läuft online und braucht keinen Download. · Mehr Browsergames · Lies über kostenlose Spiele ohne Download.