Lors de la préparation de Google I/O, nous voulions mettre en évidence les possibilités exceptionnelles offertes par la réalité augmentée (RA) sur le Web. Chacmool est une démonstration Web éducative que nous avons conçue pour montrer à quel point la RA sur le Web peut aider les utilisateurs à interagir avec des expériences de RA. Grâce au Web, la RA est pratique et accessible partout.
Nous avons maintenant activé cette démonstration dans Chrome Canary sur les appareils Android compatibles ARCore avec Android O ou une version ultérieure. Vous devez également installer ARCore.
Ce travail s'appuie sur une nouvelle proposition WebXR (l'API WebXR Hit Test). Elle est donc soumise à un indicateur et destinée à rester dans Canary pendant que nous testons et affinons la nouvelle proposition d'API avec d'autres membres du groupe "Immersive Web Community Group". En fait, pour accéder à la version de démonstration, vous devez activer deux indicateurs dans chrome://flags:, #webxr et #webxr-hit-test. Une fois ces deux fonctionnalités activées et redémarré Canary, vous pouvez consulter la démo de Chacmool.
L'expérience de RA Chacmool est centrée sur l'éducation et exploite la nature immersive et interactive de la RA pour aider les utilisateurs à découvrir les anciennes sculptures de Chacmool. Les utilisateurs peuvent placer une statue grandeur nature dans leur réalité et se déplacer pour la voir sous différents angles et distances. La nature immersive de la RA permet aux utilisateurs d'explorer, de découvrir et de jouer librement avec du contenu, comme ils peuvent le faire dans le monde réel. Lorsque vous visualisez un objet en RA, plutôt que sur un écran plat 2D, nous pouvons obtenir une compréhension approfondie de ce que nous regardons, car nous pouvons le voir sous de nombreux angles et distances différents à l'aide d'un modèle d'interaction très intuitif: marcher autour de l'objet et se rapprocher ou s'éloigner physiquement. Dans cette expérience, des annotations sont également placées directement sur la sculpture. Cela permet aux utilisateurs de relier directement ce qui est décrit dans le texte et l'emplacement de ces caractéristiques sur la sculpture.
Cette démonstration a été conçue en un mois environ à l'aide de certains des composants de la première démo Web de RA de l'équipe WebXR, WebAR-Article. Les informations sur la sculpture proviennent de la page Google Arts & Culture, et le modèle 3D a été fourni par CyArk, le partenaire de Google Arts & Culture. Pour préparer le modèle 3D pour le Web, une combinaison de Meshlab et de Mesh Mixer a été utilisée pour réparer le modèle et décimer son maillage afin de réduire la taille de son fichier. Ensuite, Draco, une bibliothèque de compression et de décompression des maillages géométriques 3D et des nuages de points a été utilisée pour réduire la taille du fichier du modèle de 44,3 mégaoctets à seulement 225 kilo-octets. Enfin, un nœud de calcul Web est utilisé pour charger le modèle sur un thread d'arrière-plan afin que la page reste interactive pendant le chargement et la décompression du modèle. Cette opération entraîne généralement des à-coups et empêche le défilement de la page.
Nous ne le soulignerons jamais assez, puisque nous déployions des applications sur ordinateur et sur téléphone, l'utilisation des outils de débogage à distance de Chrome pour inspecter l'expérience crée un cycle d'itération rapide entre les modifications de code. De plus, Chrome propose d'excellents outils pour les développeurs pour le débogage et la vérification des performances.
Bonnes pratiques pour les expériences de RA/RV
La plupart des consignes de conception et d'ingénierie pour la conception d'expériences de RA natives s'appliquent à la création d'expériences de RA sur le Web. Si vous souhaitez en savoir plus sur les bonnes pratiques générales, consultez les consignes de conception de RA que nous avons récemment publiées.
En particulier, lors de la conception d'expériences de RA sur le Web, il est préférable d'utiliser la totalité de l'écran (c'est-à-dire passer en plein écran de la même manière que les lecteurs vidéo qui passent en plein écran sur mobile) lorsque vous utilisez la RA. Cela évite aux utilisateurs de faire défiler la vue ou de se laisser distraire par d'autres éléments de la page Web. La transition en RA doit être fluide et présenter la vue de la caméra avant l'intégration de la RA (par exemple, pour dessiner un réticule). Il est important de noter que, contrairement à la RA basée sur le Web, les développeurs n'ont pas (encore) accès au cadre de la caméra, à l'estimation de l'éclairage, aux ancres ni aux plans. Il est donc important que les concepteurs et les développeurs tiennent compte de ces limites lorsqu'ils conçoivent une expérience de RA sur le Web.
En outre, en raison de la variété des appareils utilisés pour les expériences Web, il est important d'optimiser les performances pour créer la meilleure expérience utilisateur possible. Par conséquent : limitez le nombre de polygones, essayez de vous éloigner avec le moins de lumières possible, précalculez les ombres si possible et réduisez les appels de dessin. Lorsque vous affichez du texte en RA, utilisez des techniques de rendu de texte modernes (basées sur le champ de distance signée) pour vous assurer que le texte est clair et lisible, quelle que soit la distance ou l'angle de vue. Lorsque vous insérez des annotations, considérez le regard de l'utilisateur comme une autre entrée et n'affichez les annotations que lorsqu'elles sont pertinentes (par exemple, les annotations de proximité qui s'affichent lorsqu'un utilisateur se concentre sur une zone d'intérêt).
Enfin, comme ce contenu est basé sur le Web, il est important d'appliquer également les bonnes pratiques générales de conception pour le Web. Assurez-vous que le site offre une bonne expérience sur tous les appareils (ordinateur, tablette, mobile, casque, etc.). La prise en charge de l'amélioration progressive implique également de concevoir pour les appareils non compatibles avec la RA (c'est-à-dire, afficher une visionneuse de modèles 3D sur les appareils non compatibles avec la RA).
Si vous souhaitez développer vos propres expériences de RA sur le Web, nous avons publié un post associé qui vous expliquera comment créer vous-même la RA sur le Web. (Vous pouvez également consulter la source de la démo Chacmool.) L'API WebXR Device est activement en développement, et nous aimerions connaître votre avis afin de nous assurer qu'elle active tous les types d'applications et de cas d'utilisation. Veuillez donc accéder à GitHub et rejoindre la conversation.