Autore: Theodore
Provalo dal vivo Descrizione
Willow Ferry è un borgo d’acqua del Jiangnan renderizzato in tempo reale nel browser: muri bianchi e tegole scure, frontoni a testa di cavallo, botteghe con facciate a grata sotto gronde da cui pendono lanterne, un ponte ad arco in pietra sul canale, barche wupeng ormeggiate ai gradini e salici che ricadono sull’acqua verde giada. La schermata di caricamento dà il tono: «Follow the water. Come home a little late.»
Il borgo segue una giornata tutta sua — ora dorata, ora blu, notte di luna, alba, mattino, pomeriggio — che compie il suo giro in circa sette minuti, con il sole e la luna sempre in movimento e le ombre che girano lentamente dietro di loro. Tieni premuto T per far scorrere le ore più in fretta, oppure premi 1–5 per passare direttamente a pomeriggio, ora dorata, ora blu, chiaro di luna o pioggia nebbiosa. La pioggia nebbiosa è una condizione meteo, non un’ora del giorno: se la scegli, l’orologio si ferma finché non selezioni un’altra ora.
I tasti ←/→ passano in rassegna sei punti di vista: Willow Bank, Moon Bridge, Ferry Steps, Tea Pavilion, Town in the Mist e The Slow Boat. Ognuno è accompagnato da una breve frase, che in alcuni casi cambia con l’ora — all’ora dorata Willow Bank recita «The sun rests in the arch.» — e quella di Moon Bridge rielabora la poesia «Frammento» (断章) di Bian Zhilin: «You stand on the bridge to watch the view. / From a window, someone watches you.»
Trascina per guardarti intorno, scorri per scivolare in avanti, cammina con WASD (Shift per andare più veloce, Q/E per salire e scendere) e fai clic per mettere a fuoco. Il pulsante del diaframma va da f/1.4 a f/16 e l’ultimo stop disattiva la profondità di campo, così tutto risulta nitido; la camera ha un leggero ondeggiamento da ripresa a mano (Drift), che si può disattivare, e H nasconde l’interfaccia. Premi «Ride the boat» e la camera scende dolcemente sulla prua mentre la barca scivola lungo il canale: ←/→ (A/D) per virare, ↑ (W) per remare più forte, ↓ (S) per rallentare, e quando lasci i tasti la barca ritrova da sola la rotta. Il margine entro cui può deviare è stato misurato lungo il percorso, così non va mai a urtare gli argini, le barche ormeggiate o l’arco del ponte.
L’intero borgo è realizzato con il codice: le case, il ponte ad arco in pietra, le barche wupeng, le lanterne, i salici, i peschi e i blocchi e i gradini dell’argine sono tutti generati da script Blender Python ed esportati in GLB. Il generatore di case traccia i lotti, sceglie le tipologie di casa, dispone i frontoni a testa di cavallo in base all’altezza e inserisce tra una casa e l’altra piccoli giardini cinti da mura; solo la casa protagonista accanto ai gradini dell’approdo è posizionata a mano. I cieli e parte delle superfici di intonaco, pietra, legno e ciottoli sono cieli fotografici e texture scansionate CC0 di Poly Haven; anche tutte le altre texture, e tutto l’audio, provengono dagli script.
L’interfaccia è solo in inglese e l’audio parte al primo clic. Dà il meglio su Chrome, Edge o Safari desktop e, dove manca WebGPU, passa a WebGL2; alla prima visita vengono scaricati poco più di 40 MB, quindi la schermata di caricamento resta visibile per qualche istante.
Come gira nel browser
La parte web è costruita sul renderer WebGPU di three.js r186 con Vite, e i modelli sono compressi con meshopt. Man mano che i modelli arrivano da Blender, i loro materiali vengono ricostruiti per nome in TSL: macchie lungo la linea dell’acqua, muschio, caustiche, invecchiamento, ondeggiamento al vento e il bagliore notturno di finestre e lanterne vengono tutti calcolati negli shader, e gli stessi materiali TSL funzionano anche con WebGL2.
La maggior parte del lavoro si è concentrata sull’acqua: riflessione, rifrazione, torbidità e assorbimento, lo scintillio del sole e della luna e la scia lunare, le increspature della pioggia, le chiazze mosse dal vento, la scia della barca e l’acqua spinta di lato dalla prua. Il cielo è un cielo fotografico di Poly Haven che sfuma da un’ora all’altra e fornisce anche la luce ambientale e la direzione del sole e della luna; le ombre delle nuvole scorrono sul borgo, sulle colline e sull’acqua, bassi banchi di nebbia si adagiano sul canale e ci sono lucciole, pulviscolo fluttuante e strisce di pioggia.
Il post-processing aggiunge SSAO (solo sulla luce ambientale), i banchi di nebbia, bloom, profondità di campo, color grading e FXAA. L’autofocus funziona come quello di una reflex digitale, lanciando un raggio dal centro dell’inquadratura (accelerato da three-mesh-bvh), oppure puoi fare clic per scegliere il punto di messa a fuoco. Per mantenere alte le prestazioni, la scena è suddivisa in layer: i dettagli fini come coppi, grate e ottoni vengono disegnati solo nella vista principale e nascosti del tutto oltre i 28 metri; il letto del canale e i ciottoli restano fuori dai riflessi; e le opere in pietra e gli alberi sono esclusi dalla pre-passata SSAO. Le ombre della luce principale vengono ridisegnate quando la luce si muove e, altrimenti, ogni cinque frame; le parti della barca vengono unite per materiale al caricamento, e per l’erba e le pietre dell’argine si usa il rendering istanziato.
Tutto l’audio è sintetizzato dal vivo con Web Audio — non c’è un solo file audio: lo sciabordio e il gocciolio (più forti vicino all’acqua), il vento tra i salici, gli uccelli di giorno, grilli e rane di notte, la campana lontana di un tempio, i colpi di remo quando vai in barca e, come musica, un rado pizzicato pentatonico.
