Intégrer la réalité augmentée sur le Web en dix lignes de code
Au tour de la réalité augmentée de bénéficier d’un choc de simplification par le Web ! En avril, on vous expliquait comment intégrer de la réalité virtuelle (VR) sur une page web en quelques lignes de code, grâce au WebVR et la plateforme open source A-Frame. Pour la réalité augmentée, qui (rappelons-le) permet de faire apparaître des objets virtuels dans le réel à travers le prisme d’un écran, un navigateur web et quelques lignes de code suffisent également.
Et voici comment, grâce à la solution AR.js mise au point par Jérôme Etienne. Ce développeur français vivant à Dublin s’est donné pour mission de mettre l’AR à la portée du Web, en partant d’A-Frame, cette plateforme lancée fin 2015 par la fondation Mozilla qui permet d’intégrer des objets, des animations, etc. pour construire des scènes VR sur une page web. Pour suivre le tuto ci-dessous, il suffit de posséder un ordinateur équipé d’une caméra et une imprimante.
Etape 1: test du code
– Affichez la page Codepen de Jérôme Etienne, consacrée à AR.js. Codepen permet de tester des programmes en direct. Une des fenêtres affiche votre webcam, tandis qu’une autre affiche le code.
– Pour afficher un objet, on utilise un marqueur, soit un motif à télécharger et à imprimer. Présentez le marqueur devant la caméra de votre ordinateur et l’objet apparaît.
Et ça fonctionne sur smartphone?
C’est le concept ! AR.js peut être copié dans une page HTML (le langage de programmation des pages web). Une fois ouverte avec un navigateur mobile compatible, la page fera office d’application d’AR. Pour tester, il suffit de charger cette page sur votre navigateur mobile.
Nous l’avons testé sous Android avec la dernière version de Chrome et sous IOS 11 avec Safari. Sur ce site, vous pourrez vérifier les dernières comptabilités.
Etape 2: modifier les paramètres de la scène
Lors du premier test, vous avez vu s’afficher un cube rudimentaire. Il s’agit d’un composant A-Frame. Pour fabriquer des scènes plus sophistiquées, il vous faut créer votre propre compte sur Codepen, c’est gratuit. Puis, rendez-vous à nouveau sur la page Codepen de Jérôme Etienne. « Forkez » (le terme générique des codeurs pour dire copier) le code AR.js sur votre page. Il y a un bouton pour ça.
Lire la suite sur Makery le média de tous les labs.