WebGL: cos’è, e perché è lo standard per le web app 3D
WebGL (Web-based Graphic Library) è una libreria JavaScript per il rendering di grafica 2D e 3D interattiva direttamente da browser.
Più precisamente espone un set di API (Application Programming Interface), basate sulle librerie grafiche OpenGL ES, che consentono la rappresentazione grafica di elementi 3D in alta qualità senza la necessità di installare alcun plug-in o software di terze parti.
WebGL è gestito dal Khronos Group, un consorzio fondato nel 2000 con l’obiettivo di realizzare standard aperti, liberi da royality, per ambiti quali: grafica 3D, Realtà Aumentata (AR), realtà virtuale (VR), machine learning, etc.
Il Khronos Group è quindi suddiviso in svariati gruppi di lavoro, tra i membri del gruppo di lavoro OpenGL ARB (Architecture Review Board) troviamo società del calibro di: Amazon, Apple, Google, Intel, Microsoft, NVIDIA, Samsung, Sony.
Vantaggi
I vantaggi dell’uso di WebGL per le applicazioni web 3D sono notevoli, vediamo i principali:
- possibilità di realizzare applicazioni 3D interattive in tempo reale, che mantengono un’ottima qualità grafica
- ottima velocità e nessun fastidioso effetto buffering dopo il caricamento iniziale
- massima fruibilità delle applicazioni direttamente da browser senza dover installare plugin o software esterni (come ad esempio occorreva fare con Flash Player)
- possibilità di accedere alle applicazioni sia da ambiente desktop sia da mobile
Tali pregi fanno di tale tecnologia la più versatile, efficiente e dalle potenzialità più elevate per lo sviluppo di web app con grafica 3D, sostituendo Flash Player come standard tecnologico.
Supporto Browser e WebGL 2.0
Una domanda ricorrente quando si parla di WebGL è: ma funziona sul mio browser?
WebGL funziona ed è integrato senza che ci sia bisogno di attivarlo manualmente sulla quasi totalità dei principali browser, a partire da differenti versioni degli stessi. Più nel dettaglio vediamo la seguente tabella esemplificativa:
Come possiamo notare solamente il browser Opera Mini (Web Browser per cellulari) non lo supporta.
WebGL 2.0
La naturale evoluzione di WebGL 1 è WebGL 2, i due sistemi sono analoghi, ma mentre il primo si basa sulle API grafiche OpenGL ES 2.0 il secondo si basa invece sulle più recenti e performanti OpenGL ES 3.0. Risultando quindi notevolmente superiore al predecessore per resa qualitativa grafica.
Per quanto riguarda il supporto dei browser a WebGL 2 la situazione è leggermente più variegata rispetto a prima, ma vediamo nel dettaglio:
Come possiamo vedere viene supportato dai principali e più diffusi browser:
- Chrome (dalla versione 56)
- Fireforx (dalla versione 51)
- Edge (dalla versione 79)
- Safari (dalla versione 15)
È interessante notare come il supporto a WebGL 2.0 per il browser Safari sia molto recente, la versione che lo supporta ufficialmente infatti risale al 20 settembre 2021. Non risultano invece supportati browser molto vecchi e ormai non più mantenuti come Internet Explorer.
Per quanto invece riguarda la situazione dei browser mobile occorre fare un distinguo tra sistemi Android e iOS. Nello specifico vediamo come la situazione su android risulti positiva, svariati browser supportano WebGL 2:
- Android Browser
- Opera Mobile
- Chrome per Android
- Firefox per Android
- UC browser per Android
- Samsung Internet
Differente purtroppo è la situazione per iOS, per i cui browser attualmente non risulta essere supportato.
Sei ancora insicuro se il tuo browser supporti o meno WeGL? Clicca qui e scoprilo subito!
WebGL: Come funziona?
Abbiamo fatto una panoramica della tecnologia in esame, ma come funziona effettivamente?
Come precedentemente accennato WebGL si basa sulle API di OpenGL ES (una libreria grafica utilizzata per la realizzazione di applicazioni in 3D), e fornisce quindi un’interfaccia di programmazione per la grafica 2D e 3D. Tale interfaccia viene utilizzata per sfruttare al massimo le capacità dell’elemento canvas di HTML5, a cui accede attraverso le interfacce del DOM (Document Object Model).
WebGL 2.0 invece è un’estensione di WebGL 1, che introduce il supporto alle API OpenGL ES 3.0 attraverso l’interfaccia WebGL2RenderingContext.
Alcuni esempi di applicazione
Gli usi della tecnologia WebGL riguardano soprattutto web app che utilizzano grafica 3D o 2D interattiva, vediamo qualche esempio:
- Configuratore Web 3D di Stivali: https://configurator.parlanti.com/index.html?product=ROMA
- Videogames: simmer.io
Future evolutive: WebGPU
Analizziamo infine gli sviluppi futuri di questa tecnologia software. Nonostante ancora non tutti i browser supportino WebGL 2.0 già si stanno mettendo le basi per il suo successore: WebGPU, anche se siamo ancora poco più che in fase embrionale.
Da quanto sappiamo WebGPU sarà sviluppato da W3C “GPU for the Web Community Group” con specialisti provenienti da realtà quali Apple, Mozilla, Microsoft, Google.
A livello tecnico per il momento ciò che si sa per certo è che a differenza di WebGL, WebGPU non sarà un porting diretto da API grafiche già esistenti (com’è stato con OpenGL ES), ma dovrebbe basarsi sui concetti delle tecnologie Vulkan, Metal e Direct3D 12.
Nel caso si voglia saperne di più consigliamo la lettura della attuale bozza di lavoro.
