La camminata qui sopra non è un motore 3D: è un filmato scomposto in fotogrammi e ridisegnato su canvas alla velocità del tuo scroll. Stessa resa di una galleria WebGL, una frazione del peso, nessun requisito di scheda grafica.
Una camminata in avanti, velocità costante, nessuno stacco. Ripresa con gimbal nello spazio reale oppure renderizzata da un modello esistente. Trenta secondi bastano.
Estrazione dei fotogrammi, correzione di contrasto e grana, conversione in WebP. Qui: 96 fotogrammi da 1280×720, circa 20 KB l'uno.
Lo scroll viene normalizzato fra 0 e 1, ammorbidito con un'interpolazione e mappato
sull'indice del fotogramma. Il disegno su canvas evita gli scatti di
currentTime su iOS, dove lo scrubbing diretto di un video non è affidabile.
Le posizioni sono calcolate una volta sola, fotogramma per fotogramma, e salvate come percentuali. A runtime il pin è un elemento HTML che segue quelle coordinate: cliccabile, raggiungibile da tastiera, leggibile dai motori di ricerca.
Per confronto, gli showroom virtuali costruiti in WebGL che ho analizzato partono da 15 MB e arrivano a 83. Uno di essi spende da solo 64,9 MB in file audio non compressi per i suoni al passaggio del mouse.
Scroll di documento, non virtuale. Molti siti del genere intercettano la rotellina e disegnano tutto da soli: sembra più controllato, ma si perdono barra di scorrimento, tasti freccia, tasto indietro e link condivisibili. Qui lo scroll è quello vero del browser — provalo con le frecce, o clicca un capitolo nell'indice a sinistra e guarda l'indirizzo cambiare.
Movimento ridotto, rispettato davvero. Se il tuo sistema chiede animazioni ridotte, questa pagina disattiva l'interpolazione e le animazioni: i fotogrammi avanzano secchi, senza scivolamento. Nessuno dei siti premiati che ho esaminato implementa questa regola.
L'ambiente mostrato è una scena di prova generata al computer: volumi puliti, nessuna texture reale. Serve a far vedere il meccanismo, non a sembrare vero. Sostituendo la cartella dei fotogrammi con quelli di una ripresa vera, la pagina funziona identica e l'effetto diventa fotografico — perché è una fotografia.