Introduzione allo Sviluppo WebXR

La tecnologia AR e VR sul web è straordinaria. Ti permette di costruire e pubblicare le tue idee senza dover passare attraverso negozi curati, ma con la possibilità di condividere facilmente come faresti con un sito web.

La VR sul web è in circolazione sin dal primo rilascio di WebVR 1.0 in Chrome e Firefox nel 2016. Questo esperimento è stato poi sostituito dall’API WebXR Device, che alla fine supporterà anche la Realtà Aumentata (ed è disponibile in Chrome per Android da novembre 2020), non solo la Realtà Virtuale. Ora che questa nuova tecnologia ha raggiunto un livello di stabilità tale da poter essere utilizzata dagli sviluppatori, come si comincia?

Frameworks 

Leggi il nostro ultimo post sul blog per una guida su come scegliere un framework.

3 Sfide Specifiche per il Web 

Lo sviluppo XR web e nativo si differenzia in tre grandi aspetti:

Tempo di Caricamento 

Aspettare il caricamento di un gioco non è accettabile sul web. Ogni secondo di attesa aumenta il tasso di abbandono degli utenti.

Mantenere piccoli i file di gioco, usare la compressione e garantire tempi di caricamento rapidi è essenziale per mantenere gli utenti soddisfatti.

Performance 

Il web opera in modalità sandbox attraverso il browser. Questo significa che è isolato dal dispositivo in modo da non poterlo danneggiare.

La sandbox comporta un overhead di performance, poiché ciò che il sito vuole fare deve essere controllato due volte. Questo, insieme all’overhead che porta JavaScript rispetto a un’applicazione nativa, rende la VR e AR una sfida di performance.

Qualità Scalabile 

Se rilasci un’applicazione VR nativa, di solito miri a pochi dispositivi specifici, conoscendone le metriche di performance e adattando ogni build a seconda della piattaforma.

La bellezza del web è che è così radicalmente multipiattaforma che qualsiasi dispositivo potrebbe eseguire la tua app WebXR. Questo significa che devi considerare qualsiasi cosa, da un tostapane a un PC desktop, e tracciare una linea da qualche parte.

In VR, la gamma di dispositivi viene anche con una gamma di metodi di input: dai controlli semplici con lo sguardo (Google Cardboard), ai controller 3-dof, 6-dof, al tracciamento delle mani (Quest 2) e al tracciamento oculare (Quest Pro, Apple Vision Pro).

Dovrai decidere il minimo comune denominatore che dovrebbe essere in grado di eseguire la tua applicazione.

Soluzioni 

È importante affrontare queste sfide specifiche del web già dalla progettazione: influenzano la scelta dello stile artistico, l’esperienza d’interazione e possono determinare il successo o il fallimento della tua applicazione.

Carica più Velocemente 

In generale, più piccoli sono i tuoi file, più velocemente il gioco si scaricherà. Sul web è una best practice caricare solo gli asset inizialmente necessari e caricare in modo pigro ulteriori asset durante l’esecuzione.

I formati basati su testo richiedono solitamente tempi di parsing più lunghi, quindi considera l’uso di formati binari per gli asset. Formati immagine come WebP e Basis Universal possono migliorare le dimensioni dei file su CPU e GPU rispetto alle tradizionali immagini PNG e JPEG.

Performance 

Assicurati di monitorare le prestazioni e ottimizzare in base al tuo ambito. Mantieni piccoli gli asset e “spendi” la risoluzione per asset importanti e in base alla distanza dall’utente.

Estensioni speciali del browser come OCULUS_multiview2 possono aiutare con le prestazioni di rendering della GPU. Altre, come la prossima WEBGL_multi_draw, aiuteranno con le prestazioni della CPU.

La maggior parte dei framework avrà una guida alla performance o documentazione con suggerimenti. Controlla cosa puoi fare fin dall’inizio nel caso stai affrontando un progetto più ampio.

Scalabilità 

Per una migliore scalabilità, puoi caricare asset in base al tipo di input del visore o alla stringa dell’user agent. I sistemi basati sullo sguardo sono solitamente più di fascia bassa rispetto ai dispositivi 6-dof o a quelli che supportano il tracciamento delle mani.

Wonderland Engine 

Il Wonderland Engine mira a gestire per te questi compiti di ottimizzazione. Il nostro obiettivo è permetterti di concentrarti sulle funzionalità della tua app senza doverti preoccupare delle sfide tecniche per farla funzionare senza intoppi.

Wonderland Engine ha recentemente raggiunto la versione 1.0. Ci piacerebbe darti il benvenuto nella nostra Comunità Discord!