Ogni pezzo 3D dei nostri remake Then & now è nato come file Python. Superman, Batman, Wolverine, Spider-Man, Iron Man, Hulk, R2-D2 e il Game & Watch sono costruiti ciascuno da uno script che pilota Blender, esporta un modello e lo passa a una pagina che lo illumina dal vivo con three.js. Niente è stato scolpito con il mouse.
Sembra un gioco di prestigio. Si è rivelata la decisione più pratica del progetto.
Perché costruire il 3D con il codice
Un modello fatto a mano è un oggetto finito. Un modello fatto da uno script è una ricetta, e le ricette si possono cambiare. Quando il feedback su Hulk è stato “i suoi pugni sembrano guanti”, non abbiamo riaperto un file per spostare vertici; abbiamo cambiato il modo in cui il pugno veniva costruito e lo abbiamo rigenerato. Quando gli avambracci erano troppo corti, o un mantello doveva cadere sopra le spalle invece che dietro, la correzione era di poche righe, e l’intero modello si ricostruiva in pochi minuti.
Significa anche che ogni pezzo è riproducibile. Gli script vivono nel repository accanto al sito, e un toolkit condiviso gestisce le parti di cui ogni busto ha bisogno: il torso, il piedistallo, la colorazione e l’esportazione.
I volti sono difficili, quindi non siamo partiti da zero
Le nostre prime teste erano costruite da primitive e deformate con la matematica. Si leggevano come teste, ma non come persone. I volti sono dove l’occhio perdona meno, e nessun rumore ingegnoso sistema un naso un po’ troppo lungo.
Così abbiamo cambiato approccio. Blender Studio pubblica una serie di mesh umane di base in CC0, gratuite per chiunque. Ora partiamo per ogni volto da quella testa realistica e la rimodelliamo via script: arcata sopraccigliare più pesante e mascella più larga per Hulk, mascella squadrata e fossetta sul mento per Superman, un ringhio per Wolverine. Le mani vengono dalla stessa serie, messe in posa via script in una presa, un palmo aperto o un pugno.
I piccoli dettagli che hanno richiesto più tempo
Qualche lezione che passeremmo a chiunque faccia lo stesso:
- A tenuta stagna o niente. Rifondere le parti insieme e poi ridurre il risultato per risparmiare peso può ripiegare la superficie su sé stessa, e le pieghe appaiono come buchi scuri. La nostra build ora si rifiuta di completarsi se un modello non è una superficie chiusa e valida.
- Un materiale per mesh. L’esportatore glTF di Blender mantiene i colori dei vertici solo sul primo materiale di una mesh, quindi ogni parte dipinta è una mesh a sé.
- Bocche chiuse finché non servono. Hulk e Wolverine tengono le labbra chiuse a riposo; il ruggito e il ringhio sono cambi di forma che si attivano solo mentre tieni premuto, con i denti nascosti finché la bocca non si apre.
- Versiona ogni modello. I browser mettono in cache i modelli in modo aggressivo, quindi ogni file viene caricato con un tag di versione che cambia quando cambia il modello.
La luce è metà del modello
Nella pagina, ogni pezzo è illuminato in tempo reale con three.js. Iron Man e Superman aggiungono il bloom, un effetto bagliore per gli occhi, il reattore arc, il repulsore e la vista calorifica. Ci è voluta un po’ di messa a punto. Il nostro primo Iron Man brillava così tanto che l’elmo spariva, così ora il bloom parte piccolo e si apre solo mentre carichi un colpo.
Ogni pezzo ha anche la sua scena: un tetto di Gotham sotto la pioggia, il tramonto su New York, i due soli di Tatooine, una scrivania in noce per le console portatili.
Mantenerlo veloce
Il 3D diventa lento facilmente. Qualche regola mantiene il nostro usabile su un telefono:
- I modelli si caricano quando la pagina è inattiva, mai prima del testo.
- Le scene si costruiscono una alla volta, a piccoli pezzi, così la pagina non si blocca mai mentre prepara la grafica.
- La configurazione grafica avviene in background prima che venga disegnato il primo fotogramma.
- I dispositivi senza un chip grafico utilizzabile ricevono un’immagine statica invece di una pagina bloccata.
Lo scaffale da museo in cima a Then & now mostra tutti e otto i pezzi insieme, quindi usa versioni leggere di ogni modello: semplificate, compresse e caricate solo quando servono.
Dove andrà ora
Le tecniche dietro questi busti si portano direttamente nel lavoro per i clienti: configuratori di prodotto, spiegazioni interattive, momenti d’impatto che si caricano in fretta e rispondono al tocco. Costruirli in codice significa che possono cambiare rapidamente quanto il prodotto che accompagnano.
Nel frattempo, vai a far arrabbiare Hulk.