Nous contacter

  1. Accueil
  2. Blog
  3. Développement
  4. Créer de la réalité augmentée simplement avec AR.js

Créer de la réalité augmentée simplement avec AR.js

Le 26/09/2017

Dans Développement

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é.

1 ocvbsvfbzjdvwx3vkbefla

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.

 

Artoolkit

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.

AR.js - Efficient Augmented Reality for the Web

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

Hiro

Pour cela ouvrez cette page sur votre smartphone en cliquant ici. 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 d'html grace à ce petit tutoriel. Attention, si vous utilisez Chrome, vous risquez de rencontrer des problèmes de sécurité. Il vous faudra un certificat SSL que vous pouvez obtenir ici. Sinon vous pouvez utiliser un autre navigateur comme Firefox.