Lors de la préparation de Google I/O, nous voulions mettre en avant les possibilités passionnantes de la réalité augmentée (RA) sur le Web. Chacmool est une démonstration d'expérience Web éducative que nous avons créée pour montrer à quel point la RA basée sur le Web peut facilement aider les utilisateurs à interagir avec les expériences RA. Le Web rend la RA pratique et accessible partout.
Nous avons maintenant activé cette démonstration dans Chrome Canary sur les appareils Android compatibles avec ARCore équipés d'Android O ou version ultérieure. Vous devez également installer ARCore.
Ce travail repose sur une nouvelle proposition WebXR (l'API WebXR Hit Test). Il est donc associé à un indicateur et est destiné à rester dans Canary pendant que nous testons et affinons la nouvelle proposition d'API avec d'autres membres du groupe de la communauté Web immersive. En fait, pour accéder à la démonstration, vous devez activer deux options dans chrome://flags: : #webxr et #webxr-hit-test. Une fois ces deux options activées et Canary redémarré, vous pouvez consulter la démonstration de Chacmool.
L'expérience de RA Chacmool est axée sur l'éducation. Elle exploite la nature immersive et interactive de la RA pour aider les utilisateurs à en savoir plus sur les anciennes sculptures Chacmool. Les utilisateurs peuvent placer une statue grandeur nature dans leur réalité et se déplacer pour voir la sculpture sous différents angles et à différentes distances. La nature immersive de la RA permet aux utilisateurs d'explorer, de découvrir et de jouer librement avec le contenu, comme ils le feraient dans le monde réel. Lorsque vous regardez un objet en RA, par opposition à un écran plat en 2D, vous pouvez mieux comprendre ce que vous regardez, car vous pouvez le voir sous de nombreux angles et à différentes distances à l'aide d'un modèle d'interaction très intuitif: en vous déplaçant autour de l'objet, et en vous rapprochant ou en vous éloignant physiquement. De plus, dans cette expérience, des annotations sont placées directement sur la sculpture. Cela permet aux utilisateurs de faire le lien direct entre ce qui est décrit dans le texte et l'emplacement de ces caractéristiques sur la sculpture.
Cette démonstration a été créée en l'espace d'un mois environ, en exploitant certains des composants de la première démonstration de RA sur le Web 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, 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 sa taille de fichier. Ensuite, Draco, une bibliothèque permettant de compresser et de décompresser des maillages géométriques 3D et des nuages de points, a été utilisée pour réduire la taille de fichier du modèle de 44,3 Mo à 225 ko. Enfin, un worker Web est utilisé pour charger le modèle sur un thread en arrière-plan afin que la page reste interactive pendant le chargement et la décompression du modèle, une opération qui entraînerait généralement des à-coups et empêcherait le défilement de la page.
Nous ne pouvons pas trop insister sur le fait que, comme nous développions sur ordinateur et déployions sur un 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 et efficace entre les modifications de code. Chrome propose également d'excellents outils pour les développeurs pour le débogage et le contrôle des performances.
Bonnes pratiques pour les expériences RA/RV
La plupart des consignes de conception et d'ingénierie pour la conception d'expériences RA natives s'appliquent à la création d'expériences RA sur le Web. Pour en savoir plus sur les bonnes pratiques générales, consultez les consignes de conception pour la RA que nous avons récemment publiées.
En particulier, lorsque vous concevez des expériences AR sur le Web, il est préférable d'utiliser l'intégralité de l'écran (c'est-à-dire de passer en plein écran comme le font les lecteurs vidéo sur mobile) lorsque vous utilisez la RA. Cela empêche les utilisateurs de faire défiler la vue ou de se laisser distraire par d'autres éléments de la page Web. La transition vers la RA doit être fluide et transparente, et afficher la vue de la caméra avant de commencer l'intégration de la RA (par exemple, en dessinant un réticule). Il est important de noter que, contrairement à l'AR native, les développeurs n'ont pas accès au cadre de la caméra, à l'estimation de l'éclairage, aux ancrages ni aux plans (pour le moment). Il est donc important que les concepteurs et les développeurs tiennent compte de ces limites lorsqu'ils conçoivent une expérience AR sur le Web.
De plus, en raison de la variété des appareils utilisés pour les expériences Web, il est important que les performances soient optimisées pour offrir une expérience utilisateur optimale. Par conséquent, limitez le nombre de polygones, essayez de vous passer du moins de lumières possible, précalculez les ombres si possible et minimisez les appels de dessin. Lorsque vous affichez du texte en RA, utilisez des techniques de rendu de texte modernes (c'est-à-dire basées sur le champ de distance signé) pour vous assurer que le texte est clair et lisible à toutes les distances et angles. Lorsque vous placez 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, des annotations basées sur la 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 de conception générales 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 signifie également concevoir pour les appareils non compatibles avec la RA (par exemple, afficher un visualiseur de modèles 3D sur des appareils non compatibles avec la RA).
Si vous souhaitez développer vos propres expériences RA sur le Web, consultez cet article complémentaire qui vous explique comment commencer à créer vous-même des expériences RA sur le Web. (Vous pouvez également consulter le code source de la démo Chacmool.) L'API WebXR Device est en cours de développement. Nous aimerions recevoir vos commentaires pour nous assurer qu'elle permet tous les types d'applications et de cas d'utilisation. N'hésitez donc pas à rejoindre la conversation sur GitHub.