WebGL (Web-based Graphics Language) è una nuova tecnologia nata nel 2011 che permette la creazione di ambienti grafici 3D attraverso il browser.
Questo è reso possibile attraverso l'uso di un'API Javascript che permette l'interazione diretta con la GPU (Graphics Processing Unit) posta sulla scheda grafica del computer client che ha effettuato la richiesta della pagina web. Ciò sta a significare che più il computer è potente e più la grafica 3D sarà fluida nei movimenti e ben gestita.
Il funzionamento dipende appunto dal browser utilizzato, il quale attraverso l'uso dell'HTML 5 e più precisamente dell'elemento canvas, riesce, attraverso l'API Javascript, a visualizzare l'ambiente tridimensionale da noi creato senza che il browser necessiti di plugin aggiuntivi.
La conoscenza dei linguaggi HTML, CSS e Javascript sarà necessaria per affrontare questo corso di programmazione 3D su web. Inoltre conoscere la tecnologia OpenGL ES (Embedded Systems - 2007) potrà aiutare il programmatore a creare i propri oggetti tridimensionali ma non preoccupatevi la conoscenza di tale tecnologia non è obbligatoria.
Iniziamo con il riportare la lista dei browser per WINDOWS e MAC che supportano tale ambiente, questo ci consentirà di avere subito gli strumenti giusti per testare il nostro codice sorgente:
Iniziamo subito a parlare degli argomenti base per familiarizzare con un ambiente grafico 3D. Attualmente, per chi fa programmazione web, è abituato ad aver a che fare con un sistema cartesiano a 2 dimensioni (2D) con l'asse X e l'asse Y. L'asse X è orizzontale e parte dall'angolo superiore-sinistro dello schermo e si muove verso destra, mentre l'asse Y, parte dallo stesso punto ma si muove verso il basso.
Solitamente tale sistema di coordinate lo si usa per posizionare gli elementi <div>, che fanno parte del linguaggio HTML, all'interno della pagina web. Altra situazione in cui ci scontriamo con tale sistema di coordinate è proprio l'uso del nuovo elemento canvas di HTML 5. Tale elemento utilizza un sistema di assi 2D come descritto in precedenza e come mostrato nell'immagine successiva.
Con il 3D iniziamo a lavorare un sistema cartesiano dove si aggiunge l'asse Z che indica la profondità e parte dallo stesso punto di origine delle assi X e Y ma si muove verso l'esterno dello schermo. L'asse Y invece, a differenza del precedente sistema cartesiano, si muove in senso opposto (notate il segno + e -).
Vediamo ora la struttura di base di una pagina web scritta in HTML5 che contiene l'elemento canvas attraverso il quale sarà visualizzato il nostro ambiente grafico 3D
<!doctype html>
<html>
<head>
<title>webgl</title>
<style>
body{ background-color: white; }
canvas{ background-color: black; }
</style>
</head>
<body>
<canvas id="my-canvas" width="600" height="400">
Il tuo browser non supporta l'elemento canvas di HTML5
</canvas>
</body>
</html>
Il messaggio posizionato all'interno dell'elemento canvas verrà visualizzato nel caso in cui il browser non dovesse supportare il linguaggio HTML5.
La prima operazione che deve essere effettuata è quella di accedere, attraverso il javascript, all'elemento canvas e più precisamente al suo context. Esistono attualmente due tipologie di context: "2D" e "webgl". Una di queste dovrà essere passata come parametro al metodo getContex dell'elemento canvas, logicamente passeremo "webgl" visto che ci stiamo occupando di questo. Tale parametro farà si che il metodo possa restituire l'oggetto appropriato.
<!doctype html>
<html>
<head>
<title>webgl</title>
<style>
body{ background-color: white; }
canvas{ background-color: black; }
</style>
<script>
function initWebGL()
{
var gl = null;
var canvas = null;
canvas = document.getElementById("my-canvas");
try{
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
} catch(e) {
}
if(gl)
{
// inizializza il colore di sfondo con Nero (R,G,B, ALFA)
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}else{
alert("ERRORE: Il tuo Browser non supporta WebGL");
}
}
</script>
</head>
<body onLoad="initWebGL()" >
<canvas id="my-canvas" width="600" height="400">
Il tuo browser non supporta l'elemento canvas di HTML5
</canvas>
</body>
</html>
Avrete notato che oltre "wegl", come parametro, abbiamo passato anche "experimental-webgl", questo perché alcuni Browser, nella fase iniziale di sperimentazione del linguaggio, hanno utilizzato questo nome di contesto.
Come risulta chiaro dal codice, nel caso in cui il Browser non dovesse supportare il WebGL o l'elemento canvas venisse inizializzato erroneamente, verrebbe visualizzato il rispettivo messaggio di errore.
Attraverso il context (indicato nell'esempio con la variabile gl) avremo accesso a tutte le funzioni e gli attributi del WebGL e quindi all'API Javascript che lo rappresenta.
Ricordiamoci sempre che il WebGL è una macchina a stati, ciò sta a significare che se modifichiamo un suo attributo, questa modifica rimarrà valida fino alla modifica successiva dello stesso.
In ogni punto del codice javascript che andremo a scrivere saremo quindi in grado di conoscere lo stato corrente del context WebGL.