Benvenuti a questo secondo appuntamento del viaggio che abbiamo intrapreso nei meandri della recentissima libreria WebGL, che, ricordiamo, è un’interfaccia di programmazione (API) che consente di generare e gestire la grafica 3d direttamente nelle pagine web (per maggiori dettagli torna all’appuntamento precedente).

Come già accennavamo la scorsa volta è necessario però, prima di affrontare un viaggio di questo genere, che si abbiano almeno chiari dei concetti base sul mondo della grafica tridimensionale, oltre che ad alcuni fondamenti di matematica (algebra lineare per lo più).
Questi temi verranno comunque trattati come un semplice spunto per poi approfodire "da se"  questi due “mastodontici” argomenti (tratteremo solo gli aspetti che potranno venire utili allo scopo). Vogliamo solo stuzzicare la vostra curiosità per far si che possiate non trovarvi del tutto impreparati nel momento in cui affronteremo più a fondo le WebGL.

Ma partiamo subito quindi dalle basi del 3d!

Una delle definizioni (ovviamente riadattata) che preferisco per definire la grafica tridimensionale, è quella offerta dal famoso “tomo” OpenGL Super Bible:

“La computer grafica 3d è (attualmente) la rappresentazione di immagini bidimensionali che offrono un’illusione di profondità o di una “terza dimensione”.

Questo spiega chiaramente e con poche parole la magia di questa nuova arte…l’illusione di offrire un “mondo virtuale” che non esiste riuscendo, per mezzo di complessi algoritmi, a regalarci ad esempio effetti speciali strabilianti nei famosi blockbuster di Hollywood, o videogiochi con un impatto visivo sconvolgente.
Ottenere tutto ciò è però un processo molto lungo e che richiede una notevole potenza di calcolo da parte dei computer, ma per ora tentiamo solo di capire come è creato questo “mondo virtuale”.

Descriveremo questo “mondo virtuale” in brevi trattazioni delle sue “parti” principali:

  1. Lo spazio 3d;
  2. I solidi e le mesh;
  3. Le camere;
  4. Le luci;
  5. Le texture.


Lo spazio 3d (Il sistema di coordinate cartesiano a tre assi)
Per spazio 3d intendiamo l'area virtuale che ospita la nostra scena, che concettualmente risulta priva di confini.
Valutiamo lo spazio in cui costruiremo questo mondo con un sistema di coordinate cartesiano a tre assi .
A differenza dei famosi sistemi di assi cartesiani studiati a scuola (quelli con x e y per intenderci) che consentono di definire punti in un piano bidimensionale,  un sistema di coordinate cartesiano a tre assi introduce un nuovo asse e cioè quello definito con la lettera z cosi da poter descrivere un punto in uno spazio tridimensionale.

Nello standard della computer grafica gli assi definiscono con:

  • x la larghezza;
  • y l’altezza;
  • z la profondità.

I sistemi di coordinate cartesiane a tre assi possono essere di tipo sinistrorso o destrorso, e si differiscono per la direzione dell'asse z. Quello che affronteremo è di tipo destrorso, e cioè con l’asse z rivolto verso l’osservatore.

Per mezzo di questo sistema di assi è possibile definire dei punti indicandone la loro posizione nello spazio tridimensionale, definendoli con una terna di numeri che ne indicherà le coordinate (x,y,z) che rappresentano la distanza del punto dai 3 piani ortogonali xy, yz e zx.

I valori che possono assumere le coordinate possono essere sia positivi che negativi, a seconda della loro posizione rispetto all'Origine del sistema di assi,  che è il punto di incontro dei 3 assi con coordinate (0,0,0).

Per avere chiaro il concetto è possibile fare riferimento alla figura 1 ed 1bis.


E’ necessario per definire infine il sistema di coordinate anche un’unità di misura che ci consentirà di muoverci all’interno del sistema stesso (ma ne riparleremo successivamente).

Il suddetto sistema di coordinate dello spazio 3d viene definito Globale.

Ma come fare a riprodurre uno spazio 3d di questo genere e riportarlo quindi su un sistema (inevitabilmente) 2d come i nostri monitor?
La chiave di tutto è la Proiezione delle coordinate 3D su una superficie 2D, che ci consente di riportare sul piano 2d la Prospettiva che è l’effetto per cui “gli oggetti più distanti appaiono più di piccoli di oggetti vicini”.
Le proiezioni sono quindi il meccanismo con il quale è possibile riportare modelli 3d su di una vista bidimensionale per mezzo della trigonometria e dell'algebra delle matrici…ma fortunatamente WebGL (coadiuvata da librerie come glMatrix) ci vengono in soccorso!

Esistono principalmente due tipi di proiezioni (che qui per ovvie ragioni non approfondiremo) che sono utili nella grafica tridimensionale e sono:

  1. Parallele (tutti gli oggetti sembrano delle stesse dimensioni indipendentemente dalla distanza) Fig.2;
  2. Prospettiche (gli oggetti più distanti appaiono più di piccoli di oggetti vicini) Fig.3.


Una scena rappresentata in uno spazio 3d è popolata da vari elementi, a partire ad esempio da un semplice cubo, sino ad arrivare a complessi modelli.
La Proiezione ci consentirà quindi di proiettare i vari elementi della nostra scena 3d, rispettando e rendendo l’illusione della profondità riportandone i punti sul piano 2d in maniera coerente con essa.

N.B. Per rendere completa "l'illusione" sono necessari, oltre alla proiezione, anche moltissimi altri passaggi (come la rimozione delle parti dei modelli non visibili dalla camera, la gestione delle luci e delle ombre, etc…) che affronteremo man mano andando avanti con gli argomenti.

I solidi e le mesh
Per costruire delle scene all’interno del nostro spazio 3d è necessario inserire degli oggetti però!
Ogni elemento o solido della scena è possibile definirlo per mezzo di vertici (i punti di cui parlavamo prima), di spigoli e di facce (rappresentate da poligoni).

La rappresentazione di modelli nella nostra scena sarà costituito quindi da punti che saranno definiti nel sistema cartesiano che abbiamo precedentemente descritto indicandone le coordinate (x,y,z), che “uniti” tra loro ci consentiranno di rappresentare ogni oggetto esistente (Fig.4).

La congiunzione di due punti definisce uno spigolo (Fig.5), mentre una faccia è la congiunzione di 3 o più punti (Fig.6).



La struttura geometrica superficiale di un modello 3D è quindi costituita da una serie di elementi poligoni (le facce) adiacenti, e prende il nome di Mesh.
Nella grafica tridimensionale interattiva normalmente ogni solido inserito in una scena 3d viene rappresentato per mezzo di una serie di facce triangolari, perchè per mezzo di essi è possibile definire ogni tipo di modello per la legge che “per tre punti non allineati passa un solo piano” (oltre che accellerare anche le operazioni di calcolo che tratteremo nell'approfondimento relativo).

Ad esempio la semplice rappresentazione di un Cubo può essere definita indicandone gli 8 vertici e indicandone quindi le 6 coppie di triangoli che ne definiscono le facce (Fig.7).

E’ tanto divertente quanto utile far notare un’aspetto importante della rappresentazione dei solidi…ciò che viene realmente rappresentato è solo la superficie del solido, e non tutto “l’interno” contenuto dal solido! Difatti è ovviamente inutile rappresentare (e quindi calcolare!) ciò che non sarebbe visibile!

Infine un'altra caratteristica molto importante dei solidi è che ogni poligono che compone la mesh “porta con se” una Normale.
La Normale è il vettore matematico perpendicolare alla superficie del poligono…ma a questo punto  voi probabilmente vi chiederete…e quindi? :)
Ci basta sapere attualmente che la Normale di un poligono viene utilizzata per determinare “l’impatto delle luci” sul poligono stesso, per stabilire le facce visibili, etc… ma anche questo concetto sarà riaffrontato al momento opportuno.

Per memorizzare tutti questi elementi che definiscono i modelli nello spazio 3d esistono specifici modelli matematici che affronteremo nell'appuntamento Fondamenti Matematici per Grafica Tridimensionale.

Spero che questa prima parte delle Basi di grafica tridimensionale siano state piacevoli e semplici alla lettura di più utenti possibile…Vi aspetto alla seconda parte per continuare a fare una panoramica di camere, luci e texture!

Alla prossima…
Francesco Sciuti

The following two tabs change content below.

Francesco Sciuti

Freelance a Vroom Agency
Amante dello sviluppo web, della grafica 3d e della buona musica (che non guasta mai!), 'web developpa' tutto il giorno...e prova a trovare sempre il bandolo della matassa in questo allegro ma sconfinato mondo.

//life motto
if(sad() === true) {
    sad().stop();
    beAwesome();
}