Ed eccoci alla seconda parte dell’approfondimento sulle Basi del 3D! Nella prima parte ci siamo occupati di fare una breve introduzione all’argomento per poi trattare nello specifico:

  • Lo spazio 3d;
  • I solidi e le mesh.

Come già accennavamo con questi appuntamenti introduttivi al mondo della grafica 3d e nello specifico di WebGL vogliamo solo stuzzicare la vostra curiosità per far si che possiate non trovarvi del tutto impreparati nel momento opportuno, e cioè quando inizieremo realmente a giocare con queste nuove e potenti librerie!

In questo incontro ci troveremo ad “affrontare” i restanti elementi necessari per creare un “mondo virtuale”, e cioè:

  • camere;
  • luci;
  • texture.

Iniziamo subito quindi…

 

Le Camere

Immaginate un film girato senza l’uso di alcuna telecamera…ammettetelo…non potete riuscirci! Esattamente come un film anche una scena 3d ha la necessità di avere un punto d’osservazione con tutte le caratteristiche (o quasi) che avrebbe una telecamera per riprendere una scena nella vita reale.

Fino ad ora ci siamo occupati di come possa essere costruita una scena, mentre ora tenteremo di capire come è possibile visualizzare ciò che è stato costruito! La camera rappresenta il punto di vista di una scena (POV – Point of View) da un determinato punto dello spazio secondo una direzione verso la quale “si è rivolti”. A differenza della disposizione di oggetti in un ambiente 2d, la rappresentazione degli oggetti in 3d è notevolmente diversa a seconda del punto di “vista dello spettatore”… a seconda del punto di vista verrà “proiettata” la scena 3d in un piano 2d secondo i criteri che abbiamo esposto la scorsa volta.

Una camera non è quindi altro che un punto di vista settato con determinati valori che impostano correttamente i valori di prospettiva.

Ogni camera è “definita” da alcuni parametri molto importanti:

  • La posizione della camera (VRP – View  Reference Point);
    La posizione di una camera è normalmente valutata con una terna di numeri che ne indica le coordinate( x,y,z) all’interno dello spazio 3d (Punto giallo al centro della camera in fig.1);
  • La direzione nella quale è rivolta la camera (VPN – View Plane Normal);
    La direzione della camera è indicata per mezzo di un vettore rappresentato anch’esso con una terna di numeri (x,y,z) (Asse di colore blu in fig.1).
  • Un proprio sistema di assi cartesiani (VRC – Viewing Reference Coordinate) con origine in VRP ed uno dei tre assi allineato al vettore VPN;
    N.B. Il concetto può sembrare complesso, ma allo stato attuale è utile solo sapere che anche una “camera” ha un suo sistema di assi cartesiani cosi come i solidi e lo spazio 3d (Sistema di Assi  in fig.1)
  • Il “volume di vista” della camera (View Volume);
    Il volume di vista della telecamera rappresenta la porzione di scena che risulta visibile dal punto d’osservazione definito.
    Il volume di vista è dato dai due piani perpendicolari all’asse della direzione del VRC (ossia alla direzione in cui si guarda), che servono a delimitare il campo visivo.
    Il primo piano è il NEAR CLIPPING PLANE che definisce il piano di partenza dal quale il volume di vista inizierà (e cioè il piano dal quale gli oggetti verranno visualizzati) mentre il secondo è il FAR CLIPPING PLANE che serve a definire il piano più distante oltre il quale non verrà visualizzato più nulla.
    Cosi facendo il volume di vista risulta limitato da 6 superfici che formano un tronco di piramide detto VIEW FRUSTUM (VF), che consente di gestire il clipping 3d (Fig.2).
    Niente paura…tentiamo subito di capire…
    Per clipping 3d è una tecnica per la quale si individuano nella scena i solidi (o parti di esse) che vengono realmente visualizzate a seconda del punto di vista dell’osservatore (o della camera quindi). Tutto ciò che non sarà visualizzato difatti non sarà “utile” per la scena 3d in quell’esatto momento, e quindi non verrà visualizzato (risparmiando notevoli risorse nei calcoli necessari al rendering).
    Ovviamente come si può ben immaginare il concetto è molto più complesso di come lo abbiamo esposto, ma allo stato attuale ci basta questa semplice descrizione.
  • L’inclinazione della camera (VUV  – View-Up Vector).
    Stabilita normalmente da un vettore chiamato Vettore-UP .

Può essere utile sapere come sono comunemente le trasformazioni applicabili ad una “camera” e cioè:

  • Pan:  Rotazione della camera sul proprio centro;
  • Dolly: Movimento in avanti ed indietro della camera;
  • Orbit: Spostamento della camera lasciando inalterata la distanza dall’oggetto inquadrato;
  • Truck: Movimento che non varia la direzione dell’inquadratura;
  • Roll: Rotazione su uno degli assi della camera.
  • Zoom: Variazione del Volume di Vista.


Le Luci

Se ci trovassimo in una stanza completamente buia qualunque oggetto popolasse la stanza non sarebbe visibile ai nostri occhi. Per riuscire a valutare la forma, il colore, la rugosità di qualunque oggetto è necessaria l’interazione tra la luce e la materia.
Dato ciò (che in realtà è abbastanza noto come concetto) ci rendiamo conto che per riportare in computer grafica gli stessi effetti sulla scena 3d rappresentata è fondamentale simulare il comportamento della luce.

Uno dei più comuni modelli di illuminazione utilizzati è il Phong Shading, ed è quello che andremo a valutare per capire i concetti. Nel mondo reale esiste la luce, ma nella rappresentazione della luce in grafica 3d è meglio distinguerla in 3 tipi fondamentali:

  • Ambientale: è la luce che illumina uniformemente la scena: non è di tipo direzionale quindi ed influisce su ogni singolo poligono della scena in maniera del tutto uguale.
  • Direzionale: è una luce emessa uniformemente ma da una direzione specifica. Questo genere di luce illumina quindi solo i poligoni effettivamente “colpiti” da questa fonte d’illuminazione. Un esempio del tutto “naturale” è proprio la luce del Sole.
  • Punto: è una luce che viene emessa da un punto in tutte le direzioni. Un esempio classico è quello della lampadina.

Quando la luce colpisce una superficie può essere rappresentata come:

  • Luce ambiente: Non proviene da una direzione in particolare, e quindi non crea riflessi in nessuna direzione.
    Colpendo la totalità della superficie con la stessa intensità, l'osservatore percepisce la stessa intensità di colore ovunque sia il punto d’osservazione. Ciò attribuisce un colore unico ed uniforme alla superfice rendendola senza effetto tridimensionale.
  • Luce diffusa: Proviene da una direzione specifica ma non viene riflessa in una direzione particolare.
    L’intensità della luce sulla superficie dipende dalla posizione della superficie e nello specifico dall’angolo formato dalla direzione luce e la normale della superficie (come accennato la scorsa volta). Questo variare di intensità consente di far apparire su tutta la superficie l’effetto 3d, applicando colori più o meno intensi alle varie facce della superficie.
  • Luce speculare: Come la luce diffusa proviene da una direzione specifica ed inoltre viene riflessa in una direzione particolare.
    Questo effetto crea il classico effetto luccichio, che varia a seconda del tipo di materiale è fatta la superficie (es.: il legno, il metallo, etc…).

E' possibile vedere le differenze in fig.3 (immagine presa da wikipedia).

Il colore di ogni singola porzione della scena è quindi una combinazione del colore delle luci e di come i materiali reagiscono alla luce stessa (sorvolando momentaneamente un altro fattore che riguarda effetti particolari di illuminazione e le eventuali trasparenze).

Ogni fonte luminosa quindi ha:

  • Posizione all’interno dello spazio 3d;
  • Colore e intensita' della luce emessa per ciascuno dei tre tipi di luce (ambiente, diffusa, speculare);
  • Altri parametri (non strettamente interessanti in questo momento).

I materiali delle superfici invece hanno:

  • Quantità di luce riflessa dalla superficie per ciascuno dei tre tipi di luce (ambiente, diffusa, speculare);
  • Eventuale quantità di luce emanata (nel caso di materiali “luminosi”);
  • Intensita' della luce riflessione speculare.

La luce verrà in ogni modo approfondita in un appuntamento specifico, dato che ad esempio non abbiamo ancora parlato di un aspetto che ogni luce che si rispetti proietta…le ombre!

 

Le Texture

Abbiamo già valutato intrinsecamente che le superfici hanno un colore a seconda delle luci che le colpiscono ed a seconda dei parametri dei riflessi impostate. Ma per rendere ancor più realistici gli oggetti nella scena 3d è possibile sovrapporre alle superfici delle immagini, che prendono comunemente il nome di Texture.

Comunemente si intende per Texture un’immagine bidimensionale che viene applicata sui poligoni in modo da rendere facilmente degli effetti visivi altrimenti troppo complessi da gestire. Ad esempio è molto più semplice applicare un’immagine delle assi di legno ai due triangoli che compongono la faccia di un cubo che vogliamo ad esempio far diventare la classica cassa di legno, piuttosto che dover modellare la singola tavola! Infatti per rendere con la superficie le singole tavole dovremmo avere un modello dal numero notevole di poligoni, mentre cosi possiamo gestire il tutto con una semplice immagine applicata sul modello a basso numero di poligoni.

Un altro degli esempi più classici è dato dagli alberi…dato che nelle texture applicate è possibile gestire le trasparenze (per mezzo di tecniche che sfruttano i canali alpha) è facile immaginare come sia semplice realizzare un albero applicando la texture di un albero ad un semplice quadrato composto da due triangoli…
ma come si fa ad applicare queste immagini ad un modello?

Il tutto è possibile per mezzo del procedimento chiamato texture mapping. Per disegnare le immagini sulle superfici è opportuno utilizzare un sistema bidimensionale di coordinate di texture definite comunemente con (u,v).

In fase di mappature delle texture ad ogni vertice di ogni singolo triangolo (x,y,z) viene assengato il corrispondente punto nello spazio (u,v), in modo che in fase di rendering venga associato ad ogni pixel della texture (detto texel)  l’eventuale punto corrispondente della superficie 3d (ovviamente rielaborato con il valore di riflessione della luce sulla superficie in quel pixel). Questa tecnica ha il nome di UV Mapping è effettuata per mezzo di modalità diretta ed inversa (che non affronteremo in questa occasione).

E’ importante sapere che le tecniche di texture mapping sono ad oggi molto evolute e consentono di gestire la tipologia di texture utilizzata a seconda della distanza dal punto d’osservazione, per ottimizzare la qualità della texture (un esempio è la tecnica di mipmapping).

Le più comuni tipologie di coordinate di mappatura sono:

  • Planari: la texture viene disposta su un piano proiettata planarmente sul modello;
  • Cubica: la texture viene disposta e proiettata come se fosse distribuita sui lati di un cubo;
  • Cilindriche: la texture viene disposta e proiettata come se fosse distribuita su di un cilindro;
  • Sferica: la texture viene disposta e proiettata come se fosse distribuita su di una sfera;
  • Faccia: la texture viene disposta su un piano proiettata su ogni faccia sul modello.

Alcune sono rappresentate in fig.4.

Oltre alle texture è possibile rendere incredibilmente realistici le superfici per mezzo di ulteriori tecniche come Bump Mapping, Shader, Normal Mapping, etc…
Questi argomenti avanzati saranno affrontati in seguito.

 

Conclusioni

Abbiamo finito la nostra panoramica sulle parti del nostro “mondo virtuale” che andremo a sfruttare maggiormente nel nostro viaggio, ed anche se nessuno degli argomenti è stato in maniera particolarmente approfondita abbiamo almeno le basi per capire facilmente come lavoreremo nei prossimi appuntamenti.

Ci vediamo alla prossima con un’infarinatura di Vettori, Matrici, e tutto quello che serve per capire ancora un pizzico di più prima del nostro primo triangolo con WebGL!

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();
}