Oculus Quest 2 è un visore per la realtà virtuale (VR) creato da Oculus, una divisione di Meta. Gli sviluppatori ora possono creare e distribuire app web progressive (PWA) 2D e 3D che sfruttano la funzionalità multitasking di Oculus Quest 2.
Oculus Quest 2
Oculus Quest 2 è un visore per la realtà virtuale (VR) creato da Oculus, una divisione di Meta. È il successore del precedente visore dell'azienda, Oculus Quest. Il dispositivo è in grado di funzionare sia come visore autonomo con un sistema operativo interno basato su Android, sia con software VR compatibile con Oculus in esecuzione su un computer desktop quando è connesso tramite USB o Wi-Fi. Utilizza il sistema su un chip Qualcomm Snapdragon XR2 con 6 GB di RAM. Il display di Quest 2 è un unico pannello LCD a commutazione rapida con una risoluzione di 1832 × 1920 pixel per occhio e una frequenza di aggiornamento fino a 120 Hz.
Il browser Oculus
Attualmente sono disponibili tre browser per Oculus Quest 2: Wolvic, successore di Firefox Reality, e il browser Oculus integrato. Questo articolo è incentrato su quest'ultimo. Il sito web di Oculus presenta Oculus Browser come segue.
"Oculus Browser supporta gli standard web più recenti e altre tecnologie per aiutarti a creare esperienze VR sul web. I siti web 2D di oggi funzionano perfettamente in Oculus Browser perché utilizza il motore di rendering Chromium. È ulteriormente ottimizzato per i visori Oculus per ottenere le migliori prestazioni e consentire agli sviluppatori web di sfruttare tutto il potenziale della VR con nuove API, come WebXR. Con WebXR, stiamo aprendo le porte alla prossima frontiera del web".
User agent
La stringa user agent del browser al momento della scrittura è la seguente.
Mozilla/5.0 (X11; Linux x86_64; Quest 2)
AppleWebKit/537.36 (KHTML, like Gecko)
OculusBrowser/18.1.0.2.46.337441587
SamsungBrowser/4.0
Chrome/95.0.4638.74
VR
Safari/537.36
Come puoi vedere, la versione attuale 18.1.0.2.46.337441587 di Oculus Browser è basata su Chrome
95.0.4638.74, che è solo una versione precedente rispetto alla versione stabile attuale di Chrome, ovvero
96.0.4664.110. Se l'utente passa alla modalità mobile, VR diventa Mobile VR.
Interfaccia utente
L'interfaccia utente del browser (mostrata sopra) ha le seguenti funzionalità (riga superiore da sinistra a destra):
- Pulsante Indietro
- Pulsante Ricarica
- Informazioni sito
- Barra degli URL
- Pulsante Crea segnalibro
- Pulsante di ridimensionamento con opzioni stretto, medio e largo, nonché una funzionalità di zoom
- Pulsante Richiedi sito web mobile
- Pulsante del menu con le seguenti opzioni:
- Attivare la modalità privata
- Chiudi tutte le schede
- Impostazioni
- Preferiti
- Download
- Cronologia
- Cancella dati di navigazione
La riga inferiore include le seguenti funzionalità:
- Pulsante Chiudi
- Pulsante Riduci a icona
- Pulsante con tre puntini con opzioni Indietro, Avanti e Ricarica
Frequenza di aggiornamento e rapporto pixel del dispositivo
Per Oculus Quest 2, Oculus Browser esegue il rendering sia dei contenuti delle pagine web 2D sia di WebXR a una frequenza di aggiornamento di 90 Hz. Quando guardi contenuti multimediali a schermo intero, Oculus Browser ottimizza la frequenza di aggiornamento del dispositivo in base alla frequenza fotogrammi del video, ad esempio 24 fps. Oculus Quest 2 ha un rapporto tra pixel del dispositivo di 1,5 per un testo nitido.
PWA in Oculus Browser e nell'Oculus Store
Il 28 ottobre 2021, Jacob Rossi, Product Management Lead di Meta (Oculus), ha annunciato che le PWA sarebbero arrivate su Oculus Quest e Oculus Quest 2. Di seguito descrivo l'esperienza PWA su Oculus e spiego come creare, caricare lateralmente e testare la tua PWA su Oculus Quest 2.
Condivisione dello stato
Lo stato di accesso è condiviso tra Oculus Browser e le PWA, consentendo agli utenti di passare facilmente da uno all'altro. Naturalmente, l'accesso con Facebook è supportato immediatamente. Oculus Browser include un gestore delle password che consente agli utenti di archiviare e condividere le proprie password in modo sicuro tra il browser e le esperienze delle app installate.
Dimensioni delle finestre PWA
Le finestre del browser e delle PWA installate possono essere ridimensionate liberamente dall'utente. L'altezza può variare tra 625 px e 1200 px. La larghezza può essere impostata tra 400 e 2000 px. Le dimensioni predefinite sono 1000 × 625 px.
Interagire con le PWA
Le PWA possono essere controllate con i controller sinistro e destro di Oculus, mouse e tastiere Bluetooth e tramite il rilevamento della mano. Lo scorrimento funziona tramite gli stick analogici sui controller Oculus oppure pizzicando il pollice e l'indice e spostandoli nella direzione desiderata. Per selezionare qualcosa, l'utente può puntare e pizzicare.
Autorizzazioni per le PWA
Le autorizzazioni in Oculus Browser funzionano praticamente allo stesso modo che in Chrome. Lo stato viene condiviso tra le app in esecuzione nel browser e le PWA installate, in modo che gli utenti possano passare da un'esperienza all'altra senza dover concedere nuovamente le stesse autorizzazioni.
Sebbene siano implementate molte autorizzazioni, non tutte le funzionalità sono supportate. Ad esempio, mentre la richiesta dell'autorizzazione di accesso alla posizione va a buon fine, il dispositivo non riceve mai una posizione. Allo stesso modo, le varie API hardware come WebHID, Web Bluetooth e così via superano tutte il rilevamento delle funzionalità, ma non mostrano un selettore che consenta all'utente di accoppiare Oculus a un dispositivo hardware. Suppongo che la rilevabilità delle funzionalità delle API verrà perfezionata una volta che il browser sarà più maturo.
Debug delle PWA tramite Chrome DevTools
Dopo aver attivato la modalità sviluppatore, il debug delle PWA su Oculus Quest 2 funziona esattamente come descritto in Eseguire il debug da remoto dei dispositivi Android.
- Sul dispositivo Oculus, vai al sito che ti interessa in Oculus Browser.
- Avvia Google Chrome sul computer e vai su
chrome://inspect/#devices. - Trova il dispositivo Oculus in questione, seguito da una serie di schede del browser Oculus attualmente aperte sul dispositivo.
- Fai clic su Esamina nella scheda del browser Oculus che preferisci.
Rilevabilità delle app
Gli utenti possono utilizzare il browser stesso o l'Oculus Store per scoprire le PWA. Come per qualsiasi altro browser, le PWA installate funzionano anche in Oculus Browser come siti web in esecuzione in una scheda. Quando un utente visita un sito, Oculus Browser lo aiuta a scoprire l'app se (e solo se) è disponibile nell'Oculus Store. Per gli utenti che hanno già installato l'app, Oculus Browser li aiuterà a passare facilmente all'app, se lo desiderano.
PWA esemplari su Oculus Quest 2
PWA di Meta
Diverse divisioni di Meta hanno creato PWA per Oculus Quest 2, ad esempio Instagram e Facebook. Queste PWA vengono eseguite in finestre di app autonome che non hanno una barra degli URL e che possono essere ridimensionate liberamente.
PWA di altri sviluppatori
Al momento della stesura di questo articolo, nell'Oculus Store è presente un numero ridotto ma in crescita di PWA per Oculus Quest 2. Spike consente agli utenti di utilizzare tutti gli strumenti di lavoro essenziali come email, chat, chiamate, note, attività e cose da fare dalla posta in arrivo in un hub di ambiente virtuale direttamente nell'app Spike.
Un altro esempio è Smartsheet, uno spazio di lavoro dinamico che offre gestione dei progetti, flussi di lavoro automatizzati e creazione rapida di nuove soluzioni.
Sono in arrivo altre PWA come Slack, Dropbox o Canva, come anticipato in un video con Jacob Rossi pubblicato in occasione della conferenza Connect di Facebook nel 2021.
Creare PWA per Oculus
Meta ha descritto i passaggi richiesti nella sua documentazione. In generale, le PWA installabili in Chrome dovrebbero spesso funzionare immediatamente su Oculus.
Requisiti del file manifest dell'app web
Esistono alcune differenze importanti rispetto ai
criteri di installazione di Chrome e alla
specifica del file manifest dell'app web. Ad esempio, al momento Oculus supporta solo
le lingue da sinistra a destra, mentre la specifica del file manifest dell'app web non impone
questi vincoli. Un altro esempio è start_url, che Chrome richiede rigorosamente per l'installazione di un'app, ma che su Oculus è facoltativo. Oculus offre uno
strumento da riga di comando che consente
agli sviluppatori di creare PWA per Oculus Quest 2, il che consente loro di passare i parametri mancanti (o
di eseguire l'override di quelli esistenti) nel file manifest dell'app web.
Oculus dispone di una serie di campi manifest di app web proprietari facoltativi che possono essere utilizzati per personalizzare l'esperienza PWA.
Creare pacchetti di PWA con l'interfaccia a riga di comando Bubblewrap
Bubblewrap è un insieme open source di librerie e uno strumento a riga di comando (CLI) per Node.js. Bubblewrap è sviluppato dal team di Google Chrome per aiutare gli sviluppatori a generare, creare e firmare un progetto Android che avvii la tua PWA come Attività web attendibile (TWA).
Al momento, Meta Quest Browser non supporta completamente le TWA, ma a partire dalla versione 1.18.0, Bubblewrap supporta il packaging delle PWA per i dispositivi Meta Quest.
Può generare file APK universali che aprono una TWA sui normali dispositivi Android e il browser Meta Quest sui dispositivi Meta Quest.
Supponendo che tu abbia installato Node.js, Bubblewrap CLI può essere installato con il seguente comando:
npm i -g @bubblewrap/cli
Quando esegui Bubblewrap per la prima volta, ti verrà chiesto di scaricare e installare automaticamente le dipendenze esterne richieste: Java Development Kit (JDK) e Android SDK Build Tools.
Per generare un progetto Android compatibile con Meta Quest che esegue il wrapping della tua PWA, esegui il comando init
con il flag --metaquest e segui la procedura guidata:
bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest
Una volta generato il progetto, crealo e firmalo eseguendo:
bubblewrap build
Verrà generato un file denominato app-release-signed.apk. Questo file può essere installato sul dispositivo
o pubblicato sul Meta Quest Store, sul Google Play Store o su una qualsiasi delle altre piattaforme di distribuzione
di app per Android.
Creazione di pacchetti di PWA con l'utilità della piattaforma Oculus
Oculus Platform Utility è lo strumento a riga di comando ufficiale sviluppato da Meta per la pubblicazione di app per Oculus Rift e Meta Quest.
Consente inoltre di creare pacchetti di PWA per i dispositivi Meta Quest con il comando create-pwa e di pubblicarli
nel Meta Quest Store e in App Lab.
Imposta il nome del file di output tramite il parametro -o e il percorso dell'SDK Android tramite il parametro --android-sdk.
Punta lo strumento all'URL attivo del manifest dell'app web tramite il parametro --web-manifest-url.
Se non hai un manifest nella tua PWA pubblicata o vuoi ignorare il manifest pubblicato, puoi comunque
generare un APK per la tua PWA utilizzando un file manifest locale e il parametro --manifest-content-file.
Per lasciare il manifest il più puro possibile, utilizza il parametro --package-name con un valore nella
notazione del nome di dominio inverso (ad esempio, com.company.app.pwa), anziché aggiungere il
campo proprietario ovr_package_name al manifest.
ovr-platform-util create-pwa -o output.apk --android-sdk ~/bin/android-10 --manifest-content-file manifest.json --package-name com.company.app.pwa
Creare pacchetti PWA con PWABuilder
A parere degli autori, l'utilizzo di PWABuilder è il modo più semplice e quindi consigliato per creare pacchetti di PWA per Meta Quest al momento.
PWABuilder è un progetto open source sviluppato da Microsoft che consente agli sviluppatori di creare pacchetti e firmare le proprie PWA per la pubblicazione in vari store, tra cui Microsoft Store, Google Play Store, App Store e Meta Quest Store.
Il packaging delle PWA con PWABuilder è semplice: basta inserire l'URL di una PWA, inserire/modificare i metadati dell'app e fare clic sul pulsante Genera.
PWABuilder consente agli sviluppatori di scegliere lo strumento da utilizzare per il packaging delle PWA per i dispositivi Meta Quest.
Puoi scegliere l'opzione Meta Quest per utilizzare l'utilità della piattaforma Oculus.
Puoi scegliere l'opzione Android per utilizzare Bubblewrap e selezionare la casella di controllo Compatibile con Meta Quest.
Installare le PWA con ADB
Dopo aver creato il file APK, puoi caricarlo sul dispositivo Meta Quest utilizzando ADB tramite USB o Wi-Fi:
adb install app-release-signed.apk
Se utilizzi Bubblewrap CLI per creare pacchetti di PWA, fornisce un comodo comando alias per caricare lateralmente il file APK:
bubblewrap install
Le app caricate lateralmente vengono visualizzate in una sezione Origini sconosciute nel riquadro delle app.
Invio di app
Il caricamento e l'invio di PWA all'Oculus Store sono descritti in dettaglio nella documentazione dell'Oculus Developer Center.
Oltre a inviare app all'Oculus Store, gli sviluppatori possono anche distribuire le proprie app tramite piattaforme come SideQuest direttamente ai consumatori in modo sicuro, senza richiedere l'approvazione dello store. In questo modo, possono distribuire un'app direttamente agli utenti finali, anche se è in fase di sviluppo iniziale, sperimentale o destinata a un pubblico unico.
Testare le app multi-scheda
Per testare le app multi-scheda, ho creato una piccola PWA di test che mostra le varie funzionalità dei link: ovvero l'apertura di una nuova scheda nella PWA, la permanenza nella scheda corrente, l'apertura di una nuova finestra del browser e l'apertura in una WebView rimanendo nella scheda corrente. Crea una copia installabile localmente di questa app eseguendo i comandi riportati di seguito sulla tua macchina.
ovr-platform-util create-pwa -o test.apk --android-skd ~/bin/android-10 --web-manifest-url https://tomayac.github.io/oculus-pwa-test/manifest.json --package-name com.example.pwa
adb install test.apk
Ecco un screencast dell'app di test.
Una versione di SVGcode per Oculus
Per provare le istruzioni, ho creato una versione per Oculus della mia PWA più recente, SVGcode. Puoi scaricare il file APK risultante
output.apk
da Google Drive. Se vuoi esaminare ulteriormente il pacchetto, ho anche una
versione decompilata. Trova le istruzioni di compilazione in
package.json.
L'utilizzo dell'app su Oculus funziona correttamente, inclusa la possibilità di aprire e salvare i file. Oculus Browser non supporta l'API File System Access, ma l'approccio di fallback è utile. L'unica cosa che non funzionava era lo zoom con le dita. Mi aspettavo che funzionasse premendo il pulsante del grilletto su entrambi i controller e poi muovendoli in direzioni opposte. A parte questo, tutto il resto è stato performante e reattivo, come puoi vedere nella registrazione dello schermo incorporata.
PWA WebXR 3D immersive
Il supporto delle PWA su Oculus Quest non è limitato alle app 2D piatte. Gli sviluppatori possono creare esperienze 3D immersive per la VR utilizzando l'API WebXR.
Ti stai chiedendo come vengono gestiti vari prompt (installazione di PWA, richieste di autorizzazione, notifiche) all'interno della VR, se vengono gestiti?
Ecco un screencast del test dei prompt dell'user agent del gruppo di lavoro Immersive Web dei test WebXR.
Come puoi vedere, per attivare la modalità VR è necessaria l'autorizzazione dell'utente. Le autorizzazioni vengono richieste una volta per origine. La richiesta di autorizzazioni comporta l'uscita dalla modalità immersiva. Al momento le notifiche non sono supportate.
Tracciamento delle mani
Puoi usare le mani per interagire con le PWA in modalità immersiva grazie all'API WebXR Hand Input e al sistema di tracciamento delle mani basato sull'AI di Meta.
Ecco un video screencast di Hand Tracking Sample del gruppo di lavoro Immersive Web's WebXR Samples.
Realtà aumentata/mista (Passthrough)
Come annunciato al Meta Connect 2022, il browser Meta Quest ha aggiunto il supporto per la realtà aumentata (AR) WebXR, nota anche come realtà mista (MR), sui dispositivi Meta Quest 2 e Meta Quest Pro.
Diamo un'occhiata a un esempio di starter di A-Frame leggermente modificato con modelli ridimensionati e cielo e aereo nascosti per la realtà aumentata.
A-Frame è un framework web open source per la creazione di esperienze 3D/VR/AR interamente basate su elementi HTML personalizzati dichiarativi e riutilizzabili, facili da leggere, comprendere e copiare e incollare.
Ecco un screencast di questa demo su Meta Quest 2.
Meta Quest 2 ha fotocamere monocromatiche, quindi il passthrough è in scala di grigi, mentre Meta Quest Pro ha fotocamere a colori.
Conclusioni
Le PWA su Oculus Quest 2 sono molto divertenti e promettenti. La tela virtuale infinita che consente agli utenti di scalare lo schermo in base a ciò che si adatta meglio all'attività corrente ha un grande potenziale per cambiare il nostro modo di lavorare in futuro. La digitazione in VR con il monitoraggio delle mani è ancora agli inizi e, almeno per me, non funziona ancora in modo molto affidabile, ma è sufficiente per inserire URL o digitare testi brevi.
Ciò che mi piace di più delle PWA su Oculus Quest 2 è che sono PWA normali che possono essere utilizzate senza modifiche in una scheda del browser o tramite un wrapper APK sottile senza API specifiche della piattaforma. Il targeting di più piattaforme con lo stesso codice non è mai stato così semplice. Viva le PWA in VR e AR sul web. Il futuro è roseo.
Ringraziamenti
Foto di Oculus Quest 2 di Maximilian Prandstätter su Flickr. Immagini dello Store Oculus delle app Instagram, Facebook, Browser Oculus e Spike, nonché l'illustrazione della rilevabilità delle app e l'animazione del rilevamento della mano per gentile concessione di Meta. Immagine hero di Arnau Marín i Puig. Questo post è stato rivisto da Joe Medley.