Dopo aver visto i framework per lo sviluppo di esperienze XR per Unity in questo post vedremo quali sono i framework per sviluppare WebXR.
La particolarità di questi framework è che, nella maggior parte dei casi, non è necessario scaricare delle applicazioni ma tutto si fa direttamente sul browser.
A-Frame
Il primo framework dell’elenco è A-Frame di cui ho già fatto anche qualche tutorial tempo fa e li trovate qui.
A-Frame è forse il framework WebXR più conosciuto basato su HTML e three.js. Piccola parentesi su three.js, che di per sé è un framework a se stante, ma A-Frame ne rende più semplice l’utilizzo. come vedremo più avanti altri framework possono essere integrati in A-Frame che rimane il framework con una delle comunità più attive. Supporta tutti i device compatibili con lo standard WebVR e WebXR e può essere usato anche per la realtà aumentata.
Il funzionamento è molto semplice, in una pagina HTML si dichiarano le librerie che la pagina utilizzerà e poi si potrà programmare utilizzando i tag HTML forniti da A-FRAME. Il framework non si limita alla sola creazione di ambienti VR ma, attraverso l’inserimento di vari collegamenti a librerie javascript disponibili su github si possono aggiungere varie funzionalità.
L’ambiente di sviluppo può essere un semplice editor di testo o editor online come glitch.
A-Frame ha un sito dove ci sono molti esempi e tutto il necessario per imparare ad usarlo https://aframe.io.
Three.js
Three,js è un framework Javascript tra i più utilizzati per creare ambienti 3D basati su WebGL. Three.js è alla base di A-Frame.
Babylon.js
Babylon.js è un framework Javascript per la creazione di esperienze VR con HTML e WebGL e dedicato principalmente al gaming ma molti sviluppatori lo stanno utilizzando anche in ambiti diversi. Nel complesso è un po’ meno user friendly di A-FRAME ma permette di avere una qualità grafica e potenzialità nettamente superiori. Anche Babylon.js si utilizza direttamente da browser dove mette a disposizione un Playground per programmare e vedere live il risultato del lavoro creato, un node material editor.
Anche Babylon.js è compatibile con tutti i device ed implementa lo standard WebXR. Possiamo dire che è dedicato a chi conosce bne o vuole imparare Javascript.
Tutti i riferimenti li trovate sul sito https://www.babylonjs.com/.
React 360
React 360 è un framework open-source in Javascript per creare applicazioni immersive su browser. Potremmo dire che sta a metà strada tra A-Frame e three.js, sul quale si basa per alcuni aspetti grafici. Il progetto è nato dalla collaborazione tra Facebook e Oculus e si chiamava ReactVR che poi si è diviso nella versione open-source rinominandola React 360.
https://facebook.github.io/react-360/
Augmented Reality
Tutti i framework citati finora hanno comunque la possibilità di creare anche esperienze AR, ma si basano sempre su librerie create ad hoc. Di seguito alcune librerie per creare esperienze di realtà aumentata web-based.
Argon.js
Argon.js è un framework dedicato alla realtà aumentata. Nato per essere utilizzato nel browser Argon4, il progetto si è ampliato supportando tutti i browser. Anche Argon.js si basa sulle librerie Three.js per il rendering. Può essere integrato in A-Frame per semplificare la creazione di esperienze AR basate su web-browser.
AR.js
AR.js è una tra le librerie per creare realtà aumentata più usate. Creata da jerome Etienne permette di aggiungere le funzionalità di realtà aumentata a three.js e A-Frame.
https://github.com/AR-js-org/AR.js
Conclusioni
Personalmente uso A-Frame perché mi permette di coniugare la semplicità alla potenza e facilità di integrare con librerie esterne le eventuali funzioni richieste dal progetto. Un esempio è AR.js che è facilmente integrabile. Sto cercando di comprendere un po’ meglio babylon.js. Come sempre la scelta di uno o l’altro framework dipende dal progetto ma solo conoscendo gli strumenti che si hanno a disposizione si può optare per una o l’altra soluzione.
