Ed eccoci ad un nuovo appuntamento del nostro percorso che ci porterà a scoprire le librerie WebGL, che come ormai sappiamo porteranno sulle pagine web il 3D senza l’ausilio di plugin esterni.

Nei precedenti appuntamenti ci siamo occupati di fare luce sugli aspetti generali della libreria, e successivamente di offrire una breve panoramica sugli elementi che compongono una classica scena 3D.

Abbiamo ampiamente parlato di come vengono realizzati gli oggetti nello spazio 3d, e di come vengono rappresentati per mezzo di punti e facce che sono proiettate in un piano 2d consentendo di offrire l’illusione che esista nei nostri monitor una terza dimensione.

Ma cosa ci sta dietro questi elaborati concetti? Beh…ci sta un po’ di matematica!
Ovviamente anche in questa lezione ci premureremo di offrirvi i concetti  fondamentali in modo che possiate eventualmente affrontare ed approfondire questa materia particolarmente complessa ed articolata.

E’ arrivato il momento di iniziare…

Abbiamo visto negli scorsi appuntamenti che in un “mondo virtuale” esistono sistemi di coordinate che consentono di specificare punti nello spazio 3D, ed abbiamo anche notato che è utile (se non fondamentale) far coesistere in una stessa scena più sistemi di coordinate differenti, esempio per i solidi o per le camere.
Per orientarci è inevitabile distinguere questi sistemi di coordinate definendoli come sistemi di riferimento.

Esistono svariati sistemi di riferimento, ma quelli fondamentali per i nostri scopi sono:

  • Sistema di Coordinate Globali  (che abbiamo visto in occasione della scena 3d);
  • Sistema di Coordinate Locali  (che abbiamo visto in occasione dei solidi, delle camere, etc…).

I solidi (come il cubo del secondo appuntamento) possono spostarsi, ruotare o ridimensionarsi all’interno della scena 3d, ma lo fanno senza cambiare forma nonostante le coordinate dei loro punti cambino continuamente dato che i punti si sposteranno nello spazio…il merito di questo “miracolo” è proprio la possibilità di gestire un sistema di coordinate locale per ogni singolo elemento della scena che consentirà di lasciare i punti inalterati “localmente”.

Ma spieghiamoci un po’ meglio…

Il sistema di coordinate chiamato Globale che rappresenta le coordinate dello spazio 3D ci consente di determinare la posizione degli oggetti all’interno della scena. Tutti i punti di ogni singolo elemento di una scena viengono difatti rappresentati per mezzo di coordinate globali prima di poter essere renderizzati in una scena. Ma per consentire ad un oggetto di non variare la propria forma anche se subisce anche solo dei semplici spostamenti è necessario stabilire i vertici delle facce anche secondo un sistema di coordinate locali, che non varieranno i vari spostamenti dell’oggetto.

Le coordinate locali come quelle globali trovano il proprio centro nel punto di congiunzione dei tre assi, e normalmente le operazioni di spostamento, rotazione, etc… vengono riferite a questo centro.

Ovviamente la gestione di differenti sistemi di coordinate di riferimento ci costringe (in realtà costringe il nostro povero computer!) ad effettuare delle operazioni di conversione delle coordinate dei punti da un sistema ad un altro…ed eccoci finalmente alle Trasformazioni di Coordinate.

 

Vettori

A questo punto è necessario descrivere lo strumento matematico utile per trattare agevolmente le coordinate (e cioè sostanzialmente un gruppo di numeri)…
(ri)parliamo quindi dei Vettori, che consentono di trattare i gruppi di numeri (in cui ogni numero è definito come Componente) come se fossero un unico valore, e  vengono normalmente identificati per mezzo di una lettera minuscola.

I vettori oltre ad essere sfruttati per memorizzare coordinate, sono anche utilizzate per rappresentare direzioni (da punto a punto), le normali di cui abbiamo parlato nel secondo appuntamento, la velocità di movimento, etc…

Vediamo rapidamente quali operazioni sono possibili tra i vettori, e più in avanti capiremo anche per cosa utilizzarli…

Operazioni tra vettori

Somma o Sottrazione

Corrisponde a sommare o sottrarre le componenti dei vettori.

Moltiplicazione numero e vettore

Corrisponde a moltiplicare ogni componente per il numero.

Prodotto Scalare tra vettori

Corrisponde alla somma dei prodotti delle componenti.

N.B.Questa operazione consente di stabilire la lunghezza della proiezione di un vettore su di un altro, ed è utile ad esempio nel calcolo dell’illuminazione.

 

Prodotto Vettoriale

Corrisponde alla seguente formula

Questo prodotto esiste solo per vettori da 3 componenti (con cardinalità 3) e non ha proprietà commutativa. E’ utile per stabilire un vettore perperdicolare al piano in cui giacciono i due vettori, ed è ad esempio utilizzato nel calcolo delle normali.

 

Matrici

I vettori sono quindi eccellenti mezzi con i quali rappresentare matematicamente le coordinate, ma da soli non bastano per effettuare tutte le operazioni (cioè le trasformazioni) su oggetti 3D; Per fare ciò è necessario affidarsi alle Matrici.

Le matrici sono un insieme bidimensionale di numeri (definiti Elementi), e sono rappresentati per mezzo di righe e colonne (che indicano la Cardinalità della matrice), e viene normalmente indicata per mezzo di una lettera maiuscola.
Nel caso in cui la matrice ha un numero di righe e colonne uguale viene definita come Quadrata, che è il tipo di matrice utile per le operazioni di trasformazione 3D e di proiezione.

Le trasformazioni si applicano infatti moltiplicando il vettore che identifica un punto per la matrice che identifica la trasformazione (che può anche rappresentare più trasformazioni) ed analizziamo le possibili operazioni con le matrici:

Operazioni tra matrici

Somma o Sottrazione

Corrisponde a sommare o sottrarre gli elementi delle matrici.

Moltiplicazione numero e matrice

Corrisponde a moltiplicare ogni elemento per il numero.

Prodotto Matriciale tra matrice e vettore

Il prodotto tra matrice e vettore ritorna come risultato un ulteriore vettore e si ottiene con il prodotto tra i vettori dati dalle righe della matrice ed il vettore.

Prodotto Matriciale tra vettore e matrice

Il prodotto tra vettore e matrice ritorna come risultato un ulteriore vettore e si ottiene con il prodotto tra il vettore ed i vettori dati dalle colonne della matrice.

Prodotto Matriciale tra matrice e matrice

N.B. Il prodotto tra matrici non gode della proprietà commutativa.

 

Coordinate omogenee

E' importante rendere noto il concetto di Coordinate Omogenee, in cui un punto viene descritto da 4 numeri in cui il quarto numero rappresenta una scala (normalmente indicata con la lettera w). Per mezzo del 4 elemento è possibile difatti far corrispondere più quaterne diverse per uno stesso punto, e cioè quelle in cui i 4 numeri sono multipli di uno stesso fattore.

Queste coordinate consentono di implementare la prospettiva, e sono quindi la tipologia di vettore maggiormente utilizzato in grafica tridimensionale, insieme alla matrice 4×4.

 

Le Trasformazioni di Coordinate

E finalmente arriviamo a spiegare come è possibile per mezzo delle trasformazioni di coordinate applicare agli oggetti 3D le varie translazioni, rotazioni, variazioni di scala, etc…

Allo stato attuale delle cose è utile solo conoscere quali operazioni devono essere effettuate per applicare le varie trasformazioni senza scendere nel dettaglio, ma saranno affrontate (se necessario) al momento opportuno.

E’ inoltre molto importante per la gestione delle trasformazioni 3D avere le conoscenze di alcuni concetti di trigonometria come seno, coseno e tangente, che per ovvie ragioni non saranno trattate in questa sede.

Le translazioni

Sfruttando le coordinate omogenee (la cui scala è impostata ad 1) è possibile effettuare una translazione di un punto dello spazio rispettivamente di a,b,c unità rispetto alle coordinate x,y,z per mezzo di un prodotto vettore-matrice.

Variazione di Scala

La scala proporzionale di un oggetto 3D consente di ridimensionare un oggetto spostando proporzionalmente i suoi punti in tutte le direzioni di a unità, rispetto al centro del sistema.

A differenza della scala proporzionale esiste anche la possibilità di ridimensionare in maniera non proporzionale variando la scala per i singoli assi.

N.B. E’ possibile ovviamente effettuare variazioni di scala anche in punti differenti dal centro, e possono essere realizzate eseguendo prima e dopo lo scalamento due transizioni.

 

Rotazioni sui 3 assi

Per il eseguire la rotazione di un angolo a di un oggetto sui 3 assi è possibile eseguire le seguenti operazioni:

  

       

N.B. E’ possibile effettuare operazioni di rotazione anche su assi differenti da le assi x, y e z, ma le rotazioni in oggetto è possibile ridurle a operazioni di translazione e rotazione sui 3 assi conosciuti…ma data la tipologia di lezione non tratteremo momentaneamente queste operazioni.

 

Simmetria

E’ utile conoscere anche la trasformazione di simmetria che ci consente di “specchiare” un oggetto in più modi.

  • La centrale consente di riflettere tutti i punti rispetto al centro di simmetria, e si effettua variando il segno a tutte e tre le coordinate.
  • La assiale consente di riflettere tutti i punti rispetto ad un asse, e si effettua variando di segno le due coordinate non inerenti all’asse di simmetria.
  • La planare consente di riflettere tutti i punti rispetto ad un piano di simmetria, e si ottiene variando di segno la coordinata non interessata dal piano.

Le simmetrie quindi si ottengono variando i segni delle coordinate, e sono facilmente gestibili con un operazione di questo tipo:

Ovviamente vanno variati di segno solo gli elementi che interessano alla simmetria.

 

Concatenazione di Trasformazioni

Come accennavamo prima, l’uso delle matrici per le operazioni di trasformazione risultano estremamente comode perchè è possibile combinare semplicemente più trasformazioni riducendole ad un unica matrice.

Ciò è possibile facendo il prodotto delle matrici delle trasformazioni e poi moltiplicando per il vettore da trasformare. E’ importante notare che queste operazioni non godono della proprietà commutativa.

 

Le proiezioni

Le ultime operazioni che valuteremo in questo appuntamento sono quelle relative alla proiezione prospettica e cioè le trasformazioni che consentono di effettuare il rendering di un mondo 3d in uno spazio 2d come avevamo spiegato nel secondo appuntamento.

Nell’esempio supponiamo che il centro della proiezione sia l’origine degli assi della scena 3d, e che il piano di proiezione (spiegato nel primo appuntamento) sia parallelo al piano xy e sia ad una distanza d, l’operazione da compiere è:

In questo modo al variare del piano prospettico e del punto di osservazione sarà possibile ottenere una vista prospettica da qualunque posizione.

 

Conclusioni

Come abbiamo già accennato di certo l'argomento è molto più ampio di ciò che abbiamo esposto, ma questo è comunque un ottimo punto di base per consentire al nostro viaggio di proseguire nel mondo della grafica tridimensionale, e di WebGL,, ed in ogni modo ci accorgeremo che c'è chi per noi ha già fatto tutto questo lavoro di gestione della matematica per la grafica tridimensionale…

Alla prossiamo con una panoramica del processo di rendering di OpenGL ES e quindi di 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();
}