WebGL: cos’è e come funziona

WebGL è l’acronimo di Web Graphics Library e consiste in un libreria specificatamente pensata per la grafica 3D in ambito web. Più precisamente, WebGL è un set di API che permette al web-developer di generare elementi di grafica 2D e 3D direttamente fruibili in ogni browser compatibile con questa tecnologia senza alcun bisogno di installare plugin di terze parti (come avveniva, ad esempio, con Flash).

Cosa posso fare con WebGL?

Davvero di tutto. E’ possibile realizzare, ad esempio, la visita guidata all’interno delle stanze di un museo, esplorare le galassie o costruire un mondo in stile Minecraft (a questa pagina del sito WithGoogle potete vedere alcuni esempi di impiego della tecnologia WebGL).

Con WebGL è possibile creare, senza l’utilizzo di plugin esterni, splendide grafiche 3D direttamente all’interno del browser. Gli esempi potrebbero essere tantissimi, ma per rendere meglio l’idea del potenziale di questa tecnologia credo che la cosa migliore sia fornirvi subito una demo da “provare con mano”. Si tratta di una proiezione 3D del Sole:

Come funziona WebGL?

WebGL si basa sulla tecnologia OpenGL (libreria di riferimento nella realizzazione di videogame e applicazioni tridimensionali) e fornisce un’interfaccia di programmazione che sfrutta le potenzialità dell’elemento Canvas di HTML5 al quale accede attraverso le interfacce Document Object Model.

La caratteristica principale di questa tecnologia consiste nell’essere estremamente veloce e performante grazie alla totale assenza del buffering: WebGL, infatti, sfrutta l’accelerazione hardware della macchina dell’utente (è il browser ad eseguire la proiezione 3D) e questo significa una drastica riduzione dei tempi di caricamento ed una maggior fluidità nel rendering tridimensionale.

Quali browser supportano WebGL?

WebGL 1.0 è supportato nella maggior parte dei principali browser in commercio, sia in ambiente desktop che mobile: le recenti versioni di Chrome, Firefox, Internet Explorer, Opera e Safari supportano WebGL. Per maggiori informazioni visitare questa pagina.

Per quanto riguarda WebGL 2.0 è supportato da Firefox a partire dalla versione 51 e da Chrome a partire dalla versione 56. Per maggiori informazioni circa i browser in grado di supportare WebGL 2.0 si faccia riferimento a questa pagina.

Come abilitare WebGL nel browser?

Nei browser di nuova generazione la funzionalità WebGL dovrebbe essere attiovata di default, tuttavia se riscontrate problemi nella visualizzazione di elementi 3D presenti nelle pagine web potrebbe essere utile verificare che il browser sia configurato correttamente.

E’ bene precisare che prima di abilitare WebGL nel browser è necessario verificre che il sistema soddisfi i requisiti hardware per questa funzione. In caso affermativo puoi procedere! Per abilitare WebGL nel tuo browser, segui questi passaggi:

1. Google Chrome:
   • Apri il browser e digita chrome://settings/ nella barra degli indirizzi.
   • Cerca la sezione “Sicurezza e privacy” e clicca su “Impostazioni contenuti”.
   • Scorri fino alla sezione “Grafica” e clicca su “Impostazioni avanzate”.
   • Accertati che “Usa hardware acceleration quando disponibile” sia selezionato.
   • Riavvia il browser e verifica se WebGL è abilitato visitando questo link: chrome://gpu/.
2. Mozilla Firefox:
   • Apri il browser e digita about:config nella barra degli indirizzi.
   • Clicca sul pulsante “Accetto il rischio” per accedere alle impostazioni avanzate.
   • Cerca la voce webgl.disable e assicurati che il suo valore sia impostato su false.
   • Riavvia il browser.
3. Microsoft Edge:
   • Apri il browser e digita edge://settings/system nella barra degli indirizzi.
   • Clicca su “Impostazioni delle prestazioni” e accertati che “Usa l’accelerazione hardware per le prestazioni grafiche” sia selezionato.
   • Riavvia il browser.
4. Safari:
   • Apri il browser e clicca su “Safari” nella barra dei menu e seleziona “Preferenze”.
   • Clicca su “Avanzate” e accertati che “Mostra menu Sviluppo” sia selezionato.
   • A questo punto apri il menu “Sviluppo”, seleziona “Funzionalità sperimentali” e accertati che “WebGL 2.0” sia spuntato (in caso contrario clicca per attivarlo).
   • Riavvia il browser.

Dove posso vedere degli esempi di implementazione di WebGL?

Di seguito un elenco di pagine in cui è possibile vedere WebGL all’opera:

• WebGL Samples
  https://webglsamples.org
• WebGL Foundamentals
  https://webglfundamentals.org
• Experiments WithGoogle
  https://experiments.withgoogle.com/search?q=WebGL

Come sviluppare animazioni con WebGL?

E’ possibile sviluppare animazioni WebGL scrivendo direttamente il codice secondo le specifiche del formato, in alternativa (scelta consigliata) è possibile utilizzare uno dei tanti framework disponibili, i quali semplificano notevolmente la complessità dello sviluppo riducendone, contestualmente, i tempi.

I più popolari framework per WebGL sono:

• Three.js: è la libreria di riferimento per chi sviluppa animazioni basate su WebGL. https://threejs.org
• Babylon.js: una delle più importanti librerie per lo sviluppo di animazioni 3D con WebGL. https://www.babylonjs.com
• Playcanvas: libreria di riferimento per lo sviluppo di giochi on-line attraverso la tecnologia WebGL. https://playcanvas.com
• Pixi.js: un progetto stabile e consolidato pensato per lo sviluppo di animazioni 2D. https://www.pixijs.com
• TWGL: libreria semplice e leggera per progetti non troppo complessi. https://twgljs.org