Bluestone Lane

Descrizione

Bluestone Lane è un’opera in tempo reale, della durata di tre o quattro minuti, che gira nel browser. È il crepuscolo su una vecchia strada in attesa di demolizione: dall’altra parte della via tutte le saracinesche sono abbassate, sui muri compare il carattere 拆 («demolire») dipinto dentro un cerchio e un edificio è già per metà abbattuto. Solo una saracinesca è ancora aperta a metà — quella di una piccola bottega di riparazione di elettrodomestici, dove il robot che un vecchio riparatore ha messo insieme con la cassa di una radio, l’obiettivo di una macchina fotografica e dei tubi idraulici siede ancora su uno sgabello accanto al banco da lavoro.

Fai clic per iniziare e la camera entra dalla strada, girando fino a trovarsi davanti al volto del robot. Tieni premuto il tasto sinistro del mouse o la barra spaziatrice per aprire il diaframma del suo obiettivo — il primo tentativo fallisce sempre, quindi rilascia e tieni premuto di nuovo. Continua a tenere premuto e muovi il mouse: la sua testa lo segue e, ovunque cada la sua luce, il passato ritorna.

Il primo atto si svolge nella bottega. Fuori dal fascio di luce c’è il presente: tutto è impolverato e sbiadito, ci sono ragnatele sugli scaffali, scaglie d’intonaco e vetri rotti sul pavimento, e il televisore sopra lo scatolone, l’orologio da parete, il ventilatore da tavolo e la radio a valvole sono tutti guasti. Dove cade la luce, le cose sono com’erano: il televisore trasmette i suoi programmi, la radio illumina la scala parlante e suona una melodia, e il pendolo dell’orologio oscilla.

Dopo un po’, la stessa melodia arriva fioca dall’altra parte della strada. Il robot gira la testa per ascoltare mentre l’inquadratura arretra fino alla soglia; la sua luce vacilla, le scariche si insinuano nella musica, l’immagine continua a perdere il sincronismo e, a un ultimo strappo, si passa al secondo atto.

Il secondo atto si svolge in strada. Ognuno dei cinque negozi dall’altra parte della via, quando il fascio lo raggiunge, torna a una sera di metà anni Novanta — luci accese all’interno, panni stesi sui balconi, vicini seduti su sgabelli bassi accanto alla porta — e ne senti i suoni. I negozi che hai trovato restano illuminati; quelli che non hai ancora trovato ti richiamano con le loro insegne e i loro suoni. Mentre guardi, l’energia si consuma. L’ultimo sguardo del robot torna al negozio di elettronica da cui proviene la melodia e l’intera strada si illumina per un istante; poi l’energia si esaurisce, il fascio tremola e si spegne, la musica si interrompe a metà frase e la strada torna a essere quella di oggi. Il finale guarda fuori dall’interno della bottega: il robot è ancora rivolto verso la strada buia, dall’altra parte della via si accende una lampada e l’ultima frase recita: «Ricorda la strada con le luci accese.»

Dopo la schermata finale, fai clic per rivedere l’opera da capo. L’interfaccia è in inglese per impostazione predefinita, con un link nella schermata del titolo per passare al cinese; sul telefono, tieni premuto lo schermo e fai scorrere il dito. Si consigliano le cuffie e un browser con WebGPU, come una versione recente di Chrome o Edge; i browser che non lo supportano passano automaticamente a WebGL2. Il primo caricamento richiede un po’ di tempo per scaricare i modelli e precompilare gli shader.

Come è stato usato Tripo

Tripo ha generato più di venti oggetti della bottega: il robot, due radio a valvole (una aperta per la riparazione, una chiusa), due televisori a tubo catodico, un ventilatore da tavolo, un orologio da parete, una sveglia, un registratore a cassette, una lampada da scrivania, un saldatore, una lente d’ingrandimento, una cassetta degli attrezzi, una cassettiera per componenti, il banco da lavoro, una bicicletta roadster da 28 pollici, un thermos, una tazza smaltata e il braccio, la gamba e il busto di ricambio — più quattro versioni danneggiate create appositamente. Le pareti e il pavimento della stanza, gli scaffali con sopra gli scatoloni, i cavi, la parete degli attrezzi e i piccoli oggetti sul banco sono geometria costruita via codice; la fila di negozi dall’altra parte della strada è fatta di due fotografie generate («ora» e «allora»), non di modelli.

• Dal riferimento al modello: ogni oggetto nasce come rendering di prodotto su un semplice sfondo grigio chiaro, che viene poi passato a Tripo. Prima di modellare, sulla radio aperta sono stati messi a confronto tre approcci — image-to-3D diretto, da immagine a multivista e poi a 3D, e 3D a partire da una tavola a quattro viste composta a mano — e per la maggior parte dei modelli si è seguita la strada immagine → multivista → 3D, con geometria e texture dettagliate, mappe PBR e l’illuminazione precalcolata rimossa dalle texture, in modo che a illuminare la scena siano la lampada da scrivania, il crepuscolo là fuori e il fascio del robot.
• Il robot: Tripo l’ha restituito come un’unica mesh — testa, corpo e sgabello fusi insieme. Invece di staccargli la testa, l’autore gli ha dato un «collo morbido» nel vertex shader: un peso calcolato in base alla posizione vale 1 nella testa ricavata dalla cassa della radio, 0 nel corpo e nelle spalle, e varia gradualmente lungo il collo e i cavi che lo circondano, così, quando la testa ruota, ogni vertice si torce attorno al collo per la propria quota dell’angolo. Nulla viene tagliato, quindi non può aprirsi alcuna giunzione, e i cavi si avvolgono attorno al collo mentre la testa gira. Lo sgabello è stato separato con uno script di Blender, così nel secondo atto l’intero robot ruota su di esso per voltarsi verso la strada. L’emblema cromato «上海» (Shanghai) sul volto e la targhetta «人民电器» (Elettrica del Popolo) sul petto fanno parte della geometria del modello stesso, e dallo stesso design sono nati il braccio, la gamba e il busto di ricambio appesi ai ganci della parete e appoggiati accanto al banco.
• Versioni danneggiate: perché il presente fuori dal fascio e il passato al suo interno combaciassero, il televisore sopra lo scatolone, l’orologio da parete, il ventilatore da tavolo e la radio a valvole hanno ciascuno una seconda versione malridotta — l’immagine di riferimento è stata rielaborata in modo da sembrare danneggiata, poi modellata con le stesse impostazioni di Tripo. Le due versioni occupano lo stesso punto: i pixel toccati dal fascio mostrano quella integra, gli altri quella danneggiata.
• Mesh grezze sul web: ogni modello grezzo di Tripo ha circa 1,9 milioni di triangoli e texture 4K (8K per il robot). Invece di decimarli in Blender — cosa che strappa le cuciture delle texture e lascia crepe bianche visibili da vicino — l’autore li ha semplificati con meshopt preservando le cuciture, ricavandone diversi livelli di dettaglio, ciascuno con il proprio errore misurato. Durante l’esecuzione ogni oggetto mostra solo il livello il cui errore resta sotto un pixel dello schermo e la cui texture non è più grossolana dello schermo: livelli più semplici da lontano, più fini man mano che ti avvicini. Nella versione online il livello più fine si discosta dalla mesh grezza solo di una frazione di millimetro. I livelli più grossolani si caricano per primi e gli altri arrivano in streaming quando servono, per poi essere rilasciati quando la memoria video supera il budget.
• Visualizzatore di modelli: aggiungi ?review all’indirizzo per entrare nella modalità di ispezione, con un’illuminazione d’ispezione intensa; trascina per orbitare, scorri per lo zoom e premi 1–8 per le viste predefinite. Fai doppio clic su un modello qualsiasi e la camera scivola fino a esso, mentre nell’angolo in basso a sinistra compaiono il suo nome e il numero di triangoli della versione grezza di Tripo.

Come gira nel browser

Niente motore di gioco: tutto è costruito direttamente sul renderer WebGPU di three.js con Vite, e i browser senza WebGPU passano automaticamente a WebGL2.

Il passato viene calcolato pixel per pixel. L’occhio del robot proietta un cono di luce e, durante il rendering, ogni pixel viene confrontato con questo cono: all’interno compaiono i modelli integri, i televisori accesi e un color grading più caldo; all’esterno, il presente polveroso e sbiadito — e le versioni danneggiate e integre si scambiano in base alla stessa maschera. Le due fotografie dall’altra parte della strada alternano allo stesso modo presente e passato, e la vetrina del negozio di elettronica è un vero piccolo negozio in 3D, dove anche i televisori trasmettono programmi.

L’apertura rapida e la riproduzione fluida si devono a tre accorgimenti. Ogni shader viene compilato in modo asincrono e in parallelo, e un oggetto il cui shader non è ancora pronto viene semplicemente saltato in quel frame, invece di far attendere il frame stesso. La schermata di caricamento disegna ogni oggetto una volta in ciascuna passata (pre-passata di profondità, passata principale e ogni shadow map), così, una volta fatto clic per iniziare, nulla viene più compilato a storia in corso. Infine, il rendering è limitato a circa 2,1 milioni di pixel (più o meno 1080p) e la risoluzione si abbassa automaticamente quando i frame durano troppo. Quando un modello cambia livello, i due livelli vengono disegnati insieme su insiemi complementari di pixel casuali e si dissolvono l’uno nell’altro in 0,35 secondi, ammorbiditi dall’anti-aliasing temporale, così da vicino nessun dettaglio «scatta» di colpo. Aggiungi ?q=low per una modalità a bassa qualità (senza occlusione ambientale né riflessi in screen space, con shadow map dimezzate).

L’audio sovrappone registrazioni sul campo CC0 e sintesi con Web Audio: la strada al crepuscolo là fuori, il ronzio del tubo al neon e della corrente di rete, il ticchettio del pendolo, un tono di prova televisivo, i servomotori del robot e il suono del suo occhio che si apre — e il motivo alla radio è una melodia pentatonica originale. Nel secondo atto ogni negozio dall’altra parte della strada ha il proprio suono.

Nel corso del lavoro, l’autore ha anche corretto un bug nel renderer WebGPU di three.js r186: quando due modelli differiscono solo per il modo in cui sono memorizzate le normali (Int8 contro Int16), il renderer permette loro di condividere un’unica pipeline, così quello disegnato per secondo legge i propri vertici nel formato sbagliato e la sua superficie si illumina in un caos di macchie simile a una mimetica. WebGL2 non è interessato dal problema.