Oculus Quest 2 ist ein Virtual-Reality-Headset (VR) von Oculus, einer Sparte von Meta. Entwickler können jetzt 2D- und 3D-PWAs (Progressive Web Apps) erstellen und bereitstellen, die die Multitasking-Funktion von Oculus Quest 2 nutzen.
The Oculus Quest 2
Die Oculus Quest 2 ist ein Virtual-Reality-Headset (VR) von Oculus, einer Sparte von Meta. Es ist der Nachfolger des vorherigen Headsets des Unternehmens, 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 Desktop-Computer ausgeführt werden, wenn es über USB oder WLAN verbunden ist. Es verwendet das Qualcomm-System-on-a-Chip Snapdragon XR2 mit 6 GB RAM. Das Display von Quest 2 ist ein einzelnes LCD-Bedienfeld mit schneller Schaltung und einer Auflösung von 1.832 × 1.920 Pixeln pro Auge, das mit einer Bildwiederholrate von bis zu 120 Hz läuft.
Oculus-Browser
Derzeit sind drei Browser für Oculus Quest 2 verfügbar: Wolvic, der 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 vorgestellt:
„Oculus Browser unterstützt die neuesten Webstandards und andere Technologien, mit denen Sie VR-Inhalte im Web erstellen können. Heutige 2D-Websites funktionieren im Oculus Browser hervorragend, da er auf der Chromium-Rendering-Engine basiert. Es ist außerdem für Oculus-Headsets optimiert, um die beste Leistung zu erzielen und Webentwicklern zu ermöglichen, das volle Potenzial von VR mit neuen APIs wie WebXR zu nutzen. Mit WebXR öffnen wir die Türen zu der nächsten Grenze des Webs.“
User-Agent
Zum Zeitpunkt der Erstellung dieses Dokuments sieht der User-Agent-String des Browsers so aus:
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, also 96.0.4664.110. Wenn der Nutzer in den Modus für Mobilgeräte wechselt, ändert sich VR zu Mobile VR.
Benutzeroberfläche
Die Benutzeroberfläche des Browsers (oben) bietet die folgenden Funktionen (obere Zeile von links nach rechts):
- Schaltfläche „Zurück“
- Schaltfläche "Aktualisieren"
- Websiteinformationen
- URL-Leiste
- Schaltfläche „Lesezeichen erstellen“
- Schaltfläche zum Anpassen der Größe mit den Optionen schmal, mittel und breit sowie eine 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-Schaltfläche mit den Optionen „Zurück“, „Vor“ und „Aktualisieren“
Aktualisierungsrate und Pixelverhältnis des Geräts
Auf Oculus Quest 2 rendert der Oculus-Browser sowohl 2D-Webseiteninhalte als auch WebXR mit einer Aktualisierungsrate von 90 Hz. Bei der Wiedergabe von Medien im Vollbildmodus optimiert Oculus Browser die Aktualisierungsrate des Geräts basierend auf der Framerate des Videos, z. B. 24 fps. 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 teilte Jacob Rossi, Product Management Lead bei Meta (Oculus), mit, dass PWAs auf Oculus Quest und Oculus Quest 2 verfügbar sein werden. Im Folgenden beschreibe ich die Nutzung von PWAs auf Oculus und erkläre, wie Sie Ihre PWA auf Oculus Quest 2 erstellen, per Sideload installieren und testen.
Statusfreigabe
Der Anmeldestatus wird zwischen dem Oculus-Browser und PWAs geteilt, sodass Nutzer nahtlos zwischen den beiden wechseln können. Facebook Log-in wird natürlich standardmäßig unterstützt. Der Oculus-Browser enthält einen Passwortmanager, mit dem Nutzer ihre Passwörter sicher zwischen dem Browser und den installierten Apps speichern und freigeben können.
Fenstergrößen für PWAs
Die Größe der Browserfenster und -fenster von installierten PWAs kann vom Nutzer frei angepasst werden. Die Höhe kann zwischen 625 Pixeln und 1.200 Pixeln variieren. Die Breite kann zwischen 400 px und 2.000 px liegen. Die Standardabmessungen sind 1.000 × 625 Pixel.
Mit PWAs interagieren
PWAs können über den linken und rechten Oculus-Controller, Bluetooth-Mäuse und -Tastaturen sowie über Hand-Tracking gesteuert werden. Das Scrollen funktioniert über die Sticks auf den Oculus-Controllern oder durch Zusammenführen von Daumen und Zeigefinger und Bewegen in die gewünschte Richtung. Um etwas auszuwählen, kann der Nutzer den Finger bewegen und zusammenziehen.
Berechtigungen für PWAs
Berechtigungen im Oculus-Browser funktionieren im Grunde genauso wie in Chrome. Der Status wird zwischen Apps, die im Browser ausgeführt werden, und installierten PWAs geteilt. So können Nutzer zwischen den beiden Umgebungen wechseln, ohne dieselben Berechtigungen noch einmal gewähren zu müssen.
Viele Berechtigungen sind zwar implementiert, aber nicht alle Funktionen werden unterstützt. Während beispielsweise die Berechtigung zur Standortbestimmung erfolgreich angefordert wird, erhält das Gerät keinen Standort. Ähnlich verhält es sich mit den verschiedenen Hardware-APIs wie WebHID und Web Bluetooth. Sie bestehen zwar die Funktionsprüfung, zeigen aber keine Auswahl an, mit der Nutzer Oculus mit einem Hardwaregerät koppeln können. Ich nehme an, dass die Erkennung von APIs von APIs verfeinert wird, sobald der Browser ausgereift ist.
PWAs über Chrome-Entwicklertools debuggen
Nachdem Sie den Entwicklermodus aktiviert haben, funktioniert das Debuggen von PWAs auf Oculus Quest 2 genau wie unter Android-Geräte per Fernzugriff debuggen beschrieben.
- Rufen Sie auf dem Oculus-Gerät die gewünschte Website im Oculus-Browser auf.
- Öffne Google Chrome auf deinem Computer und rufe
chrome://inspect/#devicesauf. - Suche nach dem betreffenden Oculus-Gerät. Daran schließen sich die Tabs des Oculus-Browsers an, die derzeit auf dem Gerät geöffnet sind.
- Klicken Sie auf dem gewünschten Oculus-Browsertab auf Prüfen.
Auffindbarkeit von Apps
Nutzer können PWAs über den Browser selbst oder den Oculus Store 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, wenn und nur wenn sie im Oculus Store verfügbar ist. Nutzer, die die App bereits installiert haben, können über den Oculus-Browser ganz einfach zur App wechseln.
Beispielhafte PWAs auf Oculus Quest 2
PWAs nach Meta
Mehrere Meta-Abteilungen haben PWAs für 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 anderer Entwickler
Zum Zeitpunkt der Erstellung dieses Artikels gibt es im Oculus Store eine kleine, aber wachsende Anzahl von PWAs für Oculus Quest 2. Mit Spike können Nutzer alle wesentlichen Arbeitstools wie E-Mails, Chats, Anrufe, Notizen, Aufgaben und To-do-Listen aus ihrem Posteingang in einem virtuellen Umgebungs-Hub direkt in der Spike-App aufrufen.
Ein weiteres Beispiel ist Smartsheet, ein dynamischer Arbeitsbereich, der Projektmanagement, automatisierte Workflows und die schnelle Entwicklung neuer Lösungen bietet.
Weitere PWAs wie Slack, Dropbox oder Canva sind in Planung, wie in einem Video mit Jacob Rossi angedeutet, das im Rahmen der Connect-Konferenz von Facebook 2021 veröffentlicht wurde.
PWAs für Oculus erstellen
Die erforderlichen Schritte sind in der Meta-Dokumentation beschrieben. Im Allgemeinen sollten PWAs, die in Chrome installiert werden können, auf Oculus ohne weitere Maßnahmen funktionieren.
Anforderungen an das Manifest der Web-App
Es gibt einige wichtige Unterschiede zu den Installationskriterien von Chrome und der Web App Manifest-Spezifikation. Beispielsweise unterstützt Oculus derzeit nur Sprachen, die von links nach rechts geschrieben werden, während die Web App Manifest-Spezifikation keine solchen Einschränkungen erzwingt. Ein weiteres Beispiel ist start_url, das in Chrome für die Installation einer App unbedingt erforderlich ist, auf Oculus jedoch optional ist. Oculus bietet ein Befehlszeilentool, mit dem Entwickler PWAs für Oculus Quest 2 erstellen können. Damit können sie die fehlenden Parameter im Web-App-Manifest übergeben oder die vorhandenen überschreiben.
Oculus bietet eine Reihe optionaler proprietärer Web-App-Manifest-Felder, mit denen sich die PWA anpassen lässt.
PWAs mit der Bubblewrap-Befehlszeile verpacken
Bubblewrap ist eine Open-Source-Bibliothek und ein Befehlszeilentool (CLI) für Node.js. Bubblewrap wird vom Google Chrome-Team entwickelt, um Entwicklern dabei zu helfen, ein Android-Projekt zu generieren, zu erstellen und zu signieren, mit dem Ihre PWA als vertrauenswürdige Webaktivität (Trusted Web Activity, TWA) gestartet wird.
Der Meta Quest-Browser unterstützt TWA derzeit nicht vollständig. Ab Version 1.18.0 unterstützt Bubblewrap jedoch das Verpacken von PWAs für Meta Quest-Geräte.
Es kann universelle APK-Dateien generieren, die eine TWA auf regulären Android-Geräten und den Meta Quest-Browser auf Meta Quest-Geräten öffnen.
Angenommen, Sie haben Node.js installiert, kann die Bubblewrap-Befehlszeile mit dem folgenden Befehl installiert werden:
npm i -g @bubblewrap/cli
Wenn Sie Bubblewrap zum ersten Mal ausführen, werden Sie aufgefordert, die erforderlichen externen Abhängigkeiten – das Java Development Kit (JDK) und die Android SDK Build Tools – automatisch herunterzuladen und zu installieren.
Wenn Sie ein Meta Quest-kompatibles Android-Projekt generieren möchten, das Ihre PWA umschließt, führen Sie den Befehl init mit dem Flag --metaquest aus und folgen Sie dem Assistenten:
bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest
Nachdem das Projekt generiert wurde, bauen 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-Plattform veröffentlicht werden.
PWAs mit dem Oculus Platform Utility verpacken
Oculus Platform Utility ist das offizielle Befehlszeilentool, das von Meta für das Veröffentlichen von Apps für Oculus Rift- und Meta Quest-Geräte entwickelt wurde.
Außerdem können Sie damit PWAs für Meta Quest-Geräte mit dem Befehl create-pwa verpacken und im Meta Quest Store und im App Lab veröffentlichen.
Legen Sie den Namen der Ausgabedatei über den Parameter -o und den Pfad zum Android SDK über den Parameter --android-sdk fest.
Verweisen Sie das Tool mithilfe des Parameters --web-manifest-url auf die Live-URL des Web-App-Manifests.
Wenn in deiner Live-PWA kein Manifest vorhanden ist oder du das Live-Manifest überschreiben möchtest, kannst du mithilfe einer lokalen Manifestdatei und dem Parameter --manifest-content-file ein APK für deine PWA generieren.
Verwenden Sie den Parameter --package-name mit einem Wert in umgekehrter Domainnamenschreibweise (z. B. com.company.app.pwa), um das Manifest so prägnant wie möglich zu halten, anstatt dem Manifest das proprietäre Feld ovr_package_name 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 aus Sicht der Autoren derzeit die einfachste und daher empfohlene Methode, PWAs für Meta Quest zu verpacken.
PWABuilder ist ein Open-Source-Projekt von Microsoft, mit dem Entwickler ihre PWAs verpacken und signieren können, um sie in verschiedenen Shops zu veröffentlichen, darunter der Microsoft Store, der Google Play Store, der App Store und der Meta Quest Store.
Das Paketieren von PWAs mit PWABuilder ist ganz einfach: Geben Sie dazu die URL einer PWA ein, geben Sie die Metadaten für die App ein oder bearbeiten Sie sie und klicken Sie auf die Schaltfläche Generieren.
Mit PWABuilder können Entwickler auswählen, welches Tool sie zum Verpacken von PWAs für Meta Quest-Geräte verwenden möchten.
Du kannst die Option Meta Quest auswählen, um das Oculus-Plattform-Dienstprogramm zu verwenden.
Sie können die Option Android auswählen, um Bubblewrap zu verwenden, und das Kästchen Mit Meta Quest kompatibel anklicken.
PWAs mit ADB installieren
Nachdem Sie die APK-Datei erstellt haben, können Sie sie ü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 Aliasbefehl zum Sideloaden der APK-Datei:
bubblewrap install
Sideloaded Apps werden im App-Drawer im Bereich Unbekannte Quellen angezeigt.
App-Einreichung
Das Hochladen und Einreichen von PWAs im Oculus Store wird in den Oculus Developer Center-Dokumenten ausführlich behandelt.
Neben der Einreichung von Apps im Oculus Store können Entwickler ihre Apps auch über Plattformen wie SideQuest direkt und sicher an Verbraucher vertreiben, ohne dass eine Store-Genehmigung erforderlich ist. Auf diese Weise können sie Endnutzern eine App direkt zur Verfügung stellen, auch wenn sie sich in einer frühen Entwicklungsphase befindet, experimentell ist oder auf eine bestimmte Zielgruppe ausgerichtet ist.
Apps mit mehreren Tabs testen
Um Multi-Tab-Apps zu testen, habe ich eine kleine Test-PWA erstellt, die die verschiedenen Linkfunktionen demonstriert: Öffnen eines neuen In-PWA-Tabs, Bleib auf dem aktuellen Tab, Öffnen eines neuen Browserfensters und Öffnen in einem WebView, der auf dem aktuellen Tab bleibt. 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 des SVG-Codes
Um die Anleitung zu testen, habe ich eine Oculus-Version meiner neuesten PWA SVGcode erstellt. Sie können die resultierende APK-Datei aus meinem Google Drive-Konto herunterladen
output.apk. Wenn Sie das Paket genauer untersuchen möchten, habe ich auch eine dekompilierte Version. Eine Anleitung zum Erstellen finden Sie in package.json.
Die Nutzung der App auf Oculus funktioniert 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 funktioniert hat, war das Zoomen per Finger-Zoomen. Ich hatte erwartet, dass es funktioniert, wenn ich die Abzugtaste auf beiden Controllern drücke und die Controller dann in entgegengesetzte Richtungen bewege. Abgesehen davon war alles 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. Mit der WebXR API können Entwickler immersive 3D-Inhalte für VR erstellen.
Sie möchten wissen, wie verschiedene Aufforderungen (PWA-Installation, Berechtigungsanfragen, Benachrichtigungen) in der virtuellen Realität verarbeitet werden, falls überhaupt?
Hier ist ein Screencast des Tests für User-Agent-Aufforderungen aus den WebXR-Tests der Immersive Web Working Group.
Wie Sie sehen, ist für den Eintritt in den VR-Modus die Erlaubnis des Nutzers erforderlich. Berechtigungen werden einmal pro Ursprung angefragt. Wenn Berechtigungen angefordert werden, wird der immersive Modus verlassen. Benachrichtigungen werden derzeit nicht unterstützt.
Hand-Tracking
Dank der WebXR Hand Input API und dem KI-basierten Hand-Tracking-System von Meta können Sie im immersiven Modus mit PWAs interagieren.
Hier ist ein Screencast des Beispiels für die Handerkennung aus den WebXR-Beispielen der Immersive Web Working Group.
Augmented Reality/Mixed Reality (Passthrough)
Wie auf der Meta Connect 2022 angekündigt, wurde der Meta Quest-Browser um Unterstützung für WebXR Augmented Reality (AR), auch als Mixed Reality (MR) bezeichnet, auf Meta Quest 2 und Meta Quest Pro erweitert.
Sehen wir uns ein leicht modifiziertes A-Frame-Beispiel mit verkleinerten Modellen und ausgeblendetem Himmel und Flugzeug für Augmented Reality an.
A-Frame ist ein Open-Source-Web-Framework zum Erstellen von 3D-/VR-/AR-Inhalten, das vollständig aus deklarativen, wiederverwendbaren benutzerdefinierten HTML-Elementen besteht, die leicht zu lesen, zu verstehen und per Kopieren und Einfügen zu verwenden sind.
Hier ist ein Screencast dieser Demo auf Meta Quest 2.
Meta Quest 2 hat Schwarz-Weiß-Kameras, sodass die Live-Bilder in Graustufen angezeigt werden. Meta Quest Pro hat dagegen Farbkameras.
Schlussfolgerungen
PWAs auf Oculus Quest 2 sind sehr vielversprechend und machen Spaß. Die endlose virtuelle Leinwand, mit der Nutzer ihren Bildschirm so skalieren können, dass er am besten zur aktuellen Aufgabe passt, hat großes Potenzial, unsere Arbeitsweise in Zukunft zu verändern. Das Tippen in der VR mit dem Hand-Tracking steckt noch in den Kinderschuhen und funktioniert zumindest bei mir noch nicht sehr zuverlässig. Für die Eingabe von URLs oder kurzen Texten ist es aber gut genug.
Das Beste an PWAs auf Oculus Quest 2 ist, dass es sich dabei um normale PWAs handelt, die unverändert in einem Browsertab oder über einen Thin-APK-Wrapper ohne platformspezifische APIs verwendet werden können. Die Ausrichtung auf mehrere Plattformen mit demselben Code war noch nie so einfach. Auf PWAs in VR und AR im Web! Die Zukunft ist rosig!
Danksagungen
Oculus Quest 2, Foto von Maximilian Prandstätter auf Flickr. Oculus Store-Bilder der Apps Instagram, Facebook, Oculus Browser und Spike sowie eine Abbildung zur Auffindbarkeit von Apps und eine Animation für die Handerkennung mit freundlicher Genehmigung von Meta. Hero-Image von Arnau Marín i Puig. Dieser Beitrag wurde von Joe Medley überprüft.