Locomotive

Agence digitale

Le fun Retour au travail

Le fun

Retour aux articles

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.

Lire

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.

Alors oui, on a réussi à faire de l’AR dans une page web, mais pas sans compromis. Quentin Hocdé, Développeur créatif

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.

Retour aux articles
Réalité augmentée sur le web, wut? C'est hot, 2ieme édition 500 jours plus tard, My Better Normal 6 piliers de la culture de travail chez Locomotive Pourquoi nous n’utilisons pas de frameworks front-end à Locomotive? 7 façons d'améliorer la communication avec le client C'est hot, 1re édition 3 choses que votre concepteur UX peut apprendre de votre psy, style Locomotive Trois fois de suite, Locomotive est couronnée l'agence de l'année Locomotive prend d'assaut le stade IGA et remporte les honneurs au concours Idéa La révolution de l'espace de travail tel que nous le connaissons Puis-je te dire bravo? Locomotive couronnée Agence de l'année pour une deuxième année consécutive Analyse d'image et machine learning avec Google Vision API L’évolution du scroll chez Locomotive Revivez le Parté of the Year de Locomotive Les p'tits déjs Loco La zoothérapie au bureau Locomotive remporte le prix Agence de l'année Journée tempête et ski de fond Locomotive en mode avion Comment bâtir une équipe de rêve et la garder? Un bureau haut en couleurs saisonnières Les vendredis sous le soleil d'été Une équipe de rêve pour Locomotive
À propos de Locomotive À propos de Locomotive
C H O O C H O O