Réalité augmentée sur le web, wut?
La réalité augmentée (AR) nous a toujours intéressé chez Locomotive. La liberté créative et les idées de concepts utilisant cette technologie sont nombreuses, mais est-il possible d’exploiter davantage la réalité augmentée sur le web sans utiliser une application native ou Unity ? L’idée étant d’utiliser nos compétences avec threeJS pour développer des fonctionnalités en réalité augmentée.
AR.js
On retrouve beaucoup d’articles traitant de la réalité augmentée sur le web. Nos recherches sur le sujet nous ont tranquillement mené vers AR.js par Jerome Etienne. Une librairie claire, flexible, optimisée et maintenue selon les évolutions de webgl par Jérôme, un développeur très actif.
AR.js est basé sur un langage markup (A-Frame magic) pour créer les différents objets, caméra, marqueur (tout ce qu'il faut pour faire de la réalité augmenté me direz vous).Mais comme on aime travailler avec notre boilerplate on a plutôt regardé comment fonctionnait l’intégration de artoolkit avec threejs sans utiliser le language A-Frame magic.
La principale limitation de la réalité augmentée sur le web, est l’utilisation obligatoire d’un marqueur visuel et physique.
Grâce à plusieurs tests effectués, on a pu mieux définir les meilleures pratiques pour la création du marqueur en question. Il doit être assez contrasté et doit y inclure des détails précis pour sa détection. Il doit aussi être pleinement visible.
Par exemple, un marqueur imprimé endommagé pourrait occasionner des soucis de détection. L’utilisateur nécessitera aussi un bon éclairage, et selon votre caméra, le marqueur pourrait s’avérer plus difficile à détecter. Il faudra sans doute tester plusieurs marqueurs et itérations avant d’atteindre une détection optimale ou suffisante. Finalement, pour générer notre marqueur, on a utilisé cet outil : AR.js Marker Training.
R&D
L’avantage d’avoir développé ce prototype avec AR.js, c’est que l’on se sentait déjà à l’aise de mettre en place une scène threejs classique. La création de geometry basiques a fait partie de notre premier test.
On voulait ensuite tester les importations d’objet .glb, l’ajout de .fbx animé et les videoTexture. n prototype assez simple à développer : une scène AR à créer et l’ajout de nos Mesh, comme dans un projet classique. Le résultat a été satisfaisant puisque chaque type de contenu intégré dans la scène AR (objet 3D, animation, vidéo, image, etc.) s’est avéré un succès en terme d’affichage et de performance.
À noter que si vous travaillez en local, il faudra un petit serveur https pour utiliser la webcam ou la caméra de votre téléphone. On a utilisé le package http-server, un outil efficace et simple à mettre en place.
Les limites de la réalité augmentée sur le web
Alors oui, on a réussi à faire de la réalité augmentée dans une page web. On sent que cette technologie est de plus en plus ouverte et simple à mettre en place grâce à différents outils, mais ça reste encore très limité. Le temps de détection du marqueur est des fois un peu long, si on bouge trop le téléphone et que le marker n’est plus visible, ça va reprendre quelques secondes pour ré-afficher la scène.
Safari et Google Chrome permettent aussi maintenant d’afficher des objets 3D en réalité augmentée grâce au format .usdz et un lien avec un rel=”ar”. Encore ici, c’est assez limité car il va seulement afficher l'objet en fonction de la caméra, mais rien d’autre n’est faisable comme ajouter d’autres objets, de simple meshs ou de changer les materials par un shader par exemple. (source: Article de Clément Pavageau)
Le champs des possibilités est large en terme de créativité mais limité techniquement.
Contrairement à ARKit d’iOS il n’y a pas de spatialisation de l’environnement, et faire quelque chose de vraiment complet comme l’application IKEA Place par exemple ne sera malheureusement pas encore possible.