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) 2D et 3D qui exploitent 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 casque précédent de l'entreprise, l'Oculus Quest. L'appareil peut fonctionner à la fois en tant que 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 une puce Snapdragon XR2 Qualcomm 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, qui fonctionne à une fréquence d'actualisation maximale de 120 Hz.
Navigateur Oculus
Trois navigateurs sont actuellement disponibles pour l'Oculus Quest 2 : Wolvic, successeur de Firefox Reality, et le navigateur Oculus intégré. Cet article se concentre 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 RV sur le Web. Les sites Web 2D d'aujourd'hui 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'obtenir les meilleures performances et de permettre aux développeurs Web de profiter pleinement du potentiel de la RV avec de nouvelles API, telles que WebXR. Grâce à WebXR, nous ouvrons les portes de la prochaine frontière du Web."
User-agent
La chaîne 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 constater, la version actuelle 18.1.0.2.46.337441587 du navigateur Oculus est basée sur Chrome 95.0.4638.74, qui n'est qu'une version en retard sur la version stable actuelle de Chrome, qui est 96.0.4664.110. Si l'utilisateur passe en mode mobile, VR est remplacé par Mobile VR.
Interface utilisateur
L'interface utilisateur du navigateur (illustrée ci-dessus) comporte les fonctionnalités suivantes (rangée du haut de gauche à droite) :
- Bouton Retour
- Bouton "Actualiser"
- Informations sur le site
- Barre d'URL
- Bouton "Créer un favori"
- Bouton de redimensionnement avec options étroites, moyennes et larges, et zoom
- Bouton "Demander le site Web mobile"
- Bouton de menu avec les options suivantes :
- Activer le mode privé
- Fermer tous les onglets
- Paramètres
- Bookmarks
- Téléchargements
- Historique
- Effacer les données de navigation
La ligne du bas comprend les fonctionnalités suivantes :
- Bouton "Fermer"
- Bouton "Réduire"
- Bouton à trois points avec les options "Retour", "Avance" et "Actualiser"
Fréquence d'actualisation et ratio de pixels de l'appareil
Pour Oculus Quest 2, le navigateur Oculus affiche à la fois le contenu des pages Web 2D et WebXR à une fréquence d'actualisation de 90 Hz. Lorsque vous regardez des contenus multimédias en plein écran, Oculus Browser optimise la fréquence d'actualisation de l'appareil en fonction de la fréquence d'images de la vidéo (par exemple, 24 images par seconde). L'Oculus Quest 2 a un format de pixel 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 bientôt être disponibles sur Oculus Quest et Oculus Quest 2. Dans ce qui suit, je décris l'expérience PWA sur Oculus et explique comment créer, installer en mode hors connexion et tester votre PWA sur l'Oculus Quest 2.
Partage de progression
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. Bien entendu, Facebook Login est compatible. 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 applications Web progressives
Les fenêtres du navigateur et des PWA installées peuvent être redimensionnées librement par l'utilisateur. La hauteur peut varier entre 625 px et 1 200 px. La largeur peut être comprise entre 400 px et 2 000 px. Les dimensions par défaut sont de 1 000 x 625 px.
Interagir avec les PWA
Les PWA peuvent être contrôlées à l'aide des manettes gauche et droite Oculus, de souris et de claviers Bluetooth, ainsi que via le suivi de la main. Le défilement fonctionne via les joysticks des contrôleurs Oculus, ou en pinçant le pouce et l'index et en les déplaçant dans la direction souhaitée. Pour sélectionner un élément, l'utilisateur peut pointer et pincer.
Autorisations pour les PWA
Les autorisations du 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 ainsi basculer entre les deux expériences sans avoir à accorder à nouveau les mêmes autorisations.
Bien que de nombreuses autorisations soient implémentées, toutes les fonctionnalités ne sont pas compatibles. Par exemple, même si la demande d'autorisation de géolocalisation aboutit, l'appareil n'obtient jamais réellement de position. De même, les différentes API matérielles, telles que WebHID, Web Bluetooth, etc., utilisent toutes la détection des fonctionnalités de passes, 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 sera mature.
Déboguer les PWA à l'aide des outils pour les développeurs Chrome
Une fois que vous avez activé le mode développeur, le débogage des PWA sur l'Oculus Quest 2 fonctionne exactement comme décrit dans la section 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. Il est suivi d'un ensemble d'onglets du navigateur Oculus actuellement ouverts sur l'appareil.
- Cliquez sur Inspecter dans l'onglet du navigateur Oculus 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 sur 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.
PWA exemplaires sur l'Oculus Quest 2
PWA par Meta
Plusieurs divisions de Meta ont créé des applications PWA pour l'Oculus Quest 2, par exemple Instagram et Facebook. Ces PWA s'exécutent dans des fenêtres d'application autonomes qui ne comportent pas de barre d'URL et qui peuvent être redimensionnées librement.
PWA d'autres développeurs
Au moment de la rédaction de cet article, il existe un petit nombre de PWA pour l'Oculus Quest 2 sur l'Oculus Store, mais celui-ci est en augmentation. Spike permet aux utilisateurs de profiter de 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 d'espace de travail dynamique qui offre une gestion de projet, des workflows automatisés et la création rapide de nouvelles solutions.
D'autres PWA, comme Slack, Dropbox ou Canva, seront bientôt annoncées dans une vidéo avec Jacob Rossi publiée à l'occasion 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 règle générale, les PWA installables dans Chrome devraient souvent fonctionner dès la première utilisation 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 d'application Web. Par exemple, Oculus n'est compatible qu'avec les langues de gauche à droite pour le moment, tandis que la spécification du fichier manifeste d'application Web n'impose aucune de ces contraintes. start_url est un autre exemple. Chrome exige strictement que cette valeur soit définie pour qu'une application puisse être installée, mais elle est facultative sur Oculus. Oculus propose un outil de ligne de commande qui permet aux développeurs de créer des PWA pour Oculus Quest 2, ce qui leur permet de transmettre les paramètres manquants (ou de remplacer les paramètres existants) dans le fichier manifeste d'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 de bibliothèques Open Source 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).
Actuellement, le navigateur Meta Quest n'est pas entièrement compatible avec TWA. Toutefois, à partir de la version 1.18.0, Bubblewrap accepte le packaging de PWA pour les appareils Meta Quest.
Il peut générer des fichiers APK universels qui ouvrent une TWA sur les appareils Android standards et le navigateur Meta Quest sur les appareils Meta Quest.
Si vous avez installé Node.js, la CLI Bubblewrap peut être installée à l'aide de 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 du SDK Android.
Pour générer un projet Android compatible avec Meta Quest qui encapsule votre PWA, exécutez la commande init avec l'indicateur --metaquest, puis 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
Vous obtiendrez un fichier appelé app-release-signed.apk. 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 de 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 via le paramètre -o et le chemin d'accès au SDK Android via le paramètre --android-sdk.
Pointez l'outil vers l'URL en direct du fichier manifeste de l'application Web via le paramètre --web-manifest-url.
Si vous ne disposez pas d'un 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 soit aussi pur que possible, utilisez le paramètre --package-name avec une valeur dans la notation de nom de domaine inverse (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
Dans la vue des auteurs, l'utilisation de PWABuilder est le moyen le plus simple et donc recommandé d'empaqueter des PWA pour Meta Quest pour le moment.
PWABuilder est un projet Open Source développé par Microsoft, qui permet aux développeurs d'empaqueter et de signer leurs PWA pour les publier dans divers magasins, y compris Microsoft Store, Google Play Store, App Store et Meta Quest Store.
Pour empaqueter des PWA avec PWABuilder, il vous suffit de saisir l'URL d'un 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 pour empaqueter les PWA pour les appareils Meta Quest.
Vous pouvez choisir l'option Meta Quest pour utiliser l'utilitaire de 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 le charger en mode sideload sur l'appareil Meta Quest à l'aide de l'ADB via USB ou Wi-Fi :
adb install app-release-signed.apk
Si vous utilisez la CLI Bubblewrap pour empaqueter des PWA, elle fournit une commande d'alias pratique pour installer le fichier APK en mode hors connexion :
bubblewrap install
Les applications téléchargées indépendamment s'affichent dans la section Sources inconnues du panneau des applications.
Envoi de l'application
L'importation et l'envoi de PWA sur l'Oculus Store sont décrits en détail dans la documentation du Developer Center Oculus.
En plus de soumettre leurs applications sur l'Oculus Store, les développeurs peuvent également les distribuer via des plates-formes telles que SideQuest directement aux consommateurs de manière sécurisée, sans nécessiter l'approbation du magasin. Cela leur permet de proposer une application directement aux utilisateurs finaux, même si elle est en cours de développement, expérimentale ou destinée à une audience unique.
Tester les applications à onglets multiples
Pour tester les applications multi-onglets, j'ai créé une petite PWA de test qui illustre les différentes fonctionnalités de lien : ouvrir un nouvel onglet dans la PWA, rester dans l'onglet actuel, ouvrir une nouvelle fenêtre de navigateur et ouvrir dans une WebView en restant dans l'onglet actuel. Créez une copie installable localement 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 un enregistrement d'écran de l'application de test.
Version Oculus de SVGcode
Pour tester les instructions, j'ai créé une version Oculus de ma dernière PWA, SVGcode. Vous pouvez télécharger le fichier APK obtenu depuis mon compte Google Drive output.apk. Si vous souhaitez examiner le package plus en détail, je dispose également d'une version décompilée. Vous trouverez les instructions de compilation dans package.json.
L'utilisation de l'application sur Oculus fonctionne correctement, 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 remplacement est utile. Le seul élément qui ne fonctionnait pas était le zoom avec pincement. J'espérais que cela fonctionnerait 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 l'enregistrement d'écran intégré.
PWA WebXR 3D immersives
La compatibilité des PWA sur Oculus Quest n'est pas limitée 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 les différentes invites (installation de la PWA, demandes d'autorisation, notifications) sont traitées depuis la RV ?
Voici une capture d'écran du test des invites de l'user-agent des tests WebXR du groupe de travail sur le Web immersif.
Comme vous pouvez le voir, l'accès au mode RV nécessite l'autorisation de l'utilisateur. Les autorisations sont demandées une fois par origine. Demander des autorisations quitte le mode immersif. Les notifications ne sont actuellement pas prises en charge.
Suivi des mains
Vous pouvez utiliser vos mains pour interagir avec les PWA en mode immersif grâce à l'API WebXR Hand Input et au système de suivi des mains basé sur l'IA de Meta.
Voici une capture d'écran de l'exemple de suivi des mains tiré des exemples WebXR du groupe de travail sur le Web immersif.
Réalité augmentée/mixte (Passthrough)
Comme annoncé lors de Meta Connect 2022, le navigateur Meta Quest est 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épart A-Frame légèrement modifié avec des modèles réduits, et un ciel et un plan cachés pour la réalité augmentée.
A-Frame est un framework Web Open Source qui permet de créer des expériences 3D/VR/RA entièrement à partir de éléments HTML personnalisés déclaratifs et réutilisables, faciles à lire, à comprendre et à copier-coller.
Voici un enregistrement d'écran de cette démo sur Meta Quest 2.
Le Meta Quest 2 est doté de caméras monochromes, de sorte que le mode passthrough est en niveaux de gris, tandis que le Meta Quest Pro est doté de caméras couleur.
Conclusions
Les PWA sur Oculus Quest 2 sont très amusants et très prometteurs. Le canevas virtuel infini qui permet aux utilisateurs d'adapter leur écran à ce qui convient le mieux à la tâche en cours a de nombreuses possibilités de changer notre façon de travailler à l'avenir. Bien que la saisie en VR avec le suivi des mains soit encore à ses débuts et, du moins pour moi, ne fonctionne pas encore de manière très fiable, elle fonctionne suffisamment bien pour saisir des URL ou écrire de courts textes.
Ce que j'aime le plus dans les PWA sur l'Oculus Quest 2, c'est qu'il ne s'agit que de PWA standards qui peuvent être utilisés sans modification dans un onglet de navigateur ou via un wrapper APK fin, sans API spécifiques à la plate-forme. Il n'a jamais été aussi simple de cibler plusieurs plates-formes avec le même code. À vos PWA en VR et RA sur le Web. L'avenir s'annonce radieux !
Remerciements
Photo de l'Oculus Quest 2 par Maximilian Prandstätter sur Flickr. Images de l'Oculus Store des applications Instagram, Facebook, Oculus Browser et Spike, ainsi qu'illustration de la visibilité des applications et animation du suivi des mains, avec l'aimable autorisation de Meta. Image principale par Arnau Marín i Puig. Cet article a été examiné par Joe Medley.