3D Graphics
Una stanza, e come una GPU la disegna
Prima esplorazione «grafica classica» del quaderno: una scena reale in Three.js, e sopra ci mettiamo un deferred renderer con un vero G-buffer per aprire la pipeline e guardarci dentro, passo per passo.
La scena è un ambiente chiuso: una stanza con tre finestre da cui entra la luce del sole, e tre solidi al centro — un cubo rosso, una piramide blu e una sfera gialla. Ci si muove con una flying-camera (WASD + mouse). Fin qui è una demo di grafica in tempo reale come tante.
La parte interessante è come viene renderizzata. Invece del solito forward rendering, la scena usa una pipeline deferred: un primo passaggio disegna la geometria scrivendo, per ogni pixel, quattro buffer contemporaneamente (Multiple Render Targets) — albedo, normali in world-space, posizione world-space e profondità. Questo insieme di texture è il G-buffer. Un secondo passaggio (un quad a schermo intero) legge il G-buffer e ricostruisce l'illuminazione — il risultato finale, la «Beauty».
trascina il divisore: step vs. beauty
Perché deferred, e cosa si impara a guardarci dentro
Il forward rendering illumina ogni frammento mentre disegna la geometria: se molte superfici si sovrappongono, paghi l'illuminazione anche per pixel che verranno coperti. Il deferred separa i due problemi — prima cosa e dove (il G-buffer), poi quanta luce (il lighting pass che gira una volta per pixel di schermo). È la base di come molti motori gestiscono tante luci; ed è anche un ottimo strumento didattico, perché rende materiali i termini che di solito restano impliciti.
Guardare World Normals spiega da solo l'illuminazione di Lambert: il pavimento è verde (normale verso l'alto), il soffitto magenta, le pareti su assi opposti hanno colori opposti. Linear Depth mostra la profondità rimappata sulla stanza. Albedo è il colore «piatto» senza luce — il punto di partenza da cui la Beauty aggiunge diffuso e speculare. È la stessa scena, vista attraverso gli strati che la producono.