Willow Ferry

Beschreibung

Willow Ferry ist eine Jiangnan-Wasserstadt, live im Browser gerendert: weiße Wände und dunkle Ziegel, Pferdekopfgiebel, Ladenfronten mit Gitterwerk unter laternenbehängten Traufen, eine steinerne Bogenbrücke über dem Kanal, an den Stufen vertäute Wupeng-Boote und Weiden, deren Zweige über dem jadegrünen Wasser hängen. Der Ladebildschirm gibt die Stimmung vor: „Follow the water. Come home a little late.“

Das Städtchen folgt seinem eigenen Tagesablauf – goldene Stunde, blaue Stunde, Mondnacht, Morgendämmerung, Morgen, Nachmittag –, der in etwa sieben Minuten einmal durchläuft; Sonne und Mond sind ständig in Bewegung, und die Schatten kriechen ihnen langsam hinterher. Halten Sie T gedrückt, damit die Stunden schneller vergehen, oder wählen Sie mit 1–5 direkt Nachmittag, goldene Stunde, blaue Stunde, Mondschein oder Nebelregen. Nebelregen ist eine Wetterlage, keine Tageszeit: Sobald Sie ihn wählen, bleibt die Uhr stehen, bis Sie wieder eine Tageszeit auswählen.

Mit den Tasten ←/→ schalten Sie durch sechs Perspektiven: Willow Bank, Moon Bridge, Ferry Steps, Tea Pavilion, Town in the Mist und The Slow Boat. Zu jeder gehört eine kurze Zeile; manche davon ändern sich mit der Tageszeit – zur goldenen Stunde steht bei Willow Bank „The sun rests in the arch.“ –, und die Zeile von Moon Bridge ist eine Abwandlung von Bian Zhilins Gedicht „Fragment“ (断章): „You stand on the bridge to watch the view. / From a window, someone watches you.“

Ziehen Sie, um sich umzusehen, scrollen Sie, um nach vorn zu gleiten, gehen Sie mit WASD (Shift für mehr Tempo, Q/E zum Steigen und Sinken) und klicken Sie, um scharfzustellen. Der Blenden-Button durchläuft die Stufen f/1,4 bis f/16, und die letzte Stufe schaltet die Schärfentiefe ab, sodass alles scharf ist; die Kamera hat ein sanftes Handkamera-Schwanken (Drift), das sich ausschalten lässt, und H blendet die Benutzeroberfläche aus. Drücken Sie auf „Ride the boat“, und die Kamera gleitet hinab auf den Bug, während das Boot den Kanal entlangtreibt: Mit ←/→ (A/D) lenken Sie, mit ↑ (W) rudern Sie kräftiger, mit ↓ (S) lassen Sie nach, und wenn Sie loslassen, findet das Boot zurück auf seinen Kurs. Wie weit es abweichen darf, wurde entlang der Route vermessen, sodass es nie gegen die Ufermauern, die vertäuten Boote oder den Brückenbogen stößt.

Das ganze Städtchen ist aus Code gebaut: Die Häuser, die steinerne Bogenbrücke, Wupeng-Boote, Laternen, Weiden, Pfirsichbäume sowie die Quader und Stufen der Ufermauern werden allesamt von Blender-Python-Skripten generiert und als GLB exportiert. Der Hausgenerator teilt die Grundstücke ein, wählt Haustypen aus, setzt die Pferdekopfgiebel je nach Höhe und schiebt kleine ummauerte Gärten dazwischen; nur das Hauptgebäude an den Anlegestufen ist von Hand platziert. Die Himmel und ein Teil der Putz-, Stein-, Holz- und Kieselflächen sind CC0-Fotohimmel bzw. gescannte Texturen von Poly Haven; alle übrigen Texturen und der gesamte Sound stammen ebenfalls aus den Skripten.

Die Benutzeroberfläche gibt es nur auf Englisch, und der Sound setzt mit Ihrem ersten Klick ein. Am besten läuft es in Chrome, Edge oder Safari auf dem Desktop, und wo WebGPU fehlt, weicht es auf WebGL2 aus; beim ersten Besuch werden etwas mehr als 40 MB heruntergeladen, daher ist der Ladebildschirm einen Moment lang zu sehen.

So läuft es im Browser

Die Web-Umsetzung baut mit Vite auf dem WebGPU-Renderer von three.js r186 auf, die Modelle sind mit meshopt komprimiert. Beim Import aus Blender werden die Materialien der Modelle anhand ihrer Namen in TSL neu aufgebaut: Flecken an der Wasserlinie, Moos, Kaustiken, Verwitterung, das Schwanken im Wind und das nächtliche Leuchten von Fenstern und Laternen werden allesamt in Shadern berechnet, und dieselben TSL-Materialien laufen auch unter WebGL2.

Der größte Aufwand floss ins Wasser: Spiegelung, Brechung, Trübung und Absorption, das Glitzern von Sonne und Mond und die Lichtbahn des Mondes, Wellenringe von Regentropfen, vom Wind gekräuselte Flächen, das Kielwasser des Boots und das Wasser, das es am Bug verdrängt. Der Himmel ist ein Fotohimmel von Poly Haven, der zwischen den Tageszeiten überblendet und zugleich das Umgebungslicht sowie die Richtung von Sonne und Mond liefert; Wolkenschatten ziehen über das Städtchen, die Hügel und das Wasser, niedrige Nebelbänke liegen auf dem Kanal, und es gibt Glühwürmchen, schwebende Partikel und Regenfäden.

Das Postprocessing ergänzt SSAO (wirkt nur auf das Umgebungslicht), die Nebelbänke, Bloom, Schärfentiefe, Color Grading und FXAA. Der Autofokus arbeitet wie der einer Spiegelreflexkamera und schickt dazu einen Strahl aus der Bildmitte (beschleunigt durch three-mesh-bvh), oder Sie wählen den Fokuspunkt per Klick. Damit alles schnell bleibt, ist die Szene in Layer aufgeteilt: Feine Details wie Deckziegel, Gitterwerk und Messingteile werden nur in der Hauptansicht gezeichnet und jenseits von 28 Metern ganz ausgeblendet; Kanalbett und Kiesel bleiben aus den Spiegelungen heraus, und Mauerwerk und Bäume werden vom SSAO-Pre-Pass ausgenommen. Die Schatten des Hauptlichts werden neu gezeichnet, sobald sich das Licht bewegt, ansonsten bei jedem fünften Frame; die Teile des Boots werden beim Laden nach Material zusammengeführt, und Gras sowie die Steine der Ufermauern werden instanziiert gezeichnet.

Der gesamte Sound wird live mit Web Audio synthetisiert – es gibt keine einzige Audiodatei: das Plätschern und Tropfen des Wassers (lauter in Wassernähe), Wind in den Weiden, Vögel am Tag, Grillen und Frösche in der Nacht, eine ferne Tempelglocke, Ruderschläge, wenn Sie mit dem Boot fahren, und als Musik sparsame pentatonische Zupfklänge.