Dérive

In Dérive non c’è nessuna immagine del mare. A ogni fotogramma, uno shader WebGL2 calcola da zero ogni pixel dell’acqua: due bande di onda lunga, due ottave di increspature del vento, sommate in un’altezza, e la pendenza esatta di quell’altezza sotto ogni singolo pixel. La luce nasce da quella pendenza. Dove una piccola faccetta d’acqua si inclina proprio quanto basta per rimandarti il sole negli occhi, brilla.

È così che funziona lo scintillio. A mezzogiorno, un sottile luccichio bianco su tutta la vista. Quando il sole è basso, i bagliori si allungano in tratti d’oro nella sua direzione e si raccolgono in una lunga strada di luce che arriva dal suo lato, come quella vera che ti segue lungo una spiaggia. Di notte, un esile sentiero d’argento sotto la luna.

Poi l’intera immagine passa per uno strato dipinto. I suoi colori vengono stesi lungo un campo di pennellate che deriva con il mare, sbalzati un poco, granulosi come la carta, così che l’oceano si legga come un acquerello e non come un render. La pennellata si misura in pixel dello schermo, non in pixel di render: quando un telefono stanco deve disegnare la scena a metà risoluzione, la pittura conserva lo stesso pennello.

Farlo girare a sessanta fotogrammi al secondo su un telefono è stata la parte più grande del lavoro. Ciò che cambia nell’arco dei metri anziché dei pixel (dove sono le scogliere, in quale mare ti trovi, le grandi ombre dell’onda lunga) viene disegnato una volta per fotogramma in piccole texture, a un ottavo della grandezza, e riletto filtrato: tre letture di texture invece di dodici-venti calcoli di rumore per pixel, cinque millisecondi risparmiati a fotogramma sopra i bassifondi. Il mare, il fondale, le creature e ciò che galleggia stanno in sei chiamate di disegno prima dello strato dipinto, più una per ogni modello 3D sullo schermo.

Un giorno dura dieci minuti: un minuto d’alba, cinque di giorno, un minuto e mezzo di crepuscolo, due e mezzo di notte. I colori non si limitano a scurirsi. Ogni ora ha la sua tavolozza, accompagnata lungo delle curve: blu freddo e poi rosa all’alba, oro e poi viola al crepuscolo. Il tempo che fa dipende dal mare e dall’orologio, così chiunque navighi insieme sullo stesso mare vede la stessa pioggia nello stesso istante, senza che nulla passi tra loro.

Sotto i bassifondi ci sono praterie di fanerogame, teste di corallo nella laguna, foreste di kelp piegate dalla risacca. Niente di tutto questo è modellato, e niente è salvato. Cresce sulla scheda grafica, a ogni fotogramma, a partire da semplici numeri.

Il trucco è che il fondale non ha alcun buffer di vertici. Il fondo è tagliato in celle larghe sei metri, ancorate al mondo. Lo shader dei vertici riceve soltanto il proprio indice, gl_VertexID, e da lì ricava a quale cella appartiene e quale posto occupa al suo interno. Un piccolo hash della cella e del posto dà al filo d’erba un luogo, una lunghezza, un’inclinazione. Poi guarda quanto è fitta la prateria in quel punto: se è rada, il filo si ripiega in un triangolo di dimensione zero e la scheda grafica lo salta.

Una cella di prateria contiene fino a 640 fili, di cinque vertici ciascuno. Non sono istanziati: le istanze minuscole costano alla scheda grafica per istanza, non per vertice, così i fili sono disegnati uno dopo l’altro in un’unica lunga striscia di triangoli, uniti da triangoli degeneri. Misurato, la stessa prateria costa così circa il quaranta per cento in meno. Scorri sull’immagine qui sotto per sollevare la prateria dalla sabbia.

I fili si piegano con la corrente, in bande che rotolano attraverso la prateria. E si accorgono di te. Ogni creatura e la barca stessa vengono impresse, a ogni fotogramma, in una piccola texture di disturbo che si ripete ogni ottanta metri e svanisce un poco alla volta: vicino al fondo, vicino alla superficie, nel mezzo. I fili si coricano e si scostano da ciò che passa, gli anemoni si ritraggono, la volta di kelp si apre attorno allo scafo e si richiude dietro di lui.

Ogni mare ha il suo fondale. Nella laguna, coralli cervello e coralli a tavola, corna di cervo dalle punte chiare, gorgonie e coralli molli che ondeggiano, tutto in rosa sbiaditi, ocra e crema, raccolti in tonde teste di corallo sopra la sabbia. Nella foresta di kelp, stipiti d’oro oliva salgono dai loro ancoraggi verso fronde distese appena sotto la superficie, sopra un granito incrostato di corallina rosa e di stelle marine, e l’acqua tra loro si scurisce e si fa torbida quanto più scendono.

Pesci, squali, tartarughe, razze e balene vivono in una piccola simulazione scritta in Rust e compilata in WebAssembly. È minuscola di proposito: niente libreria standard, niente allocatore, niente importazioni, tutto il suo stato in un unico blocco fisso di memoria, così la pagina legge le posizioni delle creature direttamente da lì senza copiare un solo byte. Compilata, pesa 11,7 kilobyte. I banchi seguono la loro guida, gli squali girano in tondo, le balene risalgono verso la superficie nei secondi prima di respirare e soffiano solo quando hanno il dorso vicino a lei. Una copia della stessa simulazione in JavaScript prende il testimone dove WebAssembly è bloccato, e un test le fa avanzare entrambe allo stesso passo perché non si separino mai.

Poi ogni animale deve muoversi come se stesso. Ogni modello nasce in Blender pensando già alla sua nuotata: pesi dipinti nei colori dei vertici, rosso per l’onda del corpo, verde per le pinne o le ali, blu per le parti sottili che fremono. Lo shader dei vertici manda un’onda dalla testa lungo il corpo, batte le pinne, fa increspare i bordi e legge la virata della creatura da un fotogramma all’altro, così la spina dorsale si curva lungo l’arco che nuota e il corpo si inclina nella curva. Una balena gira in un lungo arco della sua stessa lunghezza; una manta inclina le ali come un aliante.

La profondità si dipinge, non si sfuma. Un corpo sott’acqua non è mai trasparente: il dorso prende più luce dei fianchi, il colore dell’acqua guadagna terreno punto per punto, i bordi se ne vanno per primi, e di giorno i riflessi del sole scorrono sui dorsi vicini alla superficie. Vista dal cielo, una balena a dodici metri di profondità è una forma che intuisci prima di vederla.

Alcuni animali li incontri solo con la pazienza. Resta calmo accanto a loro, remi fermi, l’esca giusta in acqua, e l’incontro si riempie come un respiro trattenuto. Quando si compie, la balena risponde con uno sbuffo accanto alla barca. Se navighi con degli amici, vale anche per loro.

Ogni animale che incroci entra nel taccuino di Élise: cinquantuno specie, tutte esistenti tranne una. Il modo in cui il taccuino le disegna segue quanto bene le conosci. Incrociata una volta, uno schizzo a matita: un doppio contorno incerto, un tratteggio secondo la luce, la grafite impigliata nella grana della carta. Vista abbastanza spesso, arrivano i suoi colori. E quando macini i pigmenti che le servono con ciò che il mare ti dà (la madreperla per il bianco, il vetro di mare per il blu, la ruggine per l’ocra, la fuliggine per il nero), diventa una tavola ad acquerello: velature che sbordano dal contorno, pigmento raccolto sui bordi bagnati, il dorso illuminato lasciato in carta nuda.

Nessuna di queste tavole è stata dipinta a mano. Il gioco le ricava dagli stessi modelli 3D che nuotano nel suo mare, in due passate sui colori e sulla forma del modello, la prima volta che apri la pagina.

Un gioco deve caricare. Qui l’attesa ne fa parte. La pagina si apre sulla carta; l’inchiostro scrive «Dérive» lettera dopo lettera, poi una velatura ad acquerello si allarga su una di quattro carte nautiche dipinte, e quella velatura è la barra di avanzamento. Quando il mare dietro è pronto, scegli se entrare con il suono o in silenzio, e la carta dipinta si tuffa nell’oceano vivo.

La velatura è uno script di ventidue kilobyte con il suo piccolo programma WebGL: sette macchie che avanzano attraverso uno spostamento strappato, una fascia più scura di pigmento bagnato sul loro fronte, la carta che vortica e si posa man mano che si riempie. Gira in un worker su una tela fuori schermo, così l’avvio pesante del gioco non la fa mai incespicare. I due caratteri del titolo sono incorporati nella pagina, ridotti a uno o due kilobyte, perché l’inchiostro scriva fin dal primissimo disegno.

Dérive è un sito statico. Non c’è un server di gioco, nessun database, niente da tenere acceso. Ogni mare nasce da un solo numero, leggibile come un breve codice tipo J9C-HA4W: lo stesso codice dà le stesse scogliere, la stessa gente, lo stesso tempo, su qualunque dispositivo. Il tuo taccuino vive sul tuo dispositivo. Se crei un account, la tua partita viene cifrata e firmata sul tuo dispositivo prima che una copia sia lasciata su relay pubblici, così nessun altro può leggerla, nemmeno l’autore del gioco.

Navigare insieme funziona allo stesso modo. Le barche si trovano attraverso quei relay e poi si parlano direttamente, da browser a browser, via WebRTC; il codice della partita è anche la sua password. Lo stato di una barca sta in cinquantadue byte, dieci volte al secondo. Chi guida un gruppo simula le creature per tutti quelli vicini, così guardate tutti la stessa balena.

E il mare è davvero senza fine. I numeri in virgola mobile perdono precisione lontano dall’origine, e a cinquanta chilometri i pesci più lenti si sarebbero congelati. Così il mondo si ricentra in silenzio sulla barca mentre remi, e resta esatto fino a sedicimila chilometri: quattro mesi di remi in linea retta.

La musica è stata composta per il gioco. Ognuno degli otto mari ha il suo brano: quello della laguna leggero e caldo, quello dei mari freddi lento e ampio, quello degli abissi grave e paziente; la notte ha il suo, e una tempesta prende il sopravvento su tutto finché dura. Remando da un mare all’altro, i brani sfumano l’uno nell’altro in sei secondi, e si abbassano un po’ quando si avvicina uno squalo.

Il resto del suono lo crea il browser dal vivo: il fruscio del mare, il cigolio dei remi, il respiro delle balene, la pioggia, il tuono che rotola qualche secondo dopo il lampo, più lontano o più vicino. Con le cuffie è meglio.