Bluestone Lane

Beschreibung

Bluestone Lane ist ein drei bis vier Minuten langes Echtzeit-Erlebnis, das im Browser läuft. Es dämmert in einer alten Straße, die auf ihren Abriss wartet: Auf der anderen Straßenseite sind alle Rollläden heruntergelassen, an den Wänden steht in aufgemalten Kreisen das Schriftzeichen 拆 („abreißen“), und ein Gebäude ist bereits zur Hälfte abgerissen. Nur ein Rollladen ist noch halb offen – der einer kleinen Reparaturwerkstatt für Elektrogeräte, wo der Roboter, den ein alter Reparateur aus einem Radiogehäuse, einem Kameraobjektiv und Wasserrohren zusammengebastelt hat, noch immer auf einem Hocker neben der Werkbank sitzt.

Klicken Sie, um zu beginnen: Die Kamera geht von der Straße hinein und um den Roboter herum, bis sie vor seinem Gesicht steht. Halten Sie die linke Maustaste oder die Leertaste gedrückt, um die Irisblende seines Objektivs zu öffnen – der erste Versuch misslingt immer, also lassen Sie los und halten Sie erneut gedrückt. Halten Sie weiter gedrückt und bewegen Sie die Maus: Sein Kopf folgt ihr, und wo immer sein Licht hinfällt, kehrt die Vergangenheit zurück.

Der erste Akt spielt in der Werkstatt. Außerhalb des Lichtstrahls herrscht die Gegenwart: Alles ist verstaubt und verblichen, in den Regalen hängen Spinnweben, auf dem Boden liegen abgeblätterter Putz und Glasscherben, und der Fernseher auf dem Karton, die Wanduhr, der Tischventilator und das Röhrenradio sind allesamt kaputt. Wo das Licht hinfällt, ist alles wie früher: Im Fernseher läuft das Programm, das Radio spielt bei leuchtender Skala eine Melodie, und das Pendel der Uhr schwingt.

Nach einer Weile weht dieselbe Melodie leise von der anderen Straßenseite herüber. Der Roboter dreht lauschend den Kopf, während sich der Blick bis zur Tür zurückzieht; sein Licht wird unstet, Rauschen schleicht sich in das Lied, das Bild verliert immer wieder die Synchronisation, und mit einem letzten Bildriss folgt der Schnitt zum zweiten Akt.

Der zweite Akt spielt auf der Straße. Jeder der fünf Läden gegenüber, auf den der Lichtstrahl fällt, wird in einen Abend Mitte der 1990er-Jahre zurückversetzt – drinnen brennt Licht, auf den Balkonen hängt Wäsche, Nachbarn sitzen auf niedrigen Hockern vor der Tür –, und Sie hören die Geräusche dieses Ladens. Läden, die Sie gefunden haben, bleiben erleuchtet; die anderen rufen mit ihren Schildern und Geräuschen nach Ihnen. Während Sie schauen, schwindet die Energie. Der letzte Blick des Roboters wandert zurück zu dem Elektronikladen, aus dem die Melodie kommt, und die ganze Straße leuchtet für einen Moment auf; dann ist die Energie erschöpft, der Lichtstrahl flackert und erlischt, das Lied bricht mitten in der Phrase ab, und die Straße ist wieder das, was sie heute ist. Die Schlussszene blickt aus der Werkstatt hinaus: Der Roboter ist noch immer der dunklen Straße zugewandt, gegenüber geht eine Lampe an, und die letzte Zeile lautet: „Er erinnert sich an die Straße, als ihre Lichter brannten.“

Nach der Schlusstafel können Sie es sich per Klick noch einmal ansehen. Die Benutzeroberfläche ist standardmäßig auf Englisch und lässt sich über einen Link auf dem Titelbildschirm auf Chinesisch umstellen; auf dem Smartphone halten Sie den Bildschirm gedrückt und bewegen den Finger. Empfohlen werden Kopfhörer sowie ein Browser mit WebGPU, etwa eine aktuelle Version von Chrome oder Edge; Browser ohne WebGPU weichen automatisch auf WebGL2 aus. Das erste Laden dauert einen Moment, weil die Modelle heruntergeladen und die Shader vorkompiliert werden.

Wie Tripo eingesetzt wurde

Tripo hat mehr als zwanzig Objekte in der Reparaturwerkstatt generiert: den Roboter, zwei Röhrenradios (eines zur Reparatur geöffnet, eines geschlossen), zwei Röhrenfernseher, einen Tischventilator, eine Wanduhr, einen Wecker, einen Kassettenrekorder, eine Schreibtischlampe, einen Lötkolben, eine Lupe, einen Werkzeugkasten, einen Teileschrank, die Werkbank, ein 28-Zoll-Tourenrad, eine Thermoskanne, einen Emaillebecher sowie Ersatzarm, -bein und -torso – dazu vier eigens angefertigte defekte Versionen. Wände und Boden des Raums, die Regale und die Kartons darauf, die Kabel, die Werkzeugwand und die Kleinteile auf der Werkbank sind im Code aufgebaute Geometrie; die Ladenzeile gegenüber besteht aus zwei generierten Fotos („jetzt“ und „damals“), nicht aus Modellen.

• Vom Referenzbild zum Modell: Jedes Objekt beginnt als Produktrendering vor schlichtem hellgrauem Hintergrund, das dann an Tripo geht. Vor der Modellierung wurden am geöffneten Radio drei Ansätze verglichen – direktes Image-to-3D, Bild über Multiview zu 3D und ein von Hand zusammengestelltes Blatt mit vier Ansichten zu 3D –, und die meisten Modelle nahmen den Weg Bild → Multiview → 3D, mit detaillierter Geometrie und detaillierten Texturen sowie PBR-Maps; die in die Texturen eingebackene Beleuchtung wurde entfernt, damit Schreibtischlampe, Abenddämmerung draußen und der Lichtstrahl des Roboters für das Licht sorgen.
• Der Roboter: Tripo lieferte ihn als ein einziges Mesh – Kopf, Körper und Hocker miteinander verschmolzen. Statt den Kopf abzutrennen, gab der Autor ihm im Vertex-Shader einen „weichen Hals“: Ein aus der Position berechnetes Gewicht beträgt im Kopf aus dem Radiogehäuse 1, in Körper und Schultern 0 und steigt über den Hals und die Kabel ringsum stufenlos an, sodass beim Drehen des Kopfes jeder Vertex mit seinem Anteil am Drehwinkel um den Hals verdreht wird. Da nichts zerschnitten wird, kann sich keine Naht öffnen, und die Kabel winden sich beim Drehen um den Hals. Der Hocker wurde mit einem Blender-Skript abgetrennt, sodass sich im zweiten Akt der ganze Roboter darauf zur Straße drehen kann. Das verchromte Emblem „上海“ (Shanghai) auf seinem Gesicht und das Schild „人民电器“ (Volkselektro) auf seiner Brust sind Teil der Geometrie des Modells selbst, und nach demselben Design entstanden auch Ersatzarm, -bein und -torso, die an den Wandhaken hängen und an der Werkbank lehnen.
• Defekte Versionen: Damit die Gegenwart außerhalb des Lichtstrahls und die Vergangenheit darin zusammenpassen, erhielten der Fernseher auf dem Karton, die Wanduhr, der Tischventilator und das Röhrenradio jeweils eine zweite, heruntergekommene Version – das Referenzbild wurde so überarbeitet, dass es beschädigt aussieht, und dann mit denselben Tripo-Einstellungen modelliert. Beide Versionen stehen an derselben Stelle: Pixel, die der Lichtstrahl erfasst, zeigen die intakte Version, alle übrigen die defekte.
• Rohe Meshes im Web: Jedes rohe Tripo-Modell hat rund 1,9 Millionen Dreiecke und 4K-Texturen (beim Roboter 8K). Statt sie in Blender zu dezimieren – was die Texturnähte aufreißt und aus der Nähe weiße Risse hinterlässt –, vereinfachte der Autor sie mit meshopt unter Erhalt der Nähte zu mehreren Detailstufen, jede mit ihrem gemessenen Fehler. Zur Laufzeit zeigt jedes Objekt nur die Stufe, deren Fehler unter einem Bildschirmpixel bleibt und deren Textur nicht gröber aufgelöst ist als der Bildschirm: einfachere Stufen in der Ferne, feinere, wenn Sie näher kommen. Auf der Live-Website weicht die feinste Stufe nur um Bruchteile eines Millimeters vom rohen Mesh ab. Die gröberen Stufen werden zuerst geladen, der Rest wird bei Bedarf nachgestreamt und wieder freigegeben, sobald der Grafikspeicher sein Budget überschreitet.
• Modell-Viewer: Hängen Sie ?review an die Adresse an, um in den Inspektionsmodus mit heller Prüfbeleuchtung zu gelangen; ziehen Sie zum Umkreisen, scrollen Sie zum Zoomen und drücken Sie 1–8 für voreingestellte Ansichten. Doppelklicken Sie auf ein beliebiges Modell, und die Kamera gleitet zu ihm heran; unten links erscheinen sein Name und die Dreieckszahl des rohen Tripo-Modells.

So läuft es im Browser

Eine Game-Engine gibt es nicht: Das Erlebnis baut mit Vite direkt auf dem WebGPU-Renderer von three.js auf, und Browser ohne WebGPU weichen automatisch auf WebGL2 aus.

Die Vergangenheit wird Pixel für Pixel berechnet. Das Auge des Roboters wirft einen Lichtkegel, und beim Rendern wird für jedes Pixel geprüft, ob es darin liegt: Innerhalb des Kegels erscheinen die intakten Modelle, eingeschaltete Fernseher und ein wärmeres Color Grading, außerhalb die verstaubte, verblichene Gegenwart – und anhand derselben Maske wird auch zwischen defekter und intakter Version umgeschaltet. Die beiden Fotos auf der anderen Straßenseite wechseln auf die gleiche Weise zwischen jetzt und damals, und das Schaufenster des Elektronikladens ist ein echter kleiner 3D-Laden, in dem die Fernseher ebenfalls Sendungen zeigen.

Dass es schnell startet und flüssig läuft, liegt an drei Dingen. Sämtliche Shader werden asynchron und parallel kompiliert, und ein Objekt, dessen Shader noch nicht bereit ist, wird in diesem Frame einfach übersprungen, statt ihn aufzuhalten. Der Ladebildschirm zeichnet jedes Objekt einmal in jedem Pass (Tiefen-Prepass, Hauptpass und jede Shadow Map), sodass nach dem Klick auf Start mitten in der Geschichte nichts mehr kompiliert werden muss. Und das Rendering ist auf rund 2,1 Millionen Pixel (etwa 1080p) begrenzt, wobei die Auflösung automatisch sinkt, wenn Frames zu lange dauern. Wechselt ein Modell die Detailstufe, werden beide Stufen gleichzeitig auf komplementären Mengen zufälliger Pixel gezeichnet und über 0,35 Sekunden überblendet, geglättet durch temporales Anti-Aliasing, sodass aus der Nähe nichts „aufploppt“. Mit dem Zusatz ?q=low gibt es einen Modus mit niedriger Qualität (ohne Ambient Occlusion und Screen-Space Reflections, mit Shadow Maps in halber Größe).

Der Sound legt CC0-Feldaufnahmen und Web-Audio-Synthese übereinander: die Straße draußen in der Abenddämmerung, das Summen der Leuchtstoffröhre und das Netzbrummen, das Ticken des Pendels, ein Fernseh-Testton, die Servomotoren des Roboters und das Geräusch seines sich öffnenden Auges – und bei der Melodie im Radio handelt es sich um eine pentatonische Eigenkomposition. Im zweiten Akt hat jeder Laden gegenüber seine eigene Geräuschkulisse.

Nebenbei behob der Autor auch einen Bug im WebGPU-Renderer von three.js r186: Unterscheiden sich zwei Modelle nur darin, wie ihre Normalen gespeichert sind (Int8 gegenüber Int16), lässt der Renderer sie eine gemeinsame Pipeline nutzen, sodass dasjenige, das als zweites gezeichnet wird, seine Vertices im falschen Format liest und seine Oberfläche in einem tarnmusterartigen Durcheinander aufleuchtet. WebGL2 ist davon nicht betroffen.