Lezione 5: Materiali, luci e texture

Obiettivi della lezione

Il cubo della Lezione 4 gira, e sembra un cubo di un tutorial. La distanza fra quello e un oggetto che sembra una cosa vera la fanno tre righe, non tre settimane. Questa lezione è quelle tre righe, più il perché.

Quando arrivi in fondo hai imparato a:

• Usare roughness e metalness sapendo che cosa muovono;
• Mettere un ambiente alla scena, che è il singolo cambiamento con la resa più alta;
• Scegliere fra le luci quella che serve, e sapere quanto costano le ombre;
• Caricare una texture senza sbagliare lo spazio colore;
• Accendere il tone mapping e capire perché prima le luci alte «bruciavano».

Perché una scena appena montata sembra finta

Tre ragioni, e si risolvono in ordine inverso alla fatica che costano.

Non c'è niente attorno. Nel mondo vero un oggetto è illuminato da tutto: il muro, il pavimento, la finestra. Nella tua scena c'è una lampadina nel vuoto. È la ragione principale, e si toglie con due righe.

Le superfici sono perfette. Una plastica vera ha micrograffi, una vernice ha buccia d'arancia. roughness serve a questo, e quasi nessuno lo muove dal valore di partenza.

I colori escono dal tubo. Senza tone mapping i punti luminosi vanno a bianco netto e il resto resta piatto, come una foto scattata male.

roughness e metalness, che sono quasi tutto

MeshStandardMaterial lavora a modo suo, che si chiama PBR: invece di farti regolare venti manopole ti chiede com'è fatta la superficie nel mondo vero, e i conti li fa lui.

La regola che serve saper leggere: metalness sta a 0 oppure a 1, e i valori in mezzo servono quasi solo dove un metallo è coperto da qualcos'altro, per esempio della vernice scrostata. Le mezze misure messe a caso danno quel colore plasticoso che non si capisce cos'è.

L'ambiente: le due righe che cambiano tutto

Three.js ha una stanza finta già pronta, fatta apposta per questo: quattro pareti, un pavimento e qualche luce. La trasformi in illuminazione d'ambiente e la appendi alla scena.

import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

const pmrem = new THREE.PMREMGenerator(renderer);
scena.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;

Da quel momento ogni materiale standard della scena è illuminato da tutte le direzioni, i metalli riflettono qualcosa e le superfici lucide hanno dei riflessi allungati invece di due puntini. Provalo togliendo tutte le altre luci: quasi sempre la scena migliora.

PMREMGenerator prende quella stanza e la macina in una forma che i materiali sanno usare in fretta. Lo 0,04 è quanto sfocare: più alto vuol dire riflessi morbidi.

Quando vorrai un ambiente vero al posto della stanza finta, si carica un file HDR con RGBELoader e si mette nello stesso scena.environment. Il resto del codice non cambia, ed è il momento in cui una scena comincia davvero a sembrare una fotografia.

Le luci, e quanto costano

• AmbientLight: aggiunge la stessa quantità di luce dappertutto. Non fa volume, serve solo a schiarire le ombre. Costa zero.
• HemisphereLight: un colore da sopra e uno da sotto. Con due righe dà l'idea del cielo e del terreno. Costa quasi zero.
• DirectionalLight: raggi paralleli, come il sole. È quella che dà il volume e le ombre nette.
• PointLight e SpotLight: una lampadina e un faretto. Belle, e ognuna con l'ombra accesa costa parecchio.

Lo schema che funziona quasi sempre: l'ambiente fa il grosso, una direzionale dà la direzione, e basta. Tre o quattro luci in una scena da sito sono quasi sempre il segno che manca l'ambiente.

Le ombre, che si pagano a parte

renderer.shadowMap.enabled = true;
sole.castShadow = true;
sole.shadow.mapSize.set(1024, 1024);   // 2048 e' gia' caro, 512 spesso basta
cubo.castShadow = true;
pavimento.receiveShadow = true;

Ogni luce che proietta ombre fa ridisegnare la scena una volta in più, dal suo punto di vista. Due luci con le ombre vuol dire tre disegni per fotogramma invece di uno. Su un oggetto che gira in una pagina, quasi sempre l'ombra non serve: quello che serve è il volume, e quello lo dà l'ambiente.

Le texture, e l'errore che fanno tutti

const loader = new THREE.TextureLoader();

const colore = loader.load('/texture/legno-colore.jpg');
colore.colorSpace = THREE.SRGBColorSpace;   // ⚠️ SOLO sulla mappa del colore

const rugosita = loader.load('/texture/legno-roughness.jpg');
const normali  = loader.load('/texture/legno-normal.jpg');

const materiale = new THREE.MeshStandardMaterial({
  map: colore,
  roughnessMap: rugosita,
  normalMap: normali
});

Quella riga con colorSpace è l'errore più comune del mestiere, e si vede come un oggetto slavato o troppo scuro senza capire perché. La regola è secca: le mappe che contengono un colore vanno dichiarate sRGB, quelle che contengono dei numeri no. Colore ed emissione sono colori; rugosità, metallicità, normali e occlusione sono numeri, e trattarli come colori li storce.

Le tre mappe che rendono di più, in ordine: la normal, che dà il rilievo senza aggiungere un triangolo; la roughness, che fa variare la lucidità sulla superficie ed è quello che distingue un oggetto usato da uno appena modellato; la color, che è la più ovvia e da sola fa meno di quanto sembri.

Il tone mapping

renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;   // la manopola dell'esposizione

Il calcolo della luce produce valori che vanno oltre il bianco dello schermo. Senza tone mapping quei valori vengono tagliati di netto: i riflessi diventano macchie bianche piatte e tutto il resto sembra spento. Con ACES vengono compressi come li comprime una pellicola, quindi i punti luminosi restano leggibili e conservano un po' di colore.

Cambia tutta la faccia della scena, e toneMappingExposure diventa la manopola con cui regoli il chiaro e lo scuro senza toccare le luci una per una.

Laboratorio: dal cubo del tutorial a un oggetto

Obiettivo: lo stesso oggetto della Lezione 4 che smette di sembrare un esercizio.

Consegna

1. Fai la prova del metallo: metti metalness: 1, roughness: 0.15 sul tuo oggetto, senza ambiente. Guarda com'è scuro. Poi aggiungi le due righe dell'ambiente e guarda di nuovo. È il confronto che spiega la lezione.
2. Togli tutte le luci lasciando solo l'ambiente. Quasi sempre è già meglio di prima. Poi rimetti una sola direzionale per dare la direzione.
3. Accendi il tone mapping e muovi toneMappingExposure fra 0,6 e 1,6 finché la scena non ti convince.
4. Percorri la tabella dei materiali: prova il tuo oggetto come plastica opaca, alluminio e cromo, tenendo tutto il resto fermo.
5. Metti una normal map presa da un archivio libero e guarda il rilievo comparire senza un triangolo in più. Poi dichiarala per sbaglio come SRGBColorSpace e guarda come si sporca: così quell'errore lo riconosci a vista.
6. Prova le ombre e misura i fotogrammi al secondo prima e dopo, con mapSize a 512, 1024 e 2048.

Mini-test di autoverifica

Sezione A: risposta multipla

1. metalness di solito vale:
   a) un valore a caso fra 0 e 1   b) 0 oppure 1   c) sempre 0,5   d) dipende dal colore
2. Un oggetto con metalness: 1 e nessun ambiente appare:
   a) bianco   b) scuro, con qualche puntino   c) uguale a prima   d) trasparente
3. scena.environment serve a:
   a) mettere uno sfondo   b) illuminare da tutte le direzioni   c) caricare i modelli   d) fare le ombre
4. colorSpace = THREE.SRGBColorSpace va messo:
   a) su tutte le texture   b) solo su quelle che contengono un colore   c) solo sulle normal map   d) mai
5. Una luce con le ombre accese:
   a) costa come le altre   b) fa ridisegnare la scena una volta in più   c) rallenta solo il caricamento   d) non si può fare in WebGL
6. Senza tone mapping, i punti luminosi:
   a) spariscono   b) diventano macchie bianche piatte   c) diventano neri   d) lampeggiano

Sezione B: risposta aperta

7. (3 punti) Descrivi il materiale del tuo oggetto con metalness, roughness e le mappe che useresti, e di' a che cosa somiglia nel mondo vero.
8. (3 punti) Spiega perché l'ambiente cambia la scena più di quanto la cambi aggiungere una terza luce.

Riassunto della lezione