Notez cet article

Aujourd'hui le blog du web design vous propose de découvrir la réalité augmentée depuis votre navigateur.

AR.js qu’est-ce que c’est ?

AR.js est une solution open-source qui permet de faire de la réalité augmentée en 60fps directement depuis un navigateur, sans application native.

La réalité virtuelle nous immerge complètement dans un autre monde alors que la réalité augmentée rajoute des éléments virtuels à notre réalité.

Comment ça fonctionne ?

La balise caméra de l’api getUserMedia va se servir de la caméra de notre smartphone, ensuite ARToolKit (SDK opensource) va permettre au navigateur d’analyser les images et reconnaître son environnement.

Enfin Three.js va accrocher nos objets 3D aux éléments du décors.

Le résultat est visible dans la vidéo ci dessous.

Jerome Etienne (le développeur de la librairie AR.js) nous propose d’essayer sa librairie.

Pour cela ouvrez cette page sur votre smartphone : https://jeromeetienne.github.io/AR.js/three.js/examples/mobile-performance.html. Pour plus de facilité je vous ai mit à disposition ce QRCode. Il ne vous restera plus qu'à donner à votre navigateur l'autorisation d'utiliser la caméra et scanner l'image.

Sinon vous pouvez également créer votre propre exemple en moins de 10 lignes de html grace à ce petit tutoriel. Attention si vous utilisez Chrome vous risquez d'avoir des problèmes de sécurités il vous faudra un certificat SSL que vous pouvez obtenir ici. Où vous pouvez utiliser un autre navigateur comme Firefox.