Oculus Quest 2 è un visore per la realtà virtuale (VR) creato da Oculus, una divisione di Meta. Ora gli sviluppatori possono creare e distribuire app web progressive (PWA) 2D e 3D che sfruttano la funzionalità di 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 può funzionare sia come auricolare autonomo con un sistema operativo interno basato su Android sia con software VR compatibile con Oculus in esecuzione su un computer desktop quando è collegato 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 singolo pannello LCD a commutazione rapida con una risoluzione di 1832 x 1920 pixel per occhio e una frequenza di aggiornamento fino a 120 Hz.
Browser Oculus
Attualmente sono disponibili tre browser per Oculus Quest 2: Wolvic, il successore di Firefox Reality e il browser integrato Oculus. Questo articolo è incentrato su quest'ultimo. Il sito web di Oculus presenta il browser Oculus 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 alla grande in Oculus Browser perché è basato sul 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 realtà virtuale 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 stesura di questo articolo è 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 corrente 18.1.0.2.46.337441587
del browser Oculus è basata su Chrome95.0.4638.74
, ovvero una sola versione dietro la versione stabile corrente di Chrome, ovvero96.0.4664.110
. Se l'utente passa alla modalità mobile, VR
diventa Mobile VR
.
Interfaccia utente
L'interfaccia utente del browser (mostrata sopra) presenta le seguenti funzionalità (riga superiore da sinistra a destra):
- Pulsante Indietro
- Pulsante Ricarica
- Informazioni sito
- Barra degli URL
- Pulsante Crea segnalibro
- Pulsante per ridimensionare con opzioni strette, medie e larghe, 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 f/s. Oculus Quest 2 ha un rapporto 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 comunicato che le PWA saranno presto disponibili su Oculus Quest e Oculus Quest 2. Di seguito descrivo l'esperienza PWA su Oculus e spiego come creare, eseguire il sideload e testare la tua PWA su Oculus Quest 2.
Condivisione dello stato
Lo stato di accesso è condiviso tra il browser Oculus e le PWA, consentendo agli utenti di passare facilmente da un servizio all'altro. Naturalmente, Accesso con Facebook è supportato immediatamente. Il browser Oculus include un gestore delle password che consente agli utenti di memorizzare e condividere le proprie password in modo sicuro tra il browser e le esperienze delle app installate.
Dimensioni delle finestre delle PWA
Le finestre del browser e le finestre delle PWA installate possono essere ridimensionate liberamente dall'utente. L'altezza può variare tra 625 e 1200 px. La larghezza può essere impostata tra 400 e 2000 pixel. Le dimensioni predefinite sono 1000 x 625 px.
Interazione con le PWA
Le PWA possono essere controllate con i controller Oculus sinistro e destro, mouse e tastiere Bluetooth e tramite il rilevamento dei movimenti delle mani. Puoi scorrere utilizzando i tasti freccia sui controller Oculus oppure pizzicando il pollice e l'indice e muovendoti nella direzione desiderata. Per selezionare qualcosa, l'utente può fare clic e pizzicare.
Autorizzazioni per le PWA
Le autorizzazioni in Oculus Browser funzionano in modo molto simile a come funzionano 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 di nuovo le stesse autorizzazioni.
Sebbene siano implementate molte autorizzazioni, non tutte le funzionalità sono supportate. Ad esempio, anche se la richiesta dell'autorizzazione di geolocalizzazione va a buon fine, il dispositivo non riceve mai una posizione. Analogamente, 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 con un dispositivo hardware. Suppongo che la rilevabilità delle funzionalità delle API verrà perfezionata man mano che il browser maturerà.
Eseguire il 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 remoto dei dispositivi Android.
- Sul dispositivo Oculus, vai al sito desiderato in Oculus Browser.
- Avvia Google Chrome sul computer e vai alla pagina
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 ti interessa.
Rilevamento delle app
Gli utenti possono utilizzare il browser stesso o l'Oculus Store per scoprire le PWA. Come con 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, il browser Oculus lo aiuta a scoprire l'app se (e solo se) è disponibile nell'Oculus Store. Gli utenti che hanno già installato l'app potranno passare facilmente all'app se lo desiderano grazie a Oculus Browser.
PWA esemplari su Oculus Quest 2
PWA di Meta
Diversi reparti 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, nell'Oculus Store è disponibile un numero ridotto, ma in crescita, di PWA per Oculus Quest 2. Spike consente agli utenti di provare tutti gli strumenti di lavoro essenziali come email, chat, chiamate, note, attività e promemoria dalla posta in arrivo in un hub di ambiente virtuale direttamente nell'app Spike.
Un altro esempio è Smartsheet, un spazio di lavoro dinamico che offre gestione dei progetti, flussi di lavoro automatizzati e creazione rapida di nuove soluzioni.
Altre PWA come Slack, Dropbox o Canva sono in arrivo, come anticipato in un video con Jacob Rossi pubblicato nel contesto della conferenza Connect di Facebook nel 2021.
Creare PWA per Oculus
Meta ha descritto i passaggi necessari nella sua documentazione. In genere, le PWA installabili in Chrome dovrebbero funzionare spesso immediatamente su Oculus.
Requisiti del file manifest dell'app web
Esistono alcune differenze importanti rispetto ai
criteri di installabilità di Chrome e alla
specifica Web App Manifest. Ad esempio, al momento Oculus supporta solo
le lingue da sinistra a destra, mentre la specifica Web App Manifest non impone simili
limitazioni. Un altro esempio è start_url
, che Chrome richiede rigorosamente per l'installazione di un'app, ma che su Oculus è facoltativo. Oculus offre un
strumento a 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 dell'app web proprietari facoltativi che possono essere utilizzati per personalizzare l'esperienza PWA.
Imballaggio di PWA con l'interfaccia a riga di comando Bubblewrap
Bubblewrap è un insieme di librerie open source e uno strumento a riga di comando (CLI) per Node.js. Bubblewrap è sviluppato dal team di Google Chrome per aiutare gli sviluppatori a generare, compilare e firmare un progetto Android che avvii la tua PWA come Attività web attendibile (TWA).
Al momento, il browser Meta Quest 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 un'app TWA sui normali dispositivi Android e il browser Meta Quest sui dispositivi Meta Quest.
Supponendo che tu abbia installato Node.js, puoi installare Bubblewrap CLI 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, ovvero Java Development Kit (JDK) e Android SDK Build Tools.
Per generare un progetto Android compatibile con Meta Quest che ingloba la 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, compilalo e firmalo eseguendo:
bubblewrap build
Verrà generato un file denominato app-release-signed.apk
. Questo file può essere installato sul dispositivo o pubblicato su Meta Quest Store, Google Play Store o su qualsiasi altra piattaforma di distribuzione di app per Android.
Imballaggio di PWA con Oculus Platform Utility
Oculus Platform Utility è lo strumento a riga di comando ufficiale sviluppato da Meta per la pubblicazione di app per i dispositivi Oculus Rift e Meta Quest.
Consente inoltre di pacchettizzare le PWA per i dispositivi Meta Quest con il comando create-pwa
e di pubblicarle sul Meta Quest Store e su App Lab.
Imposta il nome del file di output tramite il parametro -o
e il percorso dell'SDK Android tramite il parametro --android-sdk
.
Indirizza lo strumento all'URL attivo del file manifest dell'app web tramite il parametro --web-manifest-url
.
Se non hai un file manifest nella tua PWA pubblicata o vuoi sostituire il file manifest pubblicato, puoi comunque generare un APK per la tua PWA utilizzando un file manifest locale e il parametro --manifest-content-file
.
Per mantenere il manifest il più puro possibile, utilizza il parametro --package-name
con un valore in notazione di nome di dominio inverso (ad esempio com.company.app.pwa
), anziché aggiungere al manifest il campo proprietario ovr_package_name
.
ovr-platform-util create-pwa -o output.apk --android-sdk ~/bin/android-10 --manifest-content-file manifest.json --package-name com.company.app.pwa
Imballaggio delle PWA con PWABuilder
Secondo gli autori, l'utilizzo di PWABuilder è al momento il modo più semplice e quindi consigliato per pacchettizzare le PWA per Meta Quest.
PWABuilder è un progetto open source sviluppato da Microsoft che consente agli sviluppatori di pacchettizzare 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 è semplicissimo: basta inserire l'URL di una PWA, inserire/modificare i metadati dell'app e fare clic sul pulsante Genera.
PWABuilder offre agli sviluppatori la possibilità di scegliere lo strumento da utilizzare per il packaging delle PWA per i dispositivi Meta Quest.
Puoi scegliere l'opzione Meta Quest per utilizzare Oculus Platform Utility.
Puoi scegliere l'opzione Android per utilizzare Bubblewrap e selezionare la casella di controllo Compatibile con Meta Quest.
Installazione di PWA con ADB
Dopo aver creato il file APK, puoi eseguirlo tramite sideload sul dispositivo Meta Quest utilizzando ADB tramite USB o Wi-Fi:
adb install app-release-signed.apk
Se utilizzi l'interfaccia a riga di comando Bubblewrap per il packaging delle PWA, hai a disposizione un comodo comando alias per eseguire il sideload del file APK:
bubblewrap install
Le app installate tramite sideload vengono visualizzate nella sezione Origini sconosciute del riquadro delle app.
Invio di app
Il caricamento e l'invio di PWA all'Oculus Store sono coperti in dettaglio nella documentazione del Centro sviluppatori Oculus.
Oltre a inviare le app all'Oculus Store, gli sviluppatori possono anche distribuire le proprie app tramite piattaforme come SideQuest direttamente ai consumatori in modo sicuro e protetto, senza richiedere l'approvazione dello store. In questo modo possono far arrivare un'app direttamente agli utenti finali, anche se è in una fase iniziale di sviluppo, sperimentale o rivolta a un pubblico specifico.
Testare le app con più schede
Per testare le app con più schede, ho creato una piccola PWA di test che dimostra le varie funzionalità di collegamento: apertura di una nuova scheda all'interno della PWA, mantenimento della scheda corrente, apertura di una nuova finestra del browser e apertura in 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 uno screencast dell'app di test.
Una versione di Oculus di SVGcode
Per provare le istruzioni, ho creato una versione per Oculus della mia PWA più recente, SVGcode. Puoi scaricare il file APK risultante
output.apk
dal mio 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. Il browser Oculus non supporta l'API File System Access, ma l'approccio di riserva è utile. L'unica cosa che non ha funzionato è lo zoom con due dita. Mi aspettavo che funzionasse premendo il pulsante di attivazione su entrambi i controller e muovendoli in direzioni opposte. A parte questo, tutto il resto ha funzionato bene e in modo reattivo, come puoi vedere nello screencast incorporato.
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 realtà virtuale utilizzando l'API WebXR.
Ti stai chiedendo come vengono gestiti i vari prompt (installazione di PWA, richieste di autorizzazione, notifiche) in VR, se sono gestiti?
Ecco uno screencast del test delle richieste di user agent dei test WebXR del Gruppo di lavoro per il web immersivo.
Come puoi vedere, l'accesso alla modalità VR richiede l'autorizzazione dell'utente. Le autorizzazioni vengono richieste una volta per origine. La richiesta di autorizzazioni fa uscire dalla modalità immersiva. Al momento le notifiche non sono supportate.
Rilevamento 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'IA di Meta.
Ecco uno screencast di Hand Tracking Sample tra i Samples WebXR del gruppo di lavoro Immersive Web.
Realtà aumentata/mista (passthrough)
Come annunciato in occasione di 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.
Vediamo un esempio introduttivo di A-Frame leggermente modificato con modelli ridotti 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 costituite da elementi HTML personalizzati dichiarativi e riutilizzabili, facili da leggere, comprendere e copiare e incollare.
Ecco uno 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 molto promettenti. La tela virtuale infinita che consente agli utenti di ridimensionare lo schermo in base alle esigenze dell'attività corrente ha un grande potenziale per cambiare il nostro modo di lavorare in futuro. Sebbene la digitazione in VR con il rilevamento delle mani sia ancora agli inizi e, almeno per me, non funzioni ancora in modo molto affidabile, funziona abbastanza bene per inserire URL o digitare testi brevi.
La cosa che mi piace di più delle PWA su Oculus Quest 2 è che sono semplici PWA che possono essere utilizzate invariate in una scheda del browser o tramite un wrapper APK sottile senza API specifiche della piattaforma. Scegliere come target più piattaforme con lo stesso codice non è mai stato così facile. Ecco a voi le PWA in VR e AR sul web. Il futuro è roseo.
Ringraziamenti
Foto di Oculus Quest 2 di Maximilian Prandstätter su Flickr. Immagini dell'Oculus Store delle app Instagram, Facebook, Oculus Browser e Spike, nonché illustrazione della visibilità dell'app e animazione del monitoraggio delle mani courtesy of Meta. Immagine hero di Arnau Marín i Puig. Questo post è stato esaminato da Joe Medley.