Lezione 1: Quando un sito 3D vale la pena

Obiettivi della lezione

I siti 3D che girano nei premi di web design hanno una cosa in comune: costano. Costano peso da scaricare, batteria del telefono di chi guarda, e ore di chi li fa. Ogni tanto valgono il prezzo, e quando lo valgono non c'è niente che li sostituisca. Questa lezione serve a capire da che parte sta il tuo caso, prima di scrivere una riga.

Alla fine di questa lezione sarai in grado di:

• Distinguere le tre cose che chiamiamo «sito 3D», che sono tre mestieri diversi;
• Capire che cosa fa la scheda grafica quando apri una pagina con WebGL;
• Riconoscere quando il 3D aggiunge qualcosa e quando è un vezzo che allontana le persone;
• Fare il conto dei costi veri: peso, tempo di lavoro, batteria, chi resta fuori;
• Scegliere il progetto su cui lavorerai per tutto il corso.

Tre cose diverse con lo stesso nome

Quando qualcuno dice «voglio un sito 3D» può intendere tre lavori che si somigliano da fuori e si assomigliano poco da dentro.

• Il movimento che segue lo scorrimento. Niente 3D vero: elementi piatti che si spostano, si scalano e si scoprono mentre scendi. Lo fa GSAP da solo, sta in pochi kilobyte e funziona ovunque. È il 70 per cento di quello che alla gente sembra un sito 3D.
• Un oggetto 3D dentro alla pagina. Una scarpa che gira, un prodotto che si monta e si smonta, una mappa che si inclina. Qui serve WebGL, e serve capire un modello, una luce e una camera.
• Il sito che è una scena. Si naviga dentro a un mondo, la pagina è un pretesto. Costa come un piccolo videogioco, e come un videogioco va provato su venti dispositivi.

Le prime due sono il mestiere di questo corso. La terza la vediamo per sapere dove finisce la strada, e perché di solito conviene fermarsi prima.

Che cosa succede quando apri una pagina con WebGL

Una pagina normale la disegna il browser: tu scrivi dei tag, lui calcola dove vanno e li dipinge. Con WebGL cambia il pittore. WebGL è una porta verso la scheda grafica: apri un <canvas>, e da quel momento dentro a quel rettangolo disegni tu, mandando alla GPU dei triangoli e dei programmini che dicono di che colore devono venire.

Tre parole che ti servono e che poi non ripeto più.

• Mesh: un oggetto, fatto di triangoli. Una sfera liscia è una sfera con tanti triangoli piccoli.
• Shader: il programmino che gira sulla scheda grafica e decide dove finisce ogni vertice e di che colore è ogni pixel. Scriverli a mano è un mestiere a parte; per quasi tutto quello che farai ci sono già scritti.
• Draw call: una chiamata alla scheda grafica per disegnare qualcosa. Poche e grosse vanno bene, tante e piccole fanno arrancare il telefono. Torna nella Lezione 7.

Tu non parlerai quasi mai a WebGL direttamente. Parlerai a Three.js, che è la libreria che ci mette sopra le parole che una persona capisce: scena, camera, luce, oggetto. Sotto resta WebGL, e ogni tanto si vede.

Quando il 3D si guadagna il posto

Il 3D funziona quando fa vedere qualcosa che una foto non fa vedere. Tutto il resto è decorazione, e la decorazione la si paga senza incassare.

Si guadagna il posto quando:

• La forma conta e va girata: un oggetto che si compra con gli occhi, una sedia, una scarpa, un macchinario.
• Bisogna far capire un dentro: un motore che si smonta, una casa in sezione, un dispositivo con i pezzi che si separano.
• La configurazione è il prodotto: scegli colore, materiale, misura e lo vedi cambiare. Qui il 3D è il modulo d'ordine.
• Lo spazio è il messaggio: un percorso, una mappa in rilievo, un dato che ha tre dimensioni per davvero.

E non si guadagna il posto quando serve a dire «siamo innovativi». Quella frase la dicono tutti e nessuno la legge, e intanto chi arriva dal telefono in tram aspetta sei secondi una scena che poi non tocca.

Il conto dei costi

Quattro voci, e nessuna si può saltare.

Il peso. Three.js compresso sta sotto ai 200 KB. Il peso vero lo fanno i modelli e le texture. Un modello fatto bene sta in qualche megabyte, uno preso da un archivio senza guardarlo ne fa venti. Per confronto: una pagina normale di questo sito sta sotto ai 150 KB in tutto.

Il tempo di lavoro. La prima scena si fa in un pomeriggio. Farla stare bene su un telefono di tre anni fa è un'altra settimana, e quella settimana c'è sempre.

La batteria e il calore. Una scena che gira a schermo pieno tiene la GPU accesa. Sul portatile si sente la ventola, sul telefono si sente la mano. È un costo che non si vede nei tuoi strumenti e si vede sulla faccia di chi guarda.

Chi resta fuori. Chi ha WebGL spento o una scheda che il browser mette in lista nera, chi naviga con la lettura facilitata, chi ha chiesto al sistema operativo di ridurre le animazioni. Sono una fetta vera di chi arriva, e nella Lezione 7 vediamo come si serve senza rifare il sito.

Laboratorio: guarda tre siti e scegli il tuo

Obiettivo: arrivare alla fine della lezione con il progetto su cui lavorerai per sette lezioni, e con il conto dei suoi costi.

Passo 1, smonta tre siti

Prendi tre siti che ti piacciono e che sembrano 3D. Per ognuno, con gli strumenti per sviluppatori aperti, rispondi a quattro domande:

1. Quale delle tre cose è? Movimento piatto, oggetto 3D, o scena intera? (Cerca un <canvas> nel DOM: se manca, è movimento piatto.)
2. Quanto pesa la pagina in tutto, nella scheda Rete, a cache vuota?
3. Che cosa succede se scorri velocemente? Resta fluido o singhiozza?
4. Che cosa aggiunge il 3D che una foto non aggiungerebbe? Scrivilo in una frase. Se non ci riesci, hai trovato la risposta.

Passo 2, scegli il tuo progetto

Scegline uno vero: un prodotto tuo, di un cliente, o una cosa che vuoi nel portfolio. Scrivilo in una frase con questa forma: «Chi arriva su questa pagina deve capire X, e il 3D serve perché Y».

Passo 3, il conto

Compila questa tabella per il tuo progetto, anche a spanne. I numeri li correggerai nella Lezione 7, quando misurerai sul serio.

Mini-test di autoverifica

Sezione A: risposta multipla

1. Un sito dove gli elementi si muovono mentre scorri, senza <canvas>:
   a) usa WebGL   b) è movimento piatto, lo fa GSAP   c) è una scena   d) è impossibile
2. WebGL è:
   a) una libreria di animazione   b) una porta verso la scheda grafica   c) un formato di modello   d) un browser
3. Una draw call è:
   a) un modello   b) una chiamata alla scheda grafica per disegnare   c) una texture   d) un evento del mouse
4. Il peso di una pagina 3D di solito lo fanno:
   a) Three.js   b) i modelli e le texture   c) i fogli di stile   d) gli shader
5. Per un sito con un oggetto che gira, la documentazione di Three.js consiglia:
   a) WebGPURenderer   b) WebGLRenderer   c) nessuno dei due   d) il canvas 2D
6. Se togliendo il 3D la pagina dice ancora tutto:
   a) il 3D va caricato per primo   b) il 3D è un di più, e si costruisce come tale   c) il sito è sbagliato   d) serve WebGPU

Sezione B: risposta aperta

7. (3 punti) Descrivi il tuo progetto nella forma «chi arriva deve capire X, e il 3D serve perché Y», e di' quale delle tre cose è.
8. (3 punti) Elenca le quattro voci di costo del tuo progetto con una stima, e spiega quale ti preoccupa di più e perché.

Riassunto della lezione