Proprio pochi giorni fa (esattamente giorno 3 Marzo 2011) è stata finalmente rilasciata la versione 1.0 delle specifiche per la libreria grafica che a braccetto con HTML 5 dovrebbe cambiare il web…stiamo parlando di WebGL!

Molti di voi si domanderanno cosa siano queste librerie dal pomposo nome, e noi siamo proprio qui a spiegarvelo! Il viaggio che stiamo per intraprendere insieme infatti ci porterà alla scoperta di questa recentissima tecnologia che dovrebbe finalmente avvicinare in maniera definitiva il mondo della grafica 3d con quello del web.

Ma andiamo con ordine…faremo prima un breve accenno a cosa è esattamente WebGL, a come nasce e successivamente a quale sarà il “piano dell’opera” del corso per imparare ad utilizzare questa libreria.

Cosa è WebGL?

WebGL nasce prima come esperimento nei laboratori di Mozilla e poi cresce come standard cross-platform, cross-browser e royalty-free grazie al consorzio Khronos Group (già “responsabile” di altre formidabili tecnologie come OpenGL), ed è basata sulle librerie OpenGL ES 2.0.

WebGL  (acronimo di Web-based Graphics Library) è difatti un’interfaccia di programmazione (API) che consente per mezzo del Tag Canvas (nato con le specifiche HTML 5) di generare e gestire la grafica 3d direttamente nelle pagine web, e di interagire anche con il DOM (Document Object Model) stesso della pagina HTML. WebGL consente di sfuttare l’accellerazione hardware dei dispositivi sui quali il browser è in esecuzione, e quindi consente la realizzazione di grafica 3d in tempo reale, cosa che fino a poco tempo fa era praticamente inimmaginabile.

La programmazione con WebGL può essere quindi sviluppata con ogni linguaggio “DOM Compatibile” (quindi principalmente javascript), a patto che il browser sia compatibile. L’utilizzo di WebGL difatti ci consente di abbandonare finalmente i plugin proprietari di terze parti ed affida al browser stesso il lavoro pesante.

Allo stato attuale i browser compatibili sono Google Chrome, Mozilla Firefox, Apple Safari ed Opera. Dati i continui aggiornamenti sullo stato di compatibilità è fondamentale fare riferimento alla pagina: http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation. Ad ogni modo al momento la migliore compatibilità la offre Google Chrome nella sua ultima incarnazione (che è il browser che useremo in questo corso) e la sua variante Open Source Chromium. Ovviamente avrete notato l’assenza del solito grande illustre e cioè di Internet Explorer, che come accade dall’alba dei tempi sul web si tira indietro ed offre di contro (dalla versione 9) l’accelerazione hardware per mezzo delle DirectX.  E’ comunque possibile arginare (anche se parzialmente) il problema ricorrendo al plugin Chrome Frame.

Se volete saziare la vostra sete di conoscenza è possibile testare la compatibilità del vostro browser per mezzo della pagina: http://www.doesmybrowsersupportwebgl.com
N.B. Non approfondiremo la compatibilità dei browser dato che esula dalle finalità del corso.

I vantaggi di WebGL

WebGL è basato su una tecnologia matura e consolidata, ed essendo tra l’altro supportata dai maggiori produttori di browser dovrebbe diventare il vero punto di congiunzione tra il 3D ed il web. Essendo una API basata su OpenGL ES e sul linguaggio di shading GLSL (lo stesso usato da OpenGL), dovrebbe essere familiare per tutti gli sviluppatori che già conoscono le suddette tecnologie. L’integrazione diretta nelle pagine web (senza bisogno di plugin aggiuntivi) inoltre consente una totale interazione con tutti gli elementi HTML e la gestione degli eventi propria delle pagine web per mezzo di linguaggi ormai familiari come javascript.

Iniziamo il nostro viaggio…

Ed è ora quindi di iniziare il nostro viaggio che durerà a lungo data la vastità e la complessità dell’argomento, e che sarà guidato passo per passo verso la rappresentazione delle nostre idee tridimensionali direttamente sul nostro browser. L’intenzione di questo corso è difatti quella di introdurre il lettore gradualmente nel mondo di WebGL. Prima verranno proposti degli approfondimenti sulle basi e sui fondamenti di grafica tridimensionale, ed una volta più chiari i concetti verranno affrontati tutti gli aspetti di  WebGL. Cosi facendo sarà chiaro cosa succede anche dietro le quinte!

I primi argomenti che tratteremo nel corso saranno:

  • Basi di Grafica Tridimensionale
  • Fondamenti Matematici per Grafica Tridimensionale
  • Struttura di un Engine 3D
  • Primi passi con WebGl
  • Setup ed Inizializzazioni di una scena
  • Le Primitive 2d con WebGl
  • Colori
  • La 3a Dimensione
  • Muoviamo i Nostri oggetti
  • Input da Tastiera e Mouse

Per affrontare il corso è però fondamentale avere delle basi su alcuni argomenti:

  • HMTL (5 nello specifico…ma qui credo che di risorse ne troverete a non finire!);
  • Javascript;
  • Sviluppo Object Oriented.

Conclusioni

WebGL è un mondo che sta nascendo…spero che l’argomento susciti curiosità in molti di voi e che quindi siate intenzionati a percorrere insieme questa tortuosa strada…ma per esserne certo mi basta un solo link che di certo vi farà pensare: “Voglio farlo anch’io!”.

http://www.chromeexperiments.com/webgl

Buon Viaggio ed alla prossima puntata!
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();
}