Oculus Quest 2 è un visore per realtà virtuale (VR) creato da Oculus, una divisione di Meta. Ora gli sviluppatori possono creare e distribuire app web progressive 2D e 3D che sfruttano la funzionalità multitasking di Oculus Quest 2.
Oculus Quest 2
Oculus Quest 2 è un visore per realtà virtuale (VR) creato da Oculus, una divisione di Meta. È il successore del precedente visore dell'azienda, l'Oculus Quest. Il dispositivo può funzionare sia come cuffie indipendente con 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 Qualcomm Snapdragon XR2 su un chip con 6 GB di RAM. Il display di Quest 2 è un singolo pannello LCD con interruttore rapido con risoluzione di 1832 x 1920 pixel per occhio e una frequenza di aggiornamento fino a 120 Hz.
Il browser Oculus
Al momento sono disponibili tre browser per Oculus Quest 2: Wolvic, un successore di Firefox Reality, e il Oculus Browser integrato. Questo articolo si concentra su quest'ultimo. Il sito web di Oculus introduce il browser Oculus nel seguente modo.
"Oculus Browser supporta i più recenti standard web e altre tecnologie per aiutarti a creare esperienze VR sul web. I siti web 2D di oggi funzionano benissimo in Oculus Browser perché si basa sul motore di rendering di Chromium. È ulteriormente ottimizzato per le cuffie Oculus al fine di ottenere le migliori prestazioni e consentire agli sviluppatori web di sfruttare tutto il potenziale della VR con nuove API come WebXR. Grazie a WebXR, apriremo le porte alla prossima frontiera del web."
User agent
La stringa dello 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, l'attuale versione 18.1.0.2.46.337441587 del browser Oculus è basata su Chrome
95.0.4638.74, ossia solo una versione rispetto all'attuale versione stabile 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) presenta le seguenti funzionalità (riga superiore da sinistra a destra):
- Pulsante Indietro
- Pulsante Ricarica
- Informazioni sul sito
- Barra degli URL
- Pulsante Crea preferito
- Pulsante Ridimensiona con opzioni Stretto, Medio e Largo e una funzionalità di zoom
- Pulsante Richiedi sito web mobile
- Pulsante Menu con le seguenti opzioni:
- Attiva 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 per tornare indietro, andare avanti e ricaricare
Frequenza di aggiornamento e rapporto pixel del dispositivo
Per Oculus Quest 2, Oculus Browser esegue il rendering dei contenuti delle pagine web 2D e 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 nel browser Oculus e nell'Oculus Store
Il 28 ottobre 2021, Jacob Rossi, Product Management Lead di Meta (Oculus), ha condiviso il fatto che le PWA stavano arrivando a Oculus Quest e Oculus Quest 2. Di seguito, descriviamo l'esperienza con le PWA su Oculus e spiegherò come creare, installare tramite sideload e testare la PWA in Oculus Quest 2.
Condivisione stato
Lo stato dell'accesso è condiviso tra Oculus Browser e le PWA, in modo che gli utenti possano passare facilmente da uno all'altro. Ovviamente, l'accesso a Facebook è supportato fin dal primo avvio. 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 e le finestre del browser 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 px e 2000 px. Le dimensioni predefinite sono 1000 × 625 px.
Interazione con le PWA
Le PWA possono essere controllate con i controller sinistro e destro di Oculus, con i mouse e le tastiere Bluetooth e tramite il rilevamento della mano. Lo scorrimento funziona tramite le levette sui controller Oculus o premendo il pollice e l'indice e spostandoti nella direzione desiderata. Per selezionare qualcosa, l'utente può puntare e pizzicare.
Autorizzazioni per le PWA
Le autorizzazioni del browser Oculus funzionano più o meno come 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.
Anche se sono implementate molte autorizzazioni, non tutte le funzionalità sono supportate. Ad esempio, anche se la richiesta dell'autorizzazione di geolocalizzazione ha esito positivo, il dispositivo non riceve mai una posizione. Analogamente, le varie API hardware come WebHID, Web Bluetooth e così via superano il rilevamento delle funzionalità, ma in realtà non mostrano un selettore che consentirebbe all'utente di accoppiare Oculus a un dispositivo hardware. Presumo che la rilevabilità delle funzionalità delle API verrà perfezionata una volta che il browser matura.
Debug delle PWA tramite Chrome DevTools
Dopo aver attivato la modalità sviluppatore, il debug delle PWA su Oculus Quest 2 funziona esattamente come descritto nella sezione Debug remoto dei dispositivi Android.
- Sul dispositivo Oculus, vai al sito desiderato nel browser Oculus.
- Avvia Google Chrome sul computer e vai a
chrome://inspect/#devices. - Individua il dispositivo Oculus in questione, a cui segue un insieme di schede del browser Oculus attualmente aperte sul dispositivo.
- Fai clic su inspect nella scheda del browser di Oculus che ti interessa.
Rilevabilità delle app
Gli utenti possono utilizzare il browser stesso o l'Oculus Store per scoprire le PWA. Come con qualsiasi altro browser, anche le PWA installate funzionano 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.
Esempi di PWA di 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 indipendenti che non hanno una barra degli URL e possono essere ridimensionate.
PWA di altri sviluppatori
Al momento della stesura di questo articolo, c'è un numero ridotto ma crescente di PWA per Oculus Quest 2 sull'Oculus Store. Spike consente agli utenti di sperimentare tutti gli strumenti di lavoro essenziali come email, chat, chiamate, note, attività e cose da fare, dalla propria Posta in arrivo in un hub di ambiente virtuale direttamente nell'app Spike.
Un altro esempio è Smartsheet, un'area di lavoro dinamica che offre gestione dei progetti, flussi di lavoro automatizzati e la creazione rapida di nuove soluzioni.
Stanno arrivando altre PWA come Slack, Dropbox o Canva, come anticipato in un video con Jacob Rossi pubblicato nel contesto della conferenza Connect di Facebook nel 2021.
Creare PWA per Oculus
Meta ha delineato i passaggi richiesti nella sua documentazione. In generale, su Oculus le PWA installabili in Chrome dovrebbero funzionare immediatamente.
Requisiti del manifest dell'app web
Esistono alcune differenze importanti rispetto ai criteri di installabilità di Chrome e alle specifiche del manifest per le app web. Ad esempio, al momento Oculus supporta solo lingue da sinistra a destra, mentre la specifica del manifest per le app web non applica questo tipo di vincoli. Un altro esempio è start_url, che Chrome richiede rigorosamente l'installazione di un'app, ma è facoltativa su Oculus. Oculus offre uno strumento a riga di comando che consente agli sviluppatori di creare PWA per Oculus Quest 2, in modo da passare i parametri mancanti (o
eseguire l'override di quelli esistenti) nel manifest dell'app web.
Oculus ha una serie di campi facoltativi proprietari del manifest web dell'app che possono essere utilizzati per personalizzare l'esperienza con la PWA.
Creazione di pacchetti di PWA con l'interfaccia a riga di comando Bubble wrap
Bubblewrap è un set open source di librerie e uno strumento a riga di comando (CLI) per Node.js. Bubble wrap è sviluppato dal team di Google Chrome per aiutare gli sviluppatori a generare, creare e firmare un progetto Android che lancia la tua PWA come Attività web attendibile (TWA).
Al momento Meta Quest Browser non supporta completamente TWA, ma a partire dalla versione 1.18.0, il wrapping di bolle supporta PWA per i dispositivi Meta Quest.
Può generare file APK universali che aprono un TWA su normali dispositivi Android e nel browser Meta Quest sui dispositivi Meta Quest.
Supponendo che tu abbia installato Node.js, puoi installare l'interfaccia a riga di comando Bubblewrap con il seguente comando:
npm i -g @bubblewrap/cli
Quando esegui Bubblewrap per la prima volta, ti verrà proposto 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 aggrega la 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 in Meta Quest Store, Google Play Store o qualsiasi altra piattaforma di distribuzione di app Android.
Packaging delle 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 PWA per i dispositivi Meta Quest con il comando create-pwa, e di pubblicarle
nel Meta Quest Store e nell'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 verso l'URL pubblicato del file manifest dell'app web tramite il parametro --web-manifest-url.
Se non disponi di un manifest nella PWA live o se vuoi eseguire l'override del manifest live, puoi comunque generare un APK per la 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 ovr_package_name proprietario al file 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
Packaging delle PWA con PWABuilder
Secondo gli autori, l'uso di PWABuilder è il modo più semplice e quindi consigliato per pacchettizzare al momento 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.
La creazione di pacchetti di PWA con PWABuilder è semplice, come l'inserimento dell'URL di una PWA, l'inserimento/la modifica dei metadati dell'app e il clic sul pulsante Genera.
PWABuilder offre agli sviluppatori la possibilità di scegliere quale strumento avanzato utilizzare per pacchettizzare le PWA per i dispositivi Meta Quest.
Puoi scegliere l'opzione Meta Quest per utilizzare Oculus Platform Utility.
Puoi scegliere l'opzione Android per utilizzare il pluriball e selezionare la casella di controllo Compatibile con Meta Quest.
Installazione di PWA con ADB
Dopo aver creato il file APK, puoi installarlo 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 pacchettizzare le PWA, fornisce un pratico comando alias per installare il file APK tramite sideload:
bubblewrap install
Le app installate tramite sideload vengono visualizzate in una sezione Origini sconosciute nel riquadro a scomparsa delle app.
Invio dell'app
Il caricamento e l'invio delle PWA all'Oculus Store sono trattati nel dettaglio nella documentazione di Oculus Developer Center.
Oltre a inviare app a Oculus Store, gli sviluppatori possono anche distribuire le loro app tramite piattaforme come SideQuest direttamente ai consumatori in modo sicuro e protetto, senza richiedere l'approvazione dello store. Ciò consente loro di mostrare un'app direttamente agli utenti finali, anche se è nelle prime fasi di sviluppo, sperimentale o destinata a un pubblico unico.
Test delle app multi-scheda in corso...
Per testare le app con più schede, ho creato una piccola PWA di prova che illustra le varie funzionalità dei link: apertura di una nuova scheda in-PWA, rimanere nella scheda corrente, aprire una nuova finestra del browser e aprire in una WebView la scheda corrente. Crea una copia installabile localmente di questa app eseguendo i comandi riportati di seguito sulla 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 prova.
Una versione Oculus di SVGcode
Per seguire le istruzioni per fare un giro, ho creato una versione 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 per la creazione in
package.json.
L'utilizzo dell'app su Oculus funziona bene, inclusa la possibilità di aprire e salvare file. Oculus Browser non supporta l'API File System Access, ma può essere utile l'approccio di riserva. L'unica cosa che non ha funzionato è lo zoom tramite pizzico. Mi aspettavo che funzionasse premendo il pulsante di attivazione su entrambi i controller e poi spostandoli in direzioni opposte. A parte questo, tutto il resto è stato ad alte prestazioni e reattivo, come vedi nello screencast incorporato.
PWA WebXR coinvolgenti 3D
Il supporto delle PWA su Oculus Quest non è limitato alle app 2D piatte. Gli sviluppatori possono creare esperienze 3D coinvolgenti per la VR utilizzando l'API WebXR.
Vi state chiedendo come vengono gestite le varie richieste (installazione di PWA, richieste di autorizzazione, notifiche) all'interno della VR?
Ecco uno screencast dei test dei prompt dello user agent dai test WebXR di Immersive Web Working Group.
Come puoi vedere, per accedere alla modalità VR è necessaria l'autorizzazione dell'utente. Le autorizzazioni vengono richieste una volta per origine. Se richiedi autorizzazioni, uscirai dalla modalità immersiva. Le notifiche non sono attualmente supportate.
Rilevamento della mano
Puoi usare le mani per interagire con le PWA in modalità immersiva grazie all'API Hand Input di WebXR e al sistema di rilevamento della mano basato sull'IA di Meta.
Ecco uno screencast di Hand Tracking Sample da WebXR Samples di Immersive Web Working Group.
Realtà aumentata/mista (passthrough)
Come annunciato a Meta Connect 2022, Meta Quest Browser ha aggiunto il supporto per la realtà aumentata (AR) di WebXR, nota anche come realtà mista (MR), sui dispositivi Meta Quest 2 e Meta Quest Pro.
Diamo un'occhiata a un esempio di esempio A-Frame leggermente modificato con modelli in scala ridotta e cielo e piano nascosti per la realtà aumentata.
A-Frame è un framework web open source per la creazione di esperienze 3D/VR/AR interamente a partire 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 scalare lo schermo in base all'attività attuale ha molte potenzialità per cambiare il nostro modo di lavorare in futuro. Anche se la digitazione in VR con il tracciamento manuale è ancora agli inizi e, almeno per me, non funziona ancora in modo molto affidabile, funziona abbastanza bene per inserire URL o digitare testi brevi.
Quello che mi piace di più delle PWA di Oculus Quest 2 è che sono solo PWA normali che possono essere utilizzate invariate in una scheda del browser o tramite un wrapper APK sottile senza API specifiche per la piattaforma. Scegliere come target più piattaforme con lo stesso codice non è mai stato così facile. Ecco le PWA in VR e AR sul web. Il futuro è roseo!
Ringraziamenti
Foto di Oculus Quest 2 di Maximilian Prandstätter su Flickr. Immagini di Oculus Store per le app Instagram, Facebook, Oculus Browser e Spike, nonché per la rilevabilità delle app e l'animazione del tracciamento delle mani fornite da Meta. Immagine hero di Arnau Marín i Puig. Questo post è stato esaminato da Joe Medley.