L'Oculus Quest 2 est un casque de réalité virtuelle 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 précédent casque de la société, la quête Oculus. 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 RV compatible Oculus exécuté sur un ordinateur de bureau lorsqu'il est connecté via USB ou Wi-Fi. Il utilise le système Qualcomm Snapdragon XR2 sur une puce dotée de 6 Go de RAM. L'écran de la quête 2 est constitué d'un panneau LCD à commutation rapide unique avec une résolution d'yeux de 1 832 × 1 920 pixels, qui s'exécute à une fréquence d'actualisation allant jusqu'à 120 Hz.
Le navigateur Oculus
Trois navigateurs sont actuellement disponibles pour Oculus Quest 2 : Wolvic, qui succède à Firefox Reality, et le navigateur Oculus intégré. Cet article se concentre sur ce dernier. Le site Web Oculus présente le navigateur Oculus comme suit.
"Le navigateur Oculus est compatible avec les dernières normes du Web et d'autres technologies pour vous aider à créer des expériences de RV sur le Web. Les sites Web 2D actuels fonctionnent très bien dans le navigateur Oculus, car il s'appuie sur le moteur de rendu Chromium. Il est optimisé pour les casques Oculus afin d'offrir les meilleures performances et de permettre aux développeurs Web d'exploiter tout le potentiel de la RV avec de nouvelles API, telles que WebXR. Grâce à WebXR, nous ouvrons les portes de la nouvelle frontière du Web."
User-agent
Au moment de la rédaction de ce document, la chaîne user-agent du navigateur se présente comme suit.
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 18.1.0.2.46.337441587 actuelle du navigateur Oculus est basée sur Chrome 95.0.4638.74, ce qui n'est qu'une version de retard par rapport à la version stable actuelle de Chrome, à savoir 96.0.4664.110. Si l'utilisateur passe en mode mobile, VR passe à Mobile VR.
Interface utilisateur
L'interface utilisateur du navigateur (illustrée ci-dessus) propose les fonctionnalités suivantes (ligne supérieure de gauche à droite):
- Bouton "Retour"
- Bouton "Actualiser"
- Informations sur le site
- Barre d'adresse
- Bouton "Créer un favori"
- Bouton de redimensionnement avec des options étroites, moyennes et larges, ainsi qu'une fonction de zoom
- Bouton "Demander un 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 données de navigation
La dernière ligne comprend les caractéristiques suivantes:
- Bouton "Close" (Fermer)
- Bouton "Réduire"
- Bouton à trois points avec options "Retour", "Suivant" 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 en 2D et le contenu WebXR à une fréquence d'actualisation de 90 Hz. Lorsque vous regardez du 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 offre un ratio de pixels de 1,5 pour un texte clair.
PWA dans le navigateur et la boutique Oculus
Le 28 octobre 2021, Jacob Rossi, Product Management Lead chez Meta (Oculus), a indiqué que les PWA étaient bientôt disponibles sur Oculus Quest et Oculus Quest 2. Dans la suite de cet article, je décrit l'expérience des PWA sur Oculus, et explique comment créer, télécharger et tester une PWA dans Oculus Quest 2.
Partage d'état
L'état de connexion est partagé entre le navigateur Oculus et les PWA, ce qui permet aux utilisateurs de basculer facilement entre les deux. Naturellement, la connexion Facebook est prête à l'emploi. 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
L'utilisateur peut redimensionner librement les fenêtres de navigateur et les fenêtres des PWA installées. 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 1 000 × 625 pixels.
Interagir avec les PWA
Les PWA peuvent être contrôlées avec les manettes Oculus gauche et droite, des souris et claviers Bluetooth, et via le suivi manuel. Le défilement s'effectue à l'aide des joysticks des télécommandes Oculus, ou en pinçant le pouce et l'index, puis en les déplaçant dans la direction souhaitée. Pour sélectionner quelque chose, l'utilisateur peut pointer et pincer.
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, de sorte que les utilisateurs peuvent basculer entre les deux expériences sans avoir à accorder à nouveau les mêmes autorisations.
Même si de nombreuses autorisations sont implémentées, toutes les fonctionnalités ne sont pas prises en charge. Par exemple, si l'autorisation de géolocalisation aboutit, l'appareil n'obtient jamais la position. De même, les différentes API matérielles telles que WebHID, Web Bluetooth, etc. détectent toutes les fonctionnalités, mais n'affichent pas de sélecteur permettant à l'utilisateur d'associer l'Oculus à un appareil matériel. Je suppose que la détection des fonctionnalités des API sera affinée une fois le navigateur mature.
Déboguer les PWA via les outils pour les développeurs Chrome
Une fois que vous avez activé le mode développeur, le débogage des PWA sur Oculus Quest 2 fonctionne exactement comme décrit dans la section Déboguer à distance les 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 inspect (Inspecter) dans l'onglet du navigateur Oculus souhaité.
Découverte des applications
Les utilisateurs peuvent utiliser le navigateur lui-même ou accéder à l'Oculus Store pour découvrir les PWA. Comme avec tout autre navigateur, les PWA installées fonctionnent également dans le navigateur Oculus en tant que sites Web s'exécutant dans un onglet. Lorsqu'un utilisateur visite un site, le navigateur Oculus l'aide à découvrir l'application si elle est disponible dans l'Oculus Store. Pour les utilisateurs qui ont déjà installé l'application, le navigateur Oculus les aide à passer facilement à l'application s'ils le souhaitent.
PWA exemplaires sur Oculus Quest 2
PWA par Meta
Plusieurs divisions 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 qui n'ont pas de barre d'URL et qui peuvent être redimensionnées librement.
PWA d'autres développeurs
Au moment de la rédaction de ce document, il existe un nombre réduit, mais croissant, de PWA pour l'Oculus Quest 2 sur l'Oculus Store. 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 depuis leur boîte de réception dans un hub d'environnement virtuel directement dans l'application Spike.
Autre exemple : Smartsheet, un espace de travail dynamique qui fournit des fonctionnalités de gestion de projets, de workflows automatisés et de création rapide de nouvelles solutions.
D'autres PWA telles que Slack, Dropbox ou Canva seront bientôt disponibles, comme annoncé dans une vidéo avec Jacob Rossi publiée dans le cadre 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 d'application Web
Il existe des différences importantes par rapport aux critères d'installation de Chrome et aux spécifications du fichier manifeste d'application Web. Par exemple, Oculus n'est compatible qu'avec les langues qui se lisent de gauche à droite pour le moment, alors que la spécification du fichier manifeste d'application Web n'applique aucune de ces contraintes. Autre exemple : start_url, qui est strictement requis par Chrome pour qu'une application puisse être installée, mais qui, sur Oculus, est facultatif. 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 dispose d'un certain nombre de champs facultatifs du fichier manifeste d'application Web propriétaires qui peuvent être utilisés pour personnaliser l'expérience des 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. Ce format est développé par l'équipe Google Chrome afin d'aider les développeurs à générer, créer et signer un projet Android qui lance votre PWA en tant qu'activité Web fiable (TWA).
Meta Quest Browser n'est actuellement pas entièrement compatible avec les TWA, mais à partir de la version 1.18.0, Bubblewrap est compatible avec les PWA de packaging pour les appareils Meta Quest.
Il peut générer des fichiers APK universels qui ouvrent une application Web mobile sur les appareils Android standards et le navigateur Meta Quest sur les appareils Meta Quest.
En supposant que vous ayez 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 propose de télécharger et d'installer automatiquement les dépendances externes requises : Java Development Kit (JDK) et Android SDK Build Tools.
Pour générer un projet Android compatible avec les quêtes Meta 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
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 sur n'importe quelle autre plate-forme de distribution d'applications Android.
Empaqueter des PWA avec un utilitaire de plate-forme Oculus
Oculus Platform Utility est l'outil de ligne de commande officiel développé par Meta afin de 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 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 active du fichier manifeste de l'application Web via le paramètre --web-manifest-url.
Si vous n'avez pas de fichier manifeste sur votre PWA en ligne ou que vous souhaitez remplacer le fichier manifeste actif, 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 inverse du nom de domaine (par exemple, com.company.app.pwa) au lieu 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
Pour le moment, l'utilisation de PWABuilder est le moyen le plus simple et donc recommandé d'empaqueter des PWA pour Meta Quest.
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érentes plates-formes, dont 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 et 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 sélectionner l'option Meta Quest pour utiliser l'utilitaire de la plate-forme Oculus.
Vous pouvez sélectionner l'option Android pour utiliser le papier à bulles, puis cocher la case Compatible avec Meta Quest.
Installer des PWA avec ADB
Après avoir créé le fichier APK, vous pouvez le télécharger indépendamment 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 des PWA, elle fournit une commande d'alias pratique pour charger le fichier APK de manière indépendante:
bubblewrap install
Les applications téléchargées indépendamment s'affichent dans la section Sources inconnues du panneau des applications.
Envoi d'applications
L'importation et l'envoi de PWA sur l'Oculus Store sont traités en détail dans la documentation du centre pour les développeurs Oculus.
En plus de proposer des applications sur 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écurisée, sans nécessiter l'approbation de la plate-forme. 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 multi-onglets
Pour tester les applications à plusieurs onglets, j'ai créé une petite PWA test qui illustre les différentes fonctionnalités des liens: ouverture d'un nouvel onglet dans la PWA, ouverture d'une nouvelle fenêtre de navigateur, ouverture d'une WebView dans l'onglet actuel, ouverture d'une WebView dans l'onglet actuel. Créez une copie de cette application pouvant être installée localement en exécutant les commandes ci-dessous sur votre ordinateur.
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 test.
Une version Oculus du 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 output.apk à partir de Google Drive. Si vous souhaitez examiner le package plus en détail, j'ai également une version décompilée. Vous trouverez les instructions de compilation dans package.json.
L'utilisation de l'application sur Oculus fonctionne bien, 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. La seule chose qui n'a pas fonctionné est le pincement de zoom. Je m'attendais à ce qu'il fonctionne en appuyant sur le bouton du déclencheur sur les deux manettes, puis en déplaçant les manettes 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 immersives en 3D WebXR
La compatibilité des PWA avec 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 les différentes invites (installation de PWA, demandes d'autorisation, notifications) sont traitées en RV, le cas échéant ?
Voici un enregistrement d'écran du test des invites de l'agent utilisateur des tests WebXR du groupe de travail immersif sur le Web.
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. Les demandes d'autorisations permettent de quitter le mode immersif. Les notifications ne sont actuellement pas prises en charge.
Suivi de la main
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 manuel basé sur l'IA de Meta.
Voici un enregistrement d'écran d'un exemple de suivi manuel tiré des exemples WebXR de l'Immersive Web Working Group.
Réalité augmentée/mixte (passthrough)
Comme annoncé lors de Meta Connect 2022, Meta Quest Browser est désormais compatible avec WebXR Augmented Reality (RA) (Réalité augmentée (RA)) sur les appareils Meta Quest 2 et MetaQuest Pro.
Examinons un exemple de démarrage de frame A légèrement modifié avec des modèles réduits, ainsi qu'un ciel et un plan cachés pour la réalité augmentée.
A-Frame est un framework Web Open Source permettant de créer des expériences 3D/RV/RA entièrement à partir d'éléments HTML personnalisés déclaratifs et réutilisables, faciles à lire, à comprendre et à copier-coller.
Voici un enregistrement d'écran de cette démonstration sur Meta Quest 2.
Meta Quest 2 dispose de caméras monochromes, de sorte que le passthrough est en nuances de gris, tandis que Meta Quest Pro dispose de caméras couleur.
Conclusions
Les PWA sur Oculus Quest 2 sont à la fois amusantes et prometteuses. Le canevas virtuel infini qui permet aux utilisateurs d'adapter leur écran à la tâche actuelle peut avoir beaucoup de chances de changer notre façon de travailler à l'avenir. Bien que la saisie en RV avec suivi manuel n'en est qu'à ses balbutiements et, du moins pour moi, elle ne fonctionne pas encore de manière très fiable, mais elle fonctionne parfaitement pour saisir des URL ou des textes courts.
Ce que j'aime le plus dans les PWA de l'Oculus Quest 2, c'est qu'il s'agit simplement de PWA standards qui peuvent être utilisées telles quelles dans un onglet de navigateur ou via un wrapper d'APK léger sans aucune API spécifique à la plate-forme. Il n'a jamais été aussi facile de cibler plusieurs plates-formes avec le même code. Voici les PWA en RV et en RA sur le Web. L'avenir est radieux !
Remerciements
Photo de l'Oculus Quest 2 de Maximilian Prandstätter sur Flickr. Images Oculus Store d'Instagram, Facebook, Oculus Browser et Spike, ainsi que d'une illustration montrant la découverte des applications et d'une animation de suivi manuel fournie par Meta. Image héros d'Arnau Marín i Puig. Ce post a été examiné par Joe Medley.