Comment faire de la réalité augmentée en moins d’une heure

Dans cette article, je vais vous faire découvrir la réalité augmenté sans devoir télécharger 2 gigaoctets de logiciels (merci Unity + Vuforia + Visual Studio). Pour cela nous allons utiliser le framework javascript AR.js (https://ar-js-org.github.io/AR.js-Docs/). Ce framework s’appuie lui aussi sur un autre framework, Aframe.io, qui permet de créer des objets 3D dans un navigateur web.

Tout ceci a été rendu possible grâce à Jérôme Etienne qui a développé la première version de AR.js.

Quelques recommandations et prérequis avant de commencer :

Il fonctionne sur tous les téléphones avec webgl et webrtc.
La fonction de marquage est très légère, tandis que la fonction de suivi d’image est plus gourmande en ressources processeur.
Vous ne pouvez pas utiliser Chrome sur iOS, car Chrome sur iOS ne permet pas, pour le moment, l’accès aux caméras
Sur les appareils équipés de plusieurs caméras, le chrome peut avoir des problèmes pour détecter la bonne. Veuillez utiliser Firefox si vous trouvez que AR.js s’ouvre sur la mauvaise caméra. Il y a un problème ouvert pour cela.
Pour fonctionner avec la fonction de localisation, votre téléphone doit être équipé de capteurs GPS
Toujours se déployer sous https.
L’accès à l’appareil photo du téléphone ou aux capteurs GPS de l’appareil photo, en raison des restrictions des principaux navigateurs, ne peut se faire que sous les sites web https.
Tous les exemples que vous verrez, et toutes les applications web AR.js en général, doivent être exécutés sur un serveur. Vous pouvez utiliser un serveur local ou déployer l’application web statique sur le web.
N’oubliez donc pas de toujours exécuter vos exemples sur des serveurs à connexions sécurisées ou sur localhost. Github Pages est un excellent moyen d’avoir des sites web gratuits sous https.

Commençons :

En premier lieu, il faut un marqueur. Le marqueur va permettre de positionner notre objet virtuel dans l’environnement réel.

Pour cela nous vous recommandons le site suivant : https://au.gmented.com/app/marker/marker.php

Dans notre exemple nous allons générer un marqueur avec le code 8 (par exemple).

Ensuite ce marqueur, il faut le codifier pour qu’il puisse être reconnu par AR.js avec le site suivant.

https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

Vous récupérez le fichier de description du marqueur en cliquant sur “Download Marker”. Cela va télécharger un fichier PATT exemple pattern-barcode_008.patt

marker pattern 8 — Marqueur à imprimer pour faire apparaître l’objet 3D

Une fois que vous avez le marqueur, il vous faut votre objet 3D.

Sur ce site vous trouverez des objets simples : https://poly.google.com/blocks

Nous allons choisir une coeur. Vous téléchargez le fichier zip. Le nom des fichiers sur POLY est model. Ceci peut être génant, si nous voulons mettre plusieurs objets ou rendre plus lisible notre code. Dans le fichier zip, il y a 2 fichiers, un fichier GLTF et un fichier BIN. Si nous les utilisons directement, il y a un problème d’affichage. Il faut donc le reformatter avec le site suivant : https://blackthread.io/gltf-converter/

Donc, nous avons nos librairies aframe et arjs, notre marqueur et notre objet 3D. Il faut donc mettre tout cela dans un fichier HTML sur un serveur HTTPS.

Voici le fichier HTML :

<html>
<!-- Déclaration du framework aframe pour décrire les objets 3D -->
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<!-- Déclaration du framework AR.js pour mettre en place la réalité augmentée -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>

<body style="margin : 0px; overflow: hidden;">
   <a-scene embedded arjs>
      <!-- Partie consacrée au contenu : le fichier de description du marqueur -->
  <a-marker type="pattern" url="https://raw.githubusercontent.com/chrisagon/arjs3demo/main/pattern-barcode_008.patt">
         <!-- marker -->
      <!-- Partie consacrée au contenu : le fichier de description de l objet 3D -->
     <a-entity 
         position="0 -3 0" 
         scale="3 3 3" 
         gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githubusercontent.com/chrisagon/arjs3demo/main/coeur.gltf">
         </a-entity>
      </a-marker>
      <a-entity camera></a-entity>
   </a-scene>
</body>
</html>

ra1.html affichage brut

Nous allons utiliser GITHUB pour stocker nos fichiers. Github est le site que tous les développeurs doivent connaitre. Il permet de partager et de tracer les modifications faites sur les fichiers partager. Il faut donc se créer un compte, puis créer un répertoire de stockage.

Ici le compte, c’est “chrisagon” et le répertoire de stockage “arjs3demo“.

Remarque : dans le fichier html, vous ne pouvez pas mettre directement l’emplacement du fichier 3D, il faut passer par un “proxy” et ajouter “https://arjs-cors-proxy.herokuapp.com/” avant le chemin d’accès du fichier.

Déposer le fichier html sur un serveur HTTPS avec Github pages. Une fois que vous avez votre compte Github, vous trouverez ici (https://guides.github.com/features/pages/) comment créer une ou plusieurs pages html.

Nous avons stockés notre fichier à l’adresse suivante : https://chrisagon.github.io/arjs3demo.github.io/

Sauf que pour y accéder via téléphone mobile, c’est un peu long. Alors, nous allons utiliser un QRCode pour faciliter l’accès à cette URL.

Je vous suggère https://www.unitag.io/fr/qrcode et vous obtenez le résultat suivant.

Il vous faut aussi imprimer le marqueur que vous mettrez devant votre téléphone pour faire apparaître l’objet, comme nous l’avons indiquez plus haut.

Laisser une réponse Annuler la réponse

Vous devez vous connecter pour publier un commentaire.

Cet article n'a pas été revu depuis la publication.

Cet article a été créé par chrisagon le 8 novembre 2020.

Comment faire de la réalité augmentée en moins d’une heure

Laisser une réponse Annuler la réponse

AI Result for: