L'Oculus Quest 2 est un casque de réalité virtuelle (RV) créé par Oculus, une division de Meta. Les développeurs peuvent désormais créer et distribuer des Progressive Web Apps (PWA) en 2D et en 3D qui tirent parti de la fonctionnalité multitâche d'Oculus Quest 2.
Oculus Quest 2
L'Oculus Quest 2 est un casque de réalité virtuelle (RV) créé par Oculus, une division de Meta. Il succède au précédent casque de l'entreprise, l'Oculus Quest. L'appareil peut fonctionner à la fois comme un casque autonome avec un système d'exploitation interne basé sur Android, et avec un logiciel de réalité virtuelle compatible avec Oculus exécuté sur un ordinateur de bureau lorsqu'il est connecté via USB ou Wi-Fi. Il utilise le système sur puce Qualcomm Snapdragon XR2 avec 6 Go de RAM. L'écran du Quest 2 est un écran LCD à commutation rapide unique avec une résolution de 1 832 x 1 920 pixels par œil et une fréquence d'actualisation pouvant atteindre 120 Hz.
Navigateur Oculus
Trois navigateurs sont actuellement disponibles pour l'Oculus Quest 2 : Wolvic, qui succède à Firefox Reality, et le navigateur Oculus intégré. Cet article porte sur la deuxième option. Le site Web Oculus présente le navigateur Oculus comme suit.
"Le navigateur Oculus est compatible avec les dernières normes Web et d'autres technologies pour vous aider à créer des expériences de réalité virtuelle sur le Web. Les sites Web 2D actuels fonctionnent parfaitement dans le navigateur Oculus, car il est optimisé par le moteur de rendu Chromium. Il est également optimisé pour les casques Oculus afin d'offrir les meilleures performances et de permettre aux développeurs Web de profiter pleinement du potentiel de la VR grâce à de nouvelles API, comme WebXR. Grâce à WebXR, nous ouvrons les portes de la prochaine frontière du Web."
User-agent
La chaîne d'user-agent du navigateur au moment de la rédaction est la suivante.
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
Comme vous pouvez le voir, la version actuelle 18.1.0.2.46.337441587 du navigateur Oculus est basée sur Chrome 95.0.4638.74, qui n'a qu'une version de retard sur la version stable actuelle de Chrome, qui est 96.0.4664.110. Si l'utilisateur passe en mode mobile, VR devient Mobile VR.
Interface utilisateur
L'interface utilisateur du navigateur (illustrée ci-dessus) comporte les fonctionnalités suivantes (de gauche à droite, sur la première ligne) :
- Bouton Retour
- Bouton "Actualiser"
- Informations sur le site
- Barre d'URL
- Bouton "Créer un signet"
- Bouton de redimensionnement avec les options "Étroit", "Moyen" et "Large", ainsi qu'une fonctionnalité de zoom
- Bouton "Demander le site Web mobile"
- Bouton de menu avec les options suivantes :
- Passer en mode privé
- Fermer tous les onglets
- Paramètres
- Bookmarks
- Téléchargements
- Historique
- Effacer les données de navigation
La ligne inférieure inclut les fonctionnalités suivantes :
- Bouton "Fermer"
- Bouton Réduire
- Bouton à trois points avec les options "Retour", "Suivant" et "Actualiser"
Fréquence d'actualisation et rapport de pixels de l'appareil
Pour l'Oculus Quest 2, le navigateur Oculus affiche le contenu des pages Web 2D et WebXR à une fréquence d'actualisation de 90 Hz. Lorsque vous regardez un contenu multimédia en plein écran, le navigateur Oculus optimise la fréquence d'actualisation de l'appareil en fonction de la fréquence d'images de la vidéo (24 fps, par exemple). L'Oculus Quest 2 a un ratio de pixels de l'appareil de 1,5 pour un texte net.
PWA dans le navigateur Oculus et l'Oculus Store
Le 28 octobre 2021, Jacob Rossi, responsable de la gestion des produits chez Meta (Oculus), a annoncé que les PWA allaient être disponibles sur Oculus Quest et Oculus Quest 2. Dans la suite de cet article, je décris l'expérience PWA sur Oculus et explique comment compiler, transférer et tester votre PWA sur l'Oculus Quest 2.
Partage de l'état
L'état de connexion est partagé entre le navigateur Oculus et les PWA, ce qui permet aux utilisateurs de passer facilement de l'un à l'autre. Naturellement, Facebook Login est compatible dès le départ. Le navigateur Oculus inclut un gestionnaire de mots de passe qui permet aux utilisateurs de stocker et de partager leurs mots de passe de manière sécurisée entre le navigateur et les applications installées.
Tailles de fenêtre des PWA
Les utilisateurs peuvent redimensionner librement les fenêtres de navigateur et celles des PWA installées. La hauteur peut varier entre 625 px et 1 200 px. La largeur peut être comprise entre 400 et 2 000 pixels. Les dimensions par défaut sont de 1 000 x 625 pixels.
Interagir avec les PWA
Les PWA peuvent être contrôlées avec les manettes gauche et droite Oculus, les claviers et souris Bluetooth, et grâce au suivi des mains. Pour faire défiler l'écran, utilisez les joysticks des manettes Oculus ou pincez le pouce et l'index, puis déplacez-les dans la direction souhaitée. Pour sélectionner un élément, l'utilisateur peut le pointer et pincer l'écran.
Autorisations pour les PWA
Les autorisations dans le navigateur Oculus fonctionnent à peu près de la même manière que dans Chrome. L'état est partagé entre les applications exécutées dans le navigateur et les PWA installées. Les utilisateurs peuvent donc passer d'une expérience à l'autre sans avoir à accorder à nouveau les mêmes autorisations.
Bien que de nombreuses autorisations soient implémentées, toutes les fonctionnalités ne sont pas prises en charge. Par exemple, si la demande d'autorisation de géolocalisation aboutit, l'appareil n'obtient jamais de position. De même, les différentes API matérielles telles que WebHID, Web Bluetooth, etc. passent toutes la détection de fonctionnalités, mais n'affichent pas réellement de sélecteur permettant à l'utilisateur d'associer l'Oculus à un appareil matériel. Je suppose que la détectabilité des fonctionnalités des API sera affinée une fois que le navigateur aura atteint sa maturité.
Déboguer les PWA avec les outils pour les développeurs Chrome
Après avoir activé le mode développeur, le débogage des PWA sur Oculus Quest 2 fonctionne exactement comme décrit dans Déboguer à distance des appareils Android.
- Sur l'appareil Oculus, accédez au site souhaité dans le navigateur Oculus.
- Lancez Google Chrome sur votre ordinateur et accédez à
chrome://inspect/#devices. - Recherchez l'appareil Oculus en question, suivi d'un ensemble d'onglets du navigateur Oculus actuellement ouverts sur l'appareil.
- Cliquez sur Inspecter dans l'onglet Oculus Browser souhaité.
Découverte des applications
Les utilisateurs peuvent utiliser le navigateur lui-même ou l'Oculus Store pour découvrir les PWA. Comme pour tout autre navigateur, les PWA installées fonctionnent également dans le navigateur Oculus en tant que sites Web exécutés dans un onglet. Lorsqu'un utilisateur consulte un site, le navigateur Oculus l'aide à découvrir l'application si (et seulement si) elle est disponible dans l'Oculus Store. Pour les utilisateurs qui ont déjà installé l'application, le navigateur Oculus les aidera à passer facilement à l'application s'ils le souhaitent.
Exemples de PWA sur l'Oculus Quest 2
PWA de Meta
Plusieurs divisions de Meta ont créé des PWA pour l'Oculus Quest 2, par exemple Instagram et Facebook. Ces PWA s'exécutent dans des fenêtres d'application autonomes sans barre d'URL et qui peuvent être redimensionnées librement.
PWA d'autres développeurs
Au moment de la rédaction de cet article, le nombre d'applications Web progressives pour Oculus Quest 2 sur l'Oculus Store est faible, mais en augmentation. Spike permet aux utilisateurs de découvrir tous les outils de travail essentiels tels que les e-mails, le chat, les appels, les notes, les tâches et les tâches à faire depuis leur boîte de réception dans un hub d'environnement virtuel directement dans l'application Spike.
Smartsheet est un autre exemple. Il s'agit d'un espace de travail dynamique qui permet de gérer des projets, d'automatiser des workflows et de créer rapidement de nouvelles solutions.
D'autres PWA comme Slack, Dropbox ou Canva sont à venir, comme l'a annoncé Jacob Rossi dans une vidéo diffusée lors de la conférence Connect de Facebook en 2021.
Créer des PWA pour Oculus
Meta a décrit les étapes requises dans sa documentation. En général, les PWA installables dans Chrome devraient souvent fonctionner immédiatement sur Oculus.
Exigences concernant le fichier manifeste de l'application Web
Il existe des différences importantes par rapport aux critères d'installabilité de Chrome et à la spécification du fichier manifeste de l'application Web. Par exemple, Oculus ne prend en charge que les langues de gauche à droite pour le moment, alors que la spécification du fichier manifeste de l'application Web n'impose pas de telles contraintes. Un autre exemple est start_url, qui est strictement requis par Chrome pour qu'une application puisse être installée, mais qui est facultatif sur Oculus. Oculus propose un outil de ligne de commande qui permet aux développeurs de créer des PWA pour l'Oculus Quest 2. Ils peuvent ainsi transmettre les paramètres manquants (ou remplacer ceux existants) dans le fichier manifeste de l'application Web.
Oculus propose un certain nombre de champs de fichier manifeste d'application Web propriétaires facultatifs qui peuvent être utilisés pour personnaliser l'expérience PWA.
Empaqueter des PWA avec la CLI Bubblewrap
Bubblewrap est un ensemble Open Source de bibliothèques et un outil de ligne de commande (CLI) pour Node.js. Bubblewrap est développé par l'équipe Google Chrome pour aider les développeurs à générer, compiler et signer un projet Android qui lance votre PWA en tant qu'activité Web fiable (TWA).
Le navigateur Meta Quest n'est actuellement pas entièrement compatible avec les TWA, mais à partir de la version 1.18.0, Bubblewrap permet de créer des PWA pour les appareils Meta Quest.
Il peut générer des fichiers APK universels qui ouvrent une TWA sur les appareils Android classiques et le navigateur Meta Quest sur les appareils Meta Quest.
En supposant que Node.js soit installé, vous pouvez installer Bubblewrap CLI avec la commande suivante :
npm i -g @bubblewrap/cli
Lorsque vous exécutez Bubblewrap pour la première fois, il vous propose de télécharger et d'installer automatiquement les dépendances externes requises : le kit de développement Java (JDK) et les outils de compilation Android SDK.
Pour générer un projet Android compatible avec Meta Quest qui encapsule votre PWA, exécutez la commande init avec l'indicateur --metaquest et suivez l'assistant :
bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest
Une fois le projet généré, compilez-le et signez-le en exécutant la commande suivante :
bubblewrap build
Un fichier nommé app-release-signed.apk sera généré. Ce fichier peut être installé sur l'appareil ou publié sur le Meta Quest Store, le Google Play Store ou toute autre plate-forme de distribution d'applications Android.
Empaqueter des PWA avec l'utilitaire de la plate-forme Oculus
Oculus Platform Utility est l'outil de ligne de commande officiel développé par Meta pour publier des applications pour les appareils Oculus Rift et Meta Quest.
Il permet également d'empaqueter des PWA pour les appareils Meta Quest avec la commande create-pwa et de les publier sur le Meta Quest Store et App Lab.
Définissez le nom du fichier de sortie à l'aide du paramètre -o et le chemin d'accès au SDK Android à l'aide du paramètre --android-sdk.
Pointez l'outil vers l'URL en direct du fichier manifeste de l'application Web à l'aide du paramètre --web-manifest-url.
Si vous n'avez pas de fichier manifeste sur votre PWA en ligne ou si vous souhaitez remplacer le fichier manifeste en ligne, vous pouvez toujours générer un APK pour votre PWA à l'aide d'un fichier manifeste local et du paramètre --manifest-content-file.
Pour que le fichier manifeste reste aussi pur que possible, utilisez le paramètre --package-name avec une valeur en notation de nom de domaine inversé (par exemple, com.company.app.pwa), plutôt que d'ajouter le champ propriétaire ovr_package_name au fichier manifeste.
ovr-platform-util create-pwa -o output.apk --android-sdk ~/bin/android-10 --manifest-content-file manifest.json --package-name com.company.app.pwa
Empaqueter des PWA avec PWABuilder
Selon les auteurs, l'utilisation de PWABuilder est le moyen le plus simple et donc recommandé d'empaqueter les PWA pour Meta Quest à l'heure actuelle.
PWABuilder est un projet Open Source développé par Microsoft. Il permet aux développeurs d'empaqueter et de signer leurs PWA pour les publier sur différents stores, y compris le Microsoft Store, le Google Play Store, l'App Store et le Meta Quest Store.
Pour empaqueter des PWA avec PWABuilder, il vous suffit de saisir l'URL d'une PWA, de saisir/modifier les métadonnées de l'application, puis de cliquer sur le bouton Generate (Générer).
PWABuilder permet aux développeurs de choisir l'outil à utiliser en arrière-plan pour empaqueter les PWA pour les appareils Meta Quest.
Vous pouvez choisir l'option Meta Quest pour utiliser l'utilitaire de la plate-forme Oculus.
Vous pouvez choisir l'option Android pour utiliser Bubblewrap et cocher la case Compatible avec Meta Quest.
Installer des PWA avec ADB
Après avoir créé le fichier APK, vous pouvez l'installer sur l'appareil Meta Quest à l'aide d'ADB via USB ou Wi-Fi :
adb install app-release-signed.apk
Si vous utilisez la CLI Bubblewrap pour empaqueter les PWA, elle fournit une commande d'alias pratique pour installer le fichier APK en mode sideload :
bubblewrap install
Les applications transférées par chargement latéral apparaissent dans la section Sources inconnues du tiroir d'applications.
Envoi d'une application
L'importation et l'envoi de PWA sur l'Oculus Store sont traités en détail dans la documentation du centre de développement Oculus.
En plus de soumettre des applications à l'Oculus Store, les développeurs peuvent également distribuer leurs applications via des plates-formes telles que SideQuest directement aux consommateurs de manière sûre et sécurisée, sans avoir besoin de l'approbation du magasin. Cela leur permet de proposer une application directement aux utilisateurs finaux, même si elle est encore en phase de développement, expérimentale ou destinée à une audience unique.
Tester les applications à onglets multiples
Pour tester les applications à onglets multiples, j'ai créé une petite PWA de test qui illustre les différentes fonctionnalités de lien : à savoir, ouvrir un nouvel onglet dans la PWA, rester sur l'onglet actuel, ouvrir une nouvelle fenêtre de navigateur et ouvrir dans une WebView en restant sur l'onglet actuel. Créez une copie installable en local de cette application en exécutant les commandes ci-dessous sur votre machine.
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
Voici une screencast de l'application de test.
Version Oculus de SVGcode
Pour tester les instructions, j'ai créé une version Oculus de ma PWA la plus récente, SVGcode. Vous pouvez télécharger le fichier APK obtenu output.apk depuis mon Google Drive. Si vous souhaitez examiner le package plus en détail, je dispose également d'une version décompilée. Consultez les instructions de compilation dans package.json.
L'application fonctionne correctement sur Oculus, y compris la possibilité d'ouvrir et d'enregistrer des fichiers. Le navigateur Oculus n'est pas compatible avec l'API File System Access, mais l'approche de secours est utile. La seule chose qui ne fonctionnait pas était le zoom par pincement. Je m'attendais à ce que cela fonctionne en appuyant sur le bouton de déclenchement des deux manettes, puis en les déplaçant dans des directions opposées. À part cela, tout le reste était performant et réactif, comme vous pouvez le voir dans la vidéo intégrée.
PWA WebXR 3D immersives
La compatibilité des PWA sur Oculus Quest ne se limite pas aux applications 2D plates. Les développeurs peuvent créer des expériences 3D immersives pour la RV à l'aide de l'API WebXR.
Vous vous demandez comment différentes invites (installation de PWA, demandes d'autorisation, notifications) sont gérées dans la VR, le cas échéant ?
Voici une vidéo de l'outil de test des requêtes d'agent utilisateur des tests WebXR du groupe de travail Immersive Web.
Comme vous pouvez le voir, l'utilisateur doit autoriser l'entrée en mode VR. Les autorisations sont demandées une seule fois par origine. La demande d'autorisations quitte le mode immersif. Les notifications ne sont pas prises en charge pour le moment.
Suivi des mains
Vous pouvez interagir avec les PWA en mode immersif à l'aide de vos mains grâce à l'API WebXR Hand Input et au système de suivi des mains basé sur l'IA de Meta.
Voici une vidéo de démonstration de l'exemple de suivi des mains tiré des exemples WebXR du groupe de travail Immersive Web.
Réalité augmentée/mixte (passthrough)
Comme annoncé lors de Meta Connect 2022, le navigateur Meta Quest est désormais compatible avec la réalité augmentée (RA) WebXR, également appelée réalité mixte (RM), sur les appareils Meta Quest 2 et Meta Quest Pro.
Examinons un exemple de démarrage A-Frame légèrement modifié avec des modèles réduits et un ciel et un avion masqués pour la réalité augmentée.
A-Frame est un framework Web Open Source permettant de créer des expériences 3D/VR/AR entièrement à partir d'éléments HTML personnalisés déclaratifs et réutilisables, faciles à lire, à comprendre et à copier-coller.
Voici une vidéo de démonstration sur Meta Quest 2.
Le Meta Quest 2 est équipé de caméras monochromes, ce qui explique que la vidéo en mode Passthrough soit en niveaux de gris. Le Meta Quest Pro, quant à lui, est équipé de caméras couleur.
Conclusions
Les PWA sur Oculus Quest 2 sont très amusantes et prometteuses. Le canevas virtuel infini qui permet aux utilisateurs d'adapter la taille de leur écran à la tâche en cours a le potentiel de changer notre façon de travailler à l'avenir. La saisie en VR avec le suivi des mains en est encore à ses débuts et, du moins pour moi, ne fonctionne pas encore de manière très fiable. Toutefois, elle est suffisamment efficace pour saisir des URL ou taper de courts textes.
Ce que j'aime le plus dans les PWA sur l'Oculus Quest 2, c'est qu'il s'agit de PWA classiques qui peuvent être utilisées telles quelles dans un onglet de navigateur ou via un wrapper APK fin sans aucune API spécifique à la plate-forme. Il n'a jamais été aussi simple de cibler plusieurs plates-formes avec le même code. Bienvenue aux PWA dans la VR et la RA sur le Web. L'avenir s'annonce radieux !
Remerciements
Photo d'Oculus Quest 2 par Maximilian Prandstätter sur Flickr. Images de l'Oculus Store pour les applications Instagram, Facebook, Oculus Browser et Spike, ainsi que l'illustration de la découverte d'applications et l'animation du suivi des mains fournies par Meta. Image principale d'Arnau Marín i Puig. Ce post a été examiné par Joe Medley.