Die Oculus Quest 2 ist ein Virtual-Reality-Headset (VR), das von Oculus, einer Abteilung von Meta, entwickelt wurde. Entwickler können jetzt 2D- und 3D-PWAs (Progressive Web Apps) erstellen und vertreiben, die die Multitasking-Funktion der Oculus Quest 2 nutzen.
Oculus Quest 2
Das Oculus Quest 2 ist ein Virtual-Reality-Headset (VR), das von Oculus, einer Abteilung von Meta, entwickelt wurde. Sie ist der Nachfolger des vorherigen Headsets des Unternehmens, der Oculus Quest. Das Gerät kann sowohl als eigenständiges Headset mit einem internen, Android-basierten Betriebssystem als auch mit Oculus-kompatibler VR-Software auf einem Computer verwendet werden, wenn es über USB oder WLAN verbunden ist. Es verwendet das System-on-Chip Snapdragon XR2 von Qualcomm mit 6 GB RAM. Das Display der Quest 2 ist ein einzelnes Fast-Switch-LCD-Panel mit einer Auflösung von 1.832 × 1.920 Pixeln pro Auge und einer Aktualisierungsrate von bis zu 120 Hz.
Oculus Browser
Derzeit sind drei Browser für die Oculus Quest 2 verfügbar: Wolvic, ein Nachfolger von Firefox Reality, und der integrierte Oculus Browser. In diesem Artikel geht es um Letzteres. Auf der Oculus-Website wird der Oculus-Browser so beschrieben:
„Oculus Browser unterstützt die neuesten Webstandards und andere Technologien, mit denen Sie VR-Inhalte im Web erstellen können. Die heutigen 2D-Websites funktionieren im Oculus-Browser hervorragend, da er auf der Chromium-Rendering-Engine basiert. Er ist außerdem für Oculus-Headsets optimiert, um die beste Leistung zu erzielen und Webentwicklern die Möglichkeit zu geben, das volle Potenzial von VR mit neuen APIs wie WebXR zu nutzen. Mit WebXR öffnen wir die Türen zur nächsten Dimension des Webs.“
User-Agent
Der User-Agent-String des Browsers lautet zum Zeitpunkt der Erstellung dieses Artikels wie folgt.
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
Wie Sie sehen, basiert die aktuelle Version 18.1.0.2.46.337441587 des Oculus-Browsers auf Chrome 95.0.4638.74. Das ist nur eine Version hinter der aktuellen stabilen Version von Chrome, die 96.0.4664.110 ist. Wenn der Nutzer in den Modus für Mobilgeräte wechselt, ändert sich VR zu Mobile VR.
Benutzeroberfläche
Die Benutzeroberfläche des Browsers (siehe oben) hat die folgenden Funktionen (obere Zeile von links nach rechts):
- Button „Zurück“
- Schaltfläche "Aktualisieren"
- Websiteinformationen
- URL-Leiste
- Button „Lesezeichen erstellen“
- Schaltfläche zum Ändern der Größe mit den Optionen „Schmal“, „Mittel“ und „Breit“ sowie einer Zoomfunktion
- Schaltfläche „Mobile Website anfordern“
- Menüschaltfläche mit den folgenden Optionen:
- Privaten Modus aktivieren
- Alle Tabs schließen
- Einstellungen
- Lesezeichen
- Downloads
- Verlauf
- Browserdaten löschen
Die untere Zeile enthält die folgenden Funktionen:
- Schaltfläche "Schließen"
- Schaltfläche „Minimieren“
- Dreipunkt-Menü mit den Optionen „Zurück“, „Vorwärts“ und „Aktualisieren“
Aktualisierungsrate und Pixel-Verhältnis des Geräts
Bei der Oculus Quest 2 rendert der Oculus-Browser sowohl 2D-Webseiteninhalte als auch WebXR mit einer Aktualisierungsrate von 90 Hz. Wenn du Medien im Vollbildmodus ansiehst, optimiert der Oculus-Browser die Aktualisierungsrate des Geräts basierend auf der Framerate des Videos, z. B. 24 fps. Die Oculus Quest 2 hat ein Gerätepixelverhältnis von 1,5 für gestochen scharfen Text.
PWAs im Oculus-Browser und im Oculus Store
Am 28. Oktober 2021 gab Jacob Rossi, Produktmanagement Lead bei Meta (Oculus), bekannt, dass PWAs für Oculus Quest und Oculus Quest 2 verfügbar sein werden. Im Folgenden beschreibe ich die PWA-Nutzung auf Oculus und erkläre, wie du deine PWA auf der Oculus Quest 2 erstellen, per Sideload installieren und testen kannst.
Statusfreigabe
Der Anmeldestatus wird zwischen dem Oculus-Browser und PWAs geteilt, sodass Nutzer nahtlos zwischen beiden wechseln können. Natürlich wird Facebook Login standardmäßig unterstützt. Der Oculus-Browser enthält einen Passwortmanager, mit dem Nutzer ihre Passwörter sicher im Browser und in installierten Apps speichern und teilen können.
PWA-Fenstergrößen
Browserfenster und Fenster installierter PWAs können vom Nutzer beliebig in der Größe angepasst werden. Die Höhe kann zwischen 625 Pixel und 1.200 Pixel variieren. Die Breite kann zwischen 400 px und 2.000 px eingestellt werden. Die Standardabmessungen sind 1.000 × 625 Pixel.
Mit PWAs interagieren
PWAs können mit den linken und rechten Oculus-Controllern, Bluetooth-Mäusen und ‑Tastaturen sowie über Handtracking gesteuert werden. Das Scrollen erfolgt über die Thumbsticks auf den Oculus-Controllern oder durch Zusammenziehen von Daumen und Zeigefinger und Bewegen in die gewünschte Richtung. Um etwas auszuwählen, können Nutzer darauf zeigen und die Finger zusammenführen.
Berechtigungen für PWAs
Berechtigungen im Oculus-Browser funktionieren ähnlich wie in Chrome. Der Status wird zwischen im Browser ausgeführten Apps und installierten PWAs geteilt, sodass Nutzer zwischen den beiden Oberflächen wechseln können, ohne dieselben Berechtigungen noch einmal erteilen zu müssen.
Obwohl viele Berechtigungen implementiert sind, werden nicht alle Funktionen unterstützt. Beispielsweise wird die Berechtigung zur Standortbestimmung zwar angefordert, das Gerät erhält jedoch nie einen Standort. Auch die verschiedenen Hardware-APIs wie WebHID, Web Bluetooth usw. bestehen die Funktionserkennung, zeigen aber keine Auswahl an, mit der der Nutzer die Oculus mit einem Hardwaregerät koppeln könnte. Ich nehme an, dass die Erkennbarkeit von APIs verbessert wird, wenn der Browser ausgereifter ist.
Debugging von PWAs über die Chrome-Entwicklertools
Nachdem Sie den Entwicklermodus aktiviert haben, funktioniert das Debugging von PWAs auf der Oculus Quest 2 genau wie unter Android-Geräte per Remote-Debugging debuggen beschrieben.
- Rufen Sie auf dem Oculus-Gerät im Oculus-Browser die gewünschte Website auf.
- Öffnen Sie Google Chrome auf Ihrem Computer und rufen Sie
chrome://inspect/#devicesauf. - Suchen Sie das betreffende Oculus-Gerät. Darunter werden die Oculus-Browser-Tabs angezeigt, die derzeit auf dem Gerät geöffnet sind.
- Klicken Sie auf dem gewünschten Oculus-Browser-Tab auf Untersuchen.
App-Suche
Nutzer können den Browser selbst oder den Oculus Store verwenden, um PWAs zu finden. Wie bei jedem anderen Browser funktionieren installierte PWAs auch im Oculus-Browser als Websites, die in einem Tab ausgeführt werden. Wenn ein Nutzer eine Website besucht, hilft ihm der Oculus-Browser, die App zu finden, sofern sie im Oculus Store verfügbar ist. Nutzer, die die App bereits installiert haben, können im Oculus-Browser ganz einfach zur App wechseln.
Beispielhafte PWAs auf der Oculus Quest 2
PWAs von Meta
Mehrere Meta-Abteilungen haben PWAs für die Oculus Quest 2 erstellt, z. B. Instagram und Facebook. Diese PWAs werden in eigenständigen App-Fenstern ausgeführt, die keine URL-Leiste haben und deren Größe frei angepasst werden kann.
PWAs von anderen Entwicklern
Zum Zeitpunkt der Erstellung dieses Artikels gibt es im Oculus Store eine kleine, aber wachsende Anzahl von PWAs für die Oculus Quest 2. Mit Spike können Nutzer alle wichtigen Arbeitstools wie E-Mail, Chat, Anrufe, Notizen, Aufgaben und To-dos direkt in der Spike App in einem virtuellen Hub nutzen.
Ein weiteres Beispiel ist Smartsheet, ein dynamischer Arbeitsbereich, der Projektmanagement, automatisierte Workflows und die schnelle Erstellung neuer Lösungen ermöglicht.
Weitere PWAs wie Slack, Dropbox oder Canva sind in Planung, wie in einem Video mit Jacob Rossi angedeutet wurde, das im Rahmen der Connect-Konferenz von Facebook im Jahr 2021 veröffentlicht wurde.
PWAs für Oculus erstellen
Meta hat die erforderlichen Schritte in der Dokumentation beschrieben. Im Allgemeinen sollten PWAs, die in Chrome installiert werden können, oft sofort auf Oculus funktionieren.
Anforderungen an Web-App-Manifeste
Es gibt einige wichtige Unterschiede zu den Installationskriterien von Chrome und der Spezifikation für Web-App-Manifeste. Oculus unterstützt derzeit beispielsweise nur Sprachen, die von links nach rechts geschrieben werden, während die Spezifikation für Web-App-Manifeste keine solchen Einschränkungen vorsieht. Ein weiteres Beispiel ist start_url, das in Chrome zwingend erforderlich ist, damit eine App installiert werden kann, auf Oculus jedoch optional ist. Oculus bietet ein Befehlszeilentool, mit dem Entwickler PWAs für die Oculus Quest 2 erstellen können. Damit können sie die fehlenden Parameter im Web-App-Manifest übergeben oder die vorhandenen Parameter überschreiben.
Oculus bietet eine Reihe optionaler proprietärer Web-App-Manifestfelder, mit denen die PWA-Nutzung angepasst werden kann.
PWAs mit der Bubblewrap-Befehlszeile verpacken
Bubblewrap ist ein Open-Source-Set von Bibliotheken und ein Befehlszeilentool (CLI) für Node.js. Bubblewrap wurde vom Google Chrome-Team entwickelt, um Entwickler beim Erstellen und Signieren eines Android-Projekts zu unterstützen, mit dem ihre PWA als vertrauenswürdige Web-Aktivität (TWA) gestartet wird.
Der Meta Quest-Browser unterstützt TWAs derzeit nicht vollständig. Ab Version 1.18.0 unterstützt Bubblewrap jedoch das Verpacken von PWAs für Meta Quest-Geräte.
Es können universelle APK-Dateien generiert werden, die eine TWA auf normalen Android-Geräten und den Meta Quest-Browser auf Meta Quest-Geräten öffnen.
Wenn Sie Node.js installiert haben, können Sie die Bubblewrap-Befehlszeile mit dem folgenden Befehl installieren:
npm i -g @bubblewrap/cli
Wenn Sie Bubblewrap zum ersten Mal ausführen, werden Sie gefragt, ob die erforderlichen externen Abhängigkeiten – Java Development Kit (JDK) und Android SDK Build Tools – automatisch heruntergeladen und installiert werden sollen.
Führen Sie den Befehl init mit dem Flag --metaquest aus und folgen Sie dem Assistenten, um ein Meta Quest-kompatibles Android-Projekt zu generieren, das Ihre PWA umschließt:
bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest
Nachdem das Projekt generiert wurde, erstellen und signieren Sie es mit folgendem Befehl:
bubblewrap build
Dadurch wird eine Datei mit dem Namen app-release-signed.apk ausgegeben. Diese Datei kann auf dem Gerät installiert oder im Meta Quest Store, im Google Play Store oder auf einer anderen Android-App-Bereitstellungsplattform veröffentlicht werden.
PWAs mit Oculus Platform Utility verpacken
Oculus Platform Utility ist das offizielle Befehlszeilentool, das von Meta für die Veröffentlichung von Apps für Oculus Rift- und Meta Quest-Geräte entwickelt wurde.
Außerdem können PWAs für Meta Quest-Geräte mit dem Befehl create-pwa gepackt und im Meta Quest Store und App Lab veröffentlicht werden.
Legen Sie den Namen der Ausgabedatei über den Parameter -o und den Pfad zum Android SDK über den Parameter --android-sdk fest.
Verweise mit dem Parameter --web-manifest-url auf die Live-URL des Web-App-Manifests.
Wenn Sie kein Manifest in Ihrer Live-PWA haben oder das Live-Manifest überschreiben möchten, können Sie trotzdem ein APK für Ihre PWA generieren. Verwenden Sie dazu eine lokale Manifestdatei und den Parameter --manifest-content-file.
Damit das Manifest so einfach wie möglich bleibt, verwenden Sie den Parameter --package-name mit einem Wert in umgekehrter Domainnamen-Notation (z. B. com.company.app.pwa), anstatt das proprietäre Feld ovr_package_name zum Manifest hinzuzufügen.
ovr-platform-util create-pwa -o output.apk --android-sdk ~/bin/android-10 --manifest-content-file manifest.json --package-name com.company.app.pwa
PWAs mit PWABuilder verpacken
Die Verwendung von PWABuilder ist nach Ansicht der Autoren derzeit die einfachste und daher empfohlene Methode, um PWAs für Meta Quest zu verpacken.
PWABuilder ist ein von Microsoft entwickeltes Open-Source-Projekt, mit dem Entwickler ihre PWAs für die Veröffentlichung in verschiedenen Stores, darunter Microsoft Store, Google Play Store, App Store und Meta Quest Store, verpacken und signieren können.
Das Verpacken von PWAs mit PWABuilder ist ganz einfach: Sie müssen nur die URL einer PWA eingeben, die Metadaten für die App eingeben/bearbeiten und auf den Button Generieren klicken.
Mit PWABuilder können Entwickler auswählen, welches Tool sie im Hintergrund zum Verpacken von PWAs für Meta Quest-Geräte verwenden möchten.
Sie können die Option Meta Quest auswählen, um das Oculus Platform Utility zu verwenden.
Sie können die Option Android auswählen, um Bubblewrap zu verwenden, und das Kästchen Meta Quest-kompatibel aktivieren.
PWAs mit ADB installieren
Nachdem Sie die APK-Datei erstellt haben, können Sie sie per Sideloading über ADB per USB oder WLAN auf das Meta Quest-Gerät übertragen:
adb install app-release-signed.apk
Wenn Sie die Bubblewrap-Befehlszeile zum Verpacken von PWAs verwenden, bietet sie einen praktischen Alias-Befehl zum Sideloaden der APK-Datei:
bubblewrap install
Per Sideload installierte Apps werden in der App-Leiste im Bereich Unbekannte Quellen angezeigt.
App-Einreichung
Das Hochladen und Einreichen von PWAs im Oculus Store wird in der Dokumentation des Oculus Developer Center ausführlich beschrieben.
Entwickler können ihre Apps nicht nur im Oculus Store einreichen, sondern auch über Plattformen wie SideQuest direkt an Nutzer vertreiben, ohne dass eine Genehmigung des Stores erforderlich ist. So können sie eine App direkt an Endnutzer weitergeben, auch wenn sie sich noch in einem frühen Entwicklungsstadium befindet, experimentell ist oder sich an eine bestimmte Zielgruppe richtet.
Apps mit mehreren Tabs testen
Zum Testen von Apps mit mehreren Tabs habe ich eine kleine Test-PWA erstellt, die die verschiedenen Linkfunktionen demonstriert: Öffnen eines neuen Tabs in der PWA, Verbleiben auf dem aktuellen Tab, Öffnen eines neuen Browserfensters und Öffnen in einer WebView, während der aktuelle Tab beibehalten wird. Erstellen Sie eine lokal installierbare Kopie dieser App, indem Sie die folgenden Befehle auf Ihrem Computer ausführen.
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
Hier ist ein Screencast der Test-App.
Eine Oculus-Version von SVGcode
Um die Anleitung auszuprobieren, habe ich eine Oculus-Version meiner neuesten PWA, SVGcode, erstellt. Sie können die resultierende APK-Datei
output.apk
aus meinem Google Drive herunterladen. Wenn Sie das Paket genauer untersuchen möchten, habe ich auch eine dekompilierte Version. Die Build-Anleitung finden Sie unter package.json.
Die App funktioniert auf Oculus einwandfrei, einschließlich der Möglichkeit, Dateien zu öffnen und zu speichern. Der Oculus-Browser unterstützt die File System Access API nicht, aber der Fallback-Ansatz hilft. Das Einzige, was nicht funktionierte, war das Zoomen per Fingergeste. Ich dachte, dass ich die Trigger-Taste auf beiden Controllern drücken und die Controller dann in entgegengesetzte Richtungen bewegen muss. Ansonsten war alles andere leistungsstark und reaktionsschnell, wie Sie im eingebetteten Screencast sehen können.
Immersive 3D-WebXR-PWAs
Die PWA-Unterstützung auf Oculus Quest ist nicht auf flache 2D-Apps beschränkt. Entwickler können mit der WebXR API immersive 3D-Inhalte für VR erstellen.
Sie fragen sich, wie verschiedene Aufforderungen (PWA-Installation, Berechtigungsanfragen, Benachrichtigungen) in VR verarbeitet werden, wenn überhaupt?
Hier ist ein Screencast des User-Agent-Prompt-Tests aus den WebXR-Tests der Immersive Web Working Group.
Wie Sie sehen, ist für den Wechsel in den VR-Modus die Erlaubnis des Nutzers erforderlich. Berechtigungen werden einmal pro Ursprung abgefragt. Wenn Berechtigungen angefordert werden, wird der immersive Modus beendet. Benachrichtigungen werden derzeit nicht unterstützt.
Hand tracking
Dank der WebXR Hand Input API und des KI-basierten Handtracking-Systems von Meta können Sie im immersiven Modus mit Ihren Händen mit PWAs interagieren.
Hier ist ein Screencast des Handtracking-Beispiels aus den WebXR-Beispielen der Immersive Web Working Group.
Augmented/Mixed Reality (Passthrough)
Wie auf der Meta Connect 2022 angekündigt, wurde der Meta Quest-Browser um die Unterstützung für WebXR Augmented Reality (AR), auch bekannt als Mixed Reality (MR), auf Meta Quest 2- und Meta Quest Pro-Geräten erweitert.
Sehen wir uns ein leicht modifiziertes A-Frame-Starterbeispiel mit herunterskalierten Modellen und ausgeblendetem Himmel und Flugzeug für Augmented Reality an.
A-Frame ist ein Open-Source-Web-Framework, mit dem sich 3D-/VR-/AR-Erlebnisse vollständig aus deklarativen, wiederverwendbaren benutzerdefinierten HTML-Elementen erstellen lassen, die leicht zu lesen, zu verstehen und zu kopieren sind.
Hier ist ein Screencast dieser Demo auf Meta Quest 2.
Die Meta Quest 2 hat monochrome Kameras, sodass der Passthrough in Graustufen erfolgt, während die Meta Quest Pro Farbkameras hat.
Zusammenfassung
PWAs auf der Oculus Quest 2 machen viel Spaß und sind sehr vielversprechend. Die unendliche virtuelle Leinwand, mit der Nutzer ihren Bildschirm so skalieren können, wie es für die aktuelle Aufgabe am besten ist, hat großes Potenzial, die Art und Weise, wie wir in Zukunft arbeiten, zu verändern. Das Tippen in VR mit Handtracking steckt noch in den Kinderschuhen und funktioniert zumindest für mich noch nicht sehr zuverlässig. Es reicht aber aus, um URLs einzugeben oder kurze Texte zu schreiben.
Was mir an PWAs auf der Oculus Quest 2 am besten gefällt, ist, dass es sich um ganz normale PWAs handelt, die unverändert in einem Browsertab oder über einen dünnen APK-Wrapper ohne plattformspezifische APIs verwendet werden können. Es war noch nie so einfach, mehrere Plattformen mit demselben Code anzusprechen. Auf PWAs in VR und AR im Web! Die Zukunft ist rosig!
Danksagungen
Foto der Oculus Quest 2 von Maximilian Prandstätter auf Flickr. Bilder der Apps Instagram, Facebook, Oculus Browser und Spike im Oculus Store sowie die Abbildung zur Auffindbarkeit von Apps und die Animation zum Handtracking mit freundlicher Genehmigung von Meta. Dieser Beitrag wurde von Joe Medley überprüft.