Bentornati al corso WebGl…non ci credete vero? Ebbene si siamo riusciti a ripartire con il corso promettendovi che le pause da questo appuntamento in poi saranno di certo più brevi!

Dato che il tempo che ci ha tenuto distanti è stato davvero eccessivo partiamo subito trattando finalmente la preparazione dell’ambiente di lavoro di WebGL!

Le lezioni da questa volta in poi spesso ricalcheranno le lezioni di chi prima di noi è riuscito a dare chiari lumi su questa futuristica implementazione della grafica 3D su web chiamata WebGL…difatti saremo fortemente ispirati dalle lezioni presenti sul sito di Mozilla o su quelle di LearningWebGL.

Prenderemo infatti spunto dalle lezioni offerte sui siti appena indicati pescando un po’ dall’uno ed un po’ dall’altro cercando di creare quindi la strada da seguire più completa ed al tempo stesso semplice…

Prima di iniziare è necessario ricordarVi che sono spesso necessarie le infarinature che abbiamo presentato negli scorsi appuntamenti in modo da non trovarsi spiazzati di fronte agli esempi che potrebbero dare quindi per scontato alcune basi di 3d o di matematica applicata ad essa. Inoltre ci sembra abbastanza scontato segnalare che è fondamentale utilizzare uno dei browser compatibili con le nuove specifiche.

Prepariamo la pagina ad ospitare un po’ di sano 3D…

Come facciamo ad ospitare un po’ di grafica 3D in una pagina web? Bene…tutto parte dalle nuove specifiche HTML 5 che portano con se l’ormai noto Tag <canvas>. Come molti sapranno il tag <canvas> consente di rappresentare, attraverso script, grafica ed immagini come su di una “tela”. Difatti questo tag può essere inteso come il “contenitore” della grafica prodotta al suo interno.

N.B. E’ possibile approfondire l’argomento per mezzo di alcuni articoli come questo pubblicato su www.francescosciuti.it

Il codice HTML sufficiente per poter inizializzare un ambiente WebGL è il seguente:

<body><br />        <canvas id="glcanvas" width="640" height="480"><br />            Il browser in uso non gestisce il Tag HTML 5 <code>canvas</code><br />        </canvas><br />    </body>

e potrebbe essere rappresentato graficamente più gradevole per mezzo di CSS:

canvas {<br />          border: 2px solid black;-moz-box-shadow: black 2px 2px 2px;<br />          width: 640px;<br />          height: 480px;<br />          background-color: black;<br />        }

N.B. Ovviamente la nostra attenzione non ricade su questo codice HTML e CSS esposto in quanto davvero estremamente semplice.

Passiamo invece alla porzione di codice Javascript  utile per inizializzare il canvas per l’utilizzo di WebGL:

<script type="text/javascript"><br />    //Dichiaro le variabili per l’oggetto canvas e per il contesto WebGL del canvas<br />    var gl;<br />     <br />    //Funzione richiamata al caricamento del body che consente<br />    function avvioWebGL() {<br />      //Creo un oggetto con il canvas prelevato dal DOM della pagina<br />      canvas = document.getElementById("glcanvas");<br />     <br />      //Richiamo la funzione per l’inizializzazione di WebGL<br />      inizializzoWebGL(canvas);     <br />      <br />      //Se WebGL è supportato e quindi è stato creato il contesto adeguato nel canvas<br />      if (gl) {<br />        // Setta il colore “neutro” per il buffer del colore<br />        gl.clearColor(0.0, 0.0, 0.0, 1.0);<br />        // Abilità il test della profondità<br />        gl.enable(gl.DEPTH_TEST);<bt>    alert("WebGL inizializzato. Un quadrato nero che al prossimo appuntamento si riempirà.");            <br />      }<br />    }<br />     <br />    //Funzione di controllo del supporto da parte del browser di WebGL<br />    function inizializzoWebGL(canvas) {<br />      gl = null;<br />      //Determiniamo se il browser supporta WebGL controllando l'esistenza di WebGLRenderingContext   if (window.WebGLRenderingContext)<br />      {<br />      //Dato il momento storico è ancora necessario provare ad utilizzare i vari context<br />     //di WebGL utilizzati dai vari browsers<br />     var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];<br />     for (var ii = 0; ii < names.length; ++ii)<br />     {<br />     try<br />    {<br />     gl = canvas.getContext(names[ii]);<br />     //Setto le dimensioni del contesto WebGL esattamente come quelle del canvas<br />     gl.viewportWidth = canvas.width;<br />     gl.viewportHeight = canvas.height;<br />     break;<br />     }<br />    catch(e) {}<br />     }   }<br />      //WebGL non è stato inizializzato e quindi avviso l’utente<br />      if (!gl)<br />    {<br />        alert("WebGL non è stato inizializzato. Il browser potrebbe non supportarlo.");<br />      }<br />    }<br />    </script></bt>

Il codice su riportato dovrebbe essere di semplice comprensione, ma una panoramica dello stesso di certo male non farà!

Partiamo dal fatto che dobbiamo aggiungere al tag body del codice HTML su indicato un piccolo dettaglio, e cioè la funzione avvioWebGL() che ci consente di iniziare ad utilizzare WebGL nel canvas.
Ci basterà quindi modificare il tag <body> nel modo  seguente:

<body onload="avvioWebGL()">

Al momento del caricamento del body sarà quindi eseguita la funzione avvioWebGL() che dopo aver “prelevato” il canvas dal DOM richiama la funzione inizializzoWebGL(canvas)…ed infatti prima affrontiamo la spiegazione di questa funzione.

inizializzoWebGL(canvas)

La funzione in questione ci consente di verificare se il browser supporta WebGL e per farlo non facciamo altro che controllare se esiste il WebGLRenderingContext.
L'oggetto WebGLRenderingContext è creato chiamando il metodo getContext() di un HTMLCanvasElement.

Difatti subito dopo il primo controllo eseguiamo il metodo getContext() dell’oggetto canvas creato nella funzione avvioWebGL()  testando vari argomenti per il context dato che attualmente esistono ancora molte implementazioni diverse da parte dei browsers (anche se l'argomento ufficiale è webgl).
Nel caso di esito positivo si andrà semplicemente ad adattare le dimensioni del contesto WebGL a quello del canvas.

Se invece il browser non supporta WebGL, l’utente verrà avvisato per mezzo di un alert.

avvioWebGL()

Come avevamo su indicato, la funzione in oggetto consente di avviare WebGL “prelevando” prima il canvas dal DOM e poi richiamando la funzione inizializzoWebGLper consentire l’inizializzazione del contesto.

Successivamente vengono richiamati alcuni metodi propri di WebGL che consentono di:

  • clearColor(0.0, 0.0, 0.0, 1.0): Impostare il colore neutro per il Color Buffer ed in questo caso viene impostato a nero indicando i parametri in formato RGBA;
  • enable(gl.DEPTH_TEST):  Questo test mette a confronto la profondità Z degli oggetti 3D, riuscendo a gestire quindi le distanze degli oggetti rispetto allo spettatore (questo processo si appoggia al Depth Buffer).

Per avere più chiare queste due istruzioni facciamo un breve approfondimento sui Buffer (che già abbiamo affrontato negli scorsi appuntamenti).

Diamo per scontato che sappiamo che il buffer è una sorta di contenitore temporaneo di dati. WebGL (come OpelGL ES 2.0) funziona con 3 tipi di buffer:

  • Frame Buffer
  • Render Buffer
  • Buffer Objects

Il Frame Buffer è il più astratto dei tre, e viene ben descritto da Wikipedia come:

Il Frame Buffer è una memoria buffer nella quale vengono memorizzate le informazioni destinate all'output per la rappresentazione di un intero fotogramma (frame in lingua inglese, da cui il nome framebuffer) sullo schermo.

Si può quindi valutare il suddetto buffer come una serie di “immagini”. Le “immagini” riguardano gli oggetti 3D, la profondità degli oggetti nello spazio, l'intersezione degli oggetti, la visibilità degli oggetti, etc…

Render Buffer è invece un deposito temporaneo di una singola “immagine”.
E’ facilmente compresibile quindi che il frame buffer è un insieme di render buffer.

Esistono alcuni tipi di render buffer come:

  • Color Buffer:  memorizza le informazioni colore per l'immagine finale da renderizzare.
  • Depth Buffer:  memorizza le informazioni di profondità Z (concetto che abbiamo valutato più volte);
  • Stencil Buffer: memorizza le informazioni di visibilità degli oggetti.

Buffer Objects sono buffer che possono persistere per tutta l'esecuzione dell'applicazione e saranno affrontati al momento opportuno.

Grazie a questo poco codice HTML 5 e javascript siamo in grado quindi di preparare ed inizializzare l’ambiente WebGL che ci consentirà di cominiciare a disegnare le nostre idee in 3 dimensioni…che inizieremo a disegnare nel prossimo appuntamento…che arriverà a breve!

E' possibile scaricare il file di esempio cliccando qui.

Sperando di essere stato utile…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();
}