I 5 Migliori Framework WebXR - Confronto
Vuoi iniziare lo sviluppo con WebXR? Ecco un confronto tra i 5 migliori framework per iniziare.
Breve Panoramica degli API
Il 13 dicembre 2019, Chrome 79 è il primo browser a essere rilasciato con WebXR 1.0 abilitato di default. Ciò significa che il primo passo per superare uno degli ostacoli più grandi per WebXR è finalmente risolto: la stabilità. In precedenza era davvero difficile mantenere un progetto WebXR / WebVR / WebAR poiché l’API del browser su cui si basava era ancora instabile: WebVR 1.0 è stato rapidamente sostituito da WebVR 1.1 che, nonostante l’aumento solo della versione minore, ha cambiato abbastanza da rompere qualsiasi applicazione scritta in WebVR 1.0.
Dopo WebVR 1.1 è seguita una serie di versioni intermedie non numerate di WebXR. Era difficile rilevare quale versione fosse in uso e si doveva richiedere i token di Google Chrome Origin Trials per far funzionare l’app per gli utenti, senza far loro attivare flag sperimentali.
Con WebXR 1.0 in Chrome 79, questo fastidio è finalmente finito e possiamo supporre che le nostre app continueranno a funzionare anche nelle versioni future di Chrome. Questo significa che puoi finalmente iniziare col progetto che hai sempre voluto realizzare! Oggi, anche Apple Vision PRO supporta WebXR, ed è un ottimo modo per costruire applicazioni XR multipiattaforma oggi.
Ma quale framework dovresti usare?
Ecco un elenco di quelli che potremmo considerare adatti:
Contenuti
5 - Unity 3D
Insieme a Unreal Engine, probabilmente la piattaforma di sviluppo 3D più popolare lì fuori, supporta HTML5 come piattaforma di destinazione e può quindi teoricamente essere utilizzata per lo sviluppo WebXR.
WebXR non è supportato di serie, però: hai bisogno di un plugin come De-Panther’s WebXR Exporter.
Non è ottimale, ma potresti passare al supporto WebXR in Unity 3D, nel caso in cui lo aggiungano.
Fino ad allora, però, dovresti affrontare alcuni altri problemi con l’export HTML5: bassa prestazione, lunghi tempi di caricamento e scarso supporto per le GPU mobili (come quelle negli smartphone o nel Meta Quest e altri headset stand-alone).
Benefici comunque dall’ecosistema di asset e plugin di Unity e puoi pubblicare la tua app come app nativa! (Oggi, gli app store offrono visibilità solo raramente a meno che tu non sia tra i primi nella lista corta dei giochi, quindi questo vantaggio fornisce un’utilità piuttosto limitata.)
4 - Babylon.js
Con il suo “Playground”, questo framework offre un modo rapido per prototipare qualsiasi applicazione 3D. Supportano già WebXR e hanno un elenco enorme di esempi per renderizzare quasi qualsiasi cosa. La sua flessibilità può essere attribuita al fatto che è una libreria JavaScript. Babylon ti permette di andare a un livello molto basso, ma richiede di scrivere l’intera applicazione in JavaScript.
È mirato a programmatori più esperti, quindi ti consigliamo di scegliere questo framework se hai esperienza e/o hai bisogno di personalizzare molto il rendering.
3 - Three.js
Probabilmente la libreria di rendering JavaScript open-source più popolare in circolazione. Ancora una volta, la massima flessibilità è disponibile a un livello molto basso, in quanto puoi personalizzare il rendering per fare qualsiasi cosa desideri. Con grande potere viene grande responsabilità, però: sei l’unico responsabile di mantenere la tua applicazione performante e fluida anche sui dispositivi VR mobili.
Three.js già supporta WebXR! Fino a quando non ci sarà un ampio supporto per l’AR in WebXR, vorrai dare un’occhiata a AR.js o mind-ar-js per il supporto WebAR. Entrambi hanno integrazioni con Three.js.
L’editor Three.js ti permette di assemblare scene facilmente e da molti formati di file diversi. Questo ti consentirà di avviare rapidamente il tuo progetto, ma richiederà comunque di codificare le interazioni in JavaScript successivamente. L’editor non ha un concetto di file di progetto ed è quindi realmente utile solo per generare il codice iniziale per il tuo progetto.
Se non hai esperienza di programmazione, ti consigliamo di guardare A-Frame invece. È costruito sopra Three.js e ti permette di sfruttare un buon sottoinsieme di funzionalità in maniera molto più semplice.
2 - PlayCanvas
Questa piattaforma di sviluppo viene fornita con un editor visivo completo e supporta AR e VR. Il rendering grafico 3D appare eccellente se configurato correttamente. I tempi di caricamento dell’editor e dei giochi esportati sembrano essere abbastanza accettabili.
L’editor visivo rende molto facile assemblare scene, aggiungere componenti e distribuire il tuo progetto. Inoltre, un editor di codice integrato ti consente di scrivere i tuoi script personalizzati. Se preferisci il tuo editor di codice, come Atom, Vim, Visual Studio Code o altro, potresti avere qualche difficoltà a modificare gli script. Con la loro REST API, potresti comunque riuscire a farlo.
1 - A-Frame
Per uno sviluppo WebVR e WebAR conveniente, A-Frame è stato il punto di riferimento negli ultimi anni. Costruito sopra Three.js, puoi sempre andare a un livello più basso nel caso in cui avessi bisogno di personalizzazione con un sacco di componenti esistenti che puoi riutilizzare.
A-Frame ti permette di impostare la tua scena in HTML, dalla quale genera una gerarchia di scena 3D. Puoi creare componenti JavaScript personalizzati per modificare il comportamento e le interazioni e l’“A-Frame Inspector” ti consente di modificare facilmente la tua scena e vedere cosa viene generato dall’HTML. Alcuni grandi giochi VR per browser sono stati sviluppati su A-Frame: Barista Express e Moonrider.
Poiché funziona sopra Three.js, supporta già anche WebXR. Il supporto WebAR è nuovamente gestito tramite AR.js. A-Frame lascia a te il compito di ottimizzare i tuoi asset per i tempi di caricamento. Per casi d’uso semplici, A-Frame è perfetto e ti porterà abbastanza lontano.
Per progetti più grandi, però, potresti raggiungere il limite delle prestazioni che A-Frame ti consente.
Sommario | TL;DR
La scelta del framework dipenderà dal tuo caso d’uso. Per scene semplici, consigliamo A-Frame. Se hai bisogno di più prestazioni, abbassa il cofano e ottimizza direttamente su Three.js. Se la programmazione non fa per te, prova PlayCanvas. Sembra anche fornire il modo più semplice per ottenere grafica di bell’aspetto (ma per VR sul web, preferisci le prestazioni all’aspetto).
Wonderland Engine
Hai ancora difficoltà a trovare la soluzione giusta? Potresti essere interessato a quello che stiamo costruendo.
Abbiamo dato un’occhiata a tutti i framework disponibili e abbiamo costruito Wonderland Engine da zero per essere il miglior framework web 3D e motore di gioco per WebXR, evitando tutti i problemi riscontrati in altri framework. Oggi, le più grandi applicazioni WebXR (The Escape Artist, Archery Evolution, …) sono tutte costruite utilizzando Wonderland Engine.
Wonderland Engine è uno strumento offline che produce un file scena binario efficiente che viene caricato con un runtime basato su WebAssembly.
Mentre benefici delle prestazioni del nostro rendering ottimizzato, puoi implementare codice di interazione con la nostra API JavaScript/TypeScript. Molti componenti riutilizzabili sono stati scritti per gestire VR, AR, audio e altro.
E, sì, supportiamo WebXR, il motore è stato progettato appositamente per questo.
Scarica Wonderland Engine dalla pagina Downloads e registrati per un account gratuito qui.