Développer des Expériences Immersives : Web AR et Web VR avec A-Frame et Three.js
Développer des Expériences Immersives : Web AR et Web VR avec A-Frame et Three.js

Création d'Expériences de Réalité Augmentée (AR) avec A-Frame

Introduction à la Réalité Augmentée sur le Web

Bienvenue dans cette leçon dédiée à la création d'expériences de Réalité Augmentée (AR) interactives et immersives directement depuis votre navigateur web. Dans le cadre de notre cours sur le Développement d'Expériences Immersives : Web AR et Web VR avec A-Frame et Three.js, nous allons explorer comment la simplicité d'A-Frame peut être mise au service de l'AR, ouvrant ainsi les portes à des applications innovantes sans nécessiter d'installations logicielles complexes ou de compétences approfondies en développement natif.

La Réalité Augmentée (AR) consiste à superposer des éléments virtuels (images, vidéos, modèles 3D) sur le monde réel, enrichissant ainsi notre perception de l'environnement physique. Contrairement à la Réalité Virtuelle (VR) qui immerge l'utilisateur dans un monde entièrement synthétique, l'AR préserve la conscience de l'environnement réel tout en y ajoutant une couche d'informations numériques.

Le Web AR démocratise cette technologie en la rendant accessible via un simple navigateur web. Fini le téléchargement d'applications dédiées ! Un simple lien suffit pour plonger dans une expérience augmentée, ce qui facilite grandement la distribution et l'adoption. A-Frame, avec sa syntaxe déclarative et sa compatibilité native avec Three.js, est un excellent choix pour construire ces expériences, notamment grâce à son intégration avec des bibliothèques AR spécialisées comme AR.js.

Dans cette leçon, nous allons apprendre à :

  • Comprendre les fondements du Web AR avec A-Frame.
  • Mettre en place un environnement de développement pour l'AR.
  • Créer des scènes AR basiques basées sur des marqueurs.
  • Intégrer des modèles 3D et des interactions dans nos expériences AR.

Prérequis

Pour suivre au mieux cette leçon, il est recommandé d'avoir :

  • Des connaissances de base en HTML, CSS et JavaScript.
  • Une familiarité avec les concepts fondamentaux d'A-Frame (scènes, entités, composants, propriétés).
  • Un navigateur web moderne (Chrome, Firefox, Safari) sur un ordinateur ou, idéalement, un smartphone compatible avec l'accès à la caméra pour tester vos expériences AR.

A-Frame et AR.js : Le Duo Gagnant pour le Web AR

A-Frame, bien qu'étant une surcouche à Three.js conçue initialement pour la VR, est remarquablement adaptable au Web AR grâce à son architecture basée sur les composants. Cependant, A-Frame seul ne gère pas directement les aspects spécifiques à l'AR comme la détection de marqueurs, la reconnaissance d'images ou le passthrough de la caméra. C'est là qu'intervient AR.js.

Qu'est-ce que AR.js ?

AR.js est une bibliothèque JavaScript open-source, légère et performante, conçue spécifiquement pour la Réalité Augmentée sur le web. Elle utilise la puissance de WebGL et WebRTC pour offrir des fonctionnalités de suivi et de détection en temps réel, le tout directement dans le navigateur.

Ses avantages clés incluent :

  • Performance élevée : Capable de fonctionner à 60 FPS sur la plupart des smartphones modernes.
  • Légèreté : Très petite taille de fichier, ce qui assure des temps de chargement rapides.
  • Facilité d'utilisation : S'intègre parfaitement avec A-Frame via des composants personnalisés.
  • Support de différents types de suivi :
    • Suivi basé sur marqueur (Marker-based tracking) : Utilise des images ou des motifs spécifiques (par exemple, le marqueur HIRO) pour positionner les objets virtuels. C'est le plus simple à mettre en œuvre.
    • Suivi basé sur image (Image tracking) : Permet de suivre n'importe quelle image définie par l'utilisateur (logos, affiches) sans nécessiter de motifs spécifiques.
    • Suivi sans marqueur (Marker-less tracking) : Moins mature sur le web, mais en développement constant, utilisant des caractéristiques de l'environnement pour le positionnement.

Dans cette leçon, nous nous concentrerons principalement sur le suivi basé sur marqueur car c'est le point de départ le plus accessible et le plus robuste pour découvrir le Web AR.

Comment A-Frame et AR.js travaillent ensemble ?

AR.js fournit des composants A-Frame qui étendent les capacités de la scène et des entités. Au lieu d'utiliser un simple <a-scene>, nous utiliserons un <a-scene> avec le composant arjs ou directement un <a-scene ar-scene> (une version simplifiée) pour gérer le flux vidéo de la caméra et le processus de détection. Les marqueurs sont ensuite représentés par des entités <a-marker> qui servent de "points d'ancrage" pour nos objets 3D virtuels.

Mise en Place de l'Environnement

Pour commencer, nous avons besoin d'un fichier HTML basique qui inclura les bibliothèques A-Frame et AR.js.

<!DOCTYPE html>
<html>
  <head>
    <title>Ma Première Expérience AR avec A-Frame et AR.js</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <style>
      body { margin: 0; overflow: hidden; }
    </style>
  </head>
  <body>
    <!-- Notre scène AR sera ici -->
  </body>
</html>

Explication du code :

  • aframe.min.js : La bibliothèque principale d'A-Frame.
  • aframe-ar.js : La bibliothèque AR.js pour A-Frame. Il est important de charger AR.js après A-Frame.
  • Le <style> intégré supprime les marges par défaut du corps du document, ce qui est une bonne pratique pour les expériences immersives afin d'occuper tout l'écran.

Concevoir une Scène AR Basique avec un Marqueur HIRO

Le moyen le plus simple de démarrer avec AR.js est d'utiliser un marqueur pré-défini. Le marqueur HIRO est un marqueur emblématique d'AR.js, très fiable et facile à imprimer.

Le composant ar-scene et a-marker

Pour intégrer l'AR, nous allons modifier notre balise <a-scene>.

  1. Le composant arjs sur la scène : Au lieu d'utiliser <a-scene>, nous pouvons ajouter le composant arjs="sourceType: webcam;" à notre balise <a-scene>. Cela indique à A-Frame et AR.js de capturer le flux vidéo de la webcam pour l'analyse AR.
  2. L'entité a-marker : Cette entité représente le marqueur physique dans le monde réel. Elle devient le parent de tous les objets 3D que vous souhaitez voir apparaître sur ce marqueur. Le type de marqueur est spécifié via l'attribut type. Pour le marqueur HIRO, on utilise type="pattern" et pattern="hiro".

Voici un exemple de code complet pour afficher un simple cube rouge sur le marqueur HIRO :

<!DOCTYPE html>
<html>
  <head>
    <title>Cube AR sur Marqueur HIRO</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <style>
      body { margin: 0; overflow: hidden; }
    </style>
  </head>
  <body>
    <a-scene embedded arjs="sourceType: webcam;">
      <!-- Entité marqueur HIRO -->
      <a-marker preset="hiro">
        <!-- Notre cube 3D qui apparaîtra sur le marqueur -->
        <a-box position="0 0.5 0" material="color: red;"></a-box>
      </a-marker>

      <!-- La caméra par défaut d'AR.js pour l'expérience AR -->
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

Explication du code :

  • <a-scene embedded arjs="sourceType: webcam;"> :
    • embedded : Permet à la scène A-Frame de s'intégrer dans une page HTML normale (sans prendre tout l'écran en mode immersif).
    • arjs="sourceType: webcam;" : Active le moteur AR.js, lui demandant d'utiliser la webcam comme source.
  • <a-marker preset="hiro"> :
    • C'est l'entité qui détecte le marqueur HIRO. preset="hiro" est un raccourci pour type="pattern" url="data/hiro.patt".
    • Important : Le contenu 3D que vous souhaitez voir apparaître sur le marqueur doit être placé à l'intérieur de cette balise <a-marker>.
  • <a-box position="0 0.5 0" material="color: red;"></a-box> :
    • Une simple boîte (cube) A-Frame.
    • position="0 0.5 0" : La position est relative au marqueur. Le marqueur est le centre de son propre système de coordonnées (0,0,0). Nous positionnons le cube à 0.5 unité (mètre par défaut) sur l'axe Y pour qu'il "repose" sur le marqueur et non "en son centre".
  • <a-entity camera></a-entity> :
    • AR.js gère sa propre caméra pour l'AR. Il est recommandé d'inclure cette entité camera sans composants wasd-controls ou look-controls car AR.js s'en occupe. Si vous omettez cette ligne, AR.js en créera une par défaut.

Comment le tester ?

  1. Sauvegardez le code ci-dessus dans un fichier index.html.
  2. Ouvrez ce fichier dans votre navigateur web. Vous devriez voir un flux vidéo de votre webcam.
  3. Imprimez le marqueur HIRO. Vous pouvez le trouver facilement en cherchant "AR.js HIRO marker" sur Google Images ou en utilisant ce lien direct : https://raw.githubusercontent.com/AR-js-org/AR.js/master/data/images/HIRO.png.
  4. Tenez le marqueur imprimé devant votre webcam. Un cube rouge devrait apparaître au-dessus du marqueur !

Interaction et Personnalisation

Maintenant que nous avons une scène AR fonctionnelle, rendons-la plus intéressante en ajoutant un modèle 3D et une animation.

Utiliser des modèles GLTF

Les modèles GLTF (GL Transmission Format) sont le format recommandé pour les scènes 3D sur le web en raison de leur efficacité et de leur capacité à inclure des informations complètes (géométrie, textures, animations). A-Frame les charge facilement avec le composant a-gltf-model.

Pour cette démonstration, nous allons utiliser un modèle GLTF simple. Vous pouvez trouver des modèles GLTF gratuits sur des plateformes comme Sketchfab ou GitHub (par exemple, le dépôt "glTF-Sample-Models").

Ajouter une animation

A-Frame permet d'ajouter des animations déclaratives à n'importe quelle entité. Nous allons faire tourner notre modèle 3D.

<!DOCTYPE html>
<html>
  <head>
    <title>Modèle 3D animé sur Marqueur AR</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <!-- Inclure le composant A-Frame Extras pour certaines animations plus avancées ou fonctionnalités -->
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v7.2.0/dist/aframe-extras.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <style>
      body { margin: 0; overflow: hidden; }
    </style>
  </head>
  <body>
    <a-scene embedded arjs="sourceType: webcam; debugUIEnabled: false;">
      <a-marker preset="hiro">
        <!-- Notre modèle 3D GLTF -->
        <a-gltf-model
          src="https://cdn.glitch.com/b971c26b-67a5-43a0-8332-6ddb6d1774ee%2FDuck.gltf?v=1566415779774"
          scale="0.05 0.05 0.05"
          position="0 0.1 0"
          rotation="0 0 0"
        >
          <!-- Animation de rotation sur l'axe Y -->
          <a-animation
            attribute="rotation"
            to="0 360 0"
            dur="4000"
            easing="linear"
            repeat="indefinite"
          ></a-animation>
        </a-gltf-model>
      </a-marker>

      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

Explication du nouveau code :

  • <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v7.2.0/dist/aframe-extras.min.js"></script> : Nous ajoutons A-Frame Extras, une collection utile de composants et systèmes A-Frame. Bien que non strictement nécessaire pour cet exemple d'animation simple, elle est très utile pour des fonctionnalités comme les mouvements de caméra FPS, des animations plus complexes, etc.
  • arjs="sourceType: webcam; debugUIEnabled: false;" : L'option debugUIEnabled: false désactive l'interface de débogage d'AR.js qui peut apparaître en bas à gauche, pour une expérience plus propre.
  • <a-gltf-model src="..." scale="0.05 0.05 0.05" position="0 0.1 0"> :
    • src pointe vers l'URL de notre modèle GLTF (ici, un canard).
    • scale : Les modèles 3D peuvent être de tailles très différentes. Il est souvent nécessaire d'ajuster l'échelle.
    • position="0 0.1 0" : Le modèle est légèrement élevé au-dessus du marqueur.
  • <a-animation attribute="rotation" to="0 360 0" dur="4000" easing="linear" repeat="indefinite"></a-animation> :
    • Ce composant a-animation est imbriqué dans l'entité a-gltf-model, ce qui signifie qu'il animera cette entité.
    • attribute="rotation" : L'attribut que nous voulons animer est la rotation.
    • to="0 360 0" : La rotation finale sera de 360 degrés sur l'axe Y (rotation complète autour du haut/bas).
    • dur="4000" : La durée de l'animation est de 4000 millisecondes (4 secondes).
    • easing="linear" : L'animation se déroule à une vitesse constante.
    • repeat="indefinite" : L'animation se répète sans fin.

En sauvegardant ce code et en le testant avec le marqueur HIRO, vous devriez voir un modèle 3D de canard (ou tout autre modèle GLTF que vous choisissez) flotter et tourner au-dessus du marqueur.

Au-delà des Bases : Considérations Avancées

Une fois les fondations posées, plusieurs avenues s'offrent à vous pour enrichir vos expériences AR.

Marqueurs d'image (Image Tracking)

Plutôt que des motifs génériques comme HIRO, AR.js permet d'utiliser n'importe quelle image comme marqueur. Cela nécessite :

  1. Préparer votre image : AR.js a besoin d'un fichier de données .fset ou .patt généré à partir de votre image. Des outils en ligne (comme le générateur d'AR.js) permettent de le faire.
  2. Utiliser <a-marker type="pattern" url="path/to/your/image.patt"> ou <a-marker type="image" src="path/to/your/image.fset"> dans votre scène. Le type="image" est généralement plus performant pour la reconnaissance de photos complexes.

Performance et Optimisation

  • Modèles 3D légers : Utilisez des modèles 3D optimisés pour le web. Réduisez le nombre de polygones, de textures et de matériaux. Les fichiers GLB (version binaire du GLTF) sont souvent préférables.
  • Textures compressées : Utilisez des formats d'image efficaces (JPG, PNG compressé, WebP) et réduisez leur résolution si possible.
  • Limitez les effets : Les lumières complexes, les ombres en temps réel et les effets de post-traitement peuvent impacter les performances.
  • Test sur mobile : Les performances sur mobile sont souvent le goulot d'étranglement. Testez systématiquement sur différents appareils.

Débogage

AR.js offre quelques outils de débogage :

  • debugUIEnabled: true sur le composant arjs affiche une petite interface pour surveiller le FPS et la détection.
  • debug: true peut également être utilisé sur le composant a-scene pour des informations de débogage d'A-Frame.

Compatibilité Navigateur et Appareils

Le Web AR est en constante évolution. La compatibilité peut varier :

  • Android : Généralement bien pris en charge sur Chrome.
  • iOS : Safari prend en charge WebRTC et WebGL, rendant AR.js compatible. Cependant, des limitations peuvent exister (par exemple, des problèmes avec la caméra frontale sur certains modèles).
  • Bureau : Fonctionne avec une webcam, mais l'expérience est moins "immersive" qu'avec un smartphone.

Pour des expériences AR plus avancées (suivi de surfaces, ancres spatiales), des API comme WebXR Device API sont en cours de développement et commencent à être supportées par les navigateurs modernes. A-Frame est en train d'intégrer pleinement ces nouvelles capacités.

Bonnes Pratiques

  • Clarté du marqueur : Assurez-vous que votre marqueur physique est bien imprimé, plat, non brillant et bien éclairé pour une détection optimale.
  • Feedback utilisateur : Indiquez à l'utilisateur quand il doit placer le marqueur, quand l'AR est prête, etc. (par exemple, un texte "Pointez votre caméra vers le marqueur").
  • Expérience progressive : Commencez simple et ajoutez des fonctionnalités complexes une fois que les bases sont solides.
  • Hébergement sécurisé (HTTPS) : Pour accéder à la caméra, votre site doit être servi via HTTPS. C'est une exigence pour WebRTC. Les outils comme Glitch, GitHub Pages ou Netlify offrent cela par défaut.
  • Évitez les conflits de caméra : Assurez-vous qu'aucune autre application n'utilise la caméra de l'appareil lorsque vous testez votre expérience AR.

Conclusion et Résumé

Félicitations ! Vous avez parcouru les étapes essentielles pour créer vos premières expériences de Réalité Augmentée sur le web avec A-Frame et AR.js.

Nous avons vu que :

  • Le Web AR permet des expériences immersives directement via le navigateur.
  • A-Frame fournit un cadre déclaratif pour construire des scènes 3D/AR.
  • AR.js est la bibliothèque légère et performante qui dote A-Frame des capacités de détection de marqueurs et de passthrough de la caméra.
  • La création d'une scène AR implique l'utilisation du composant arjs sur la balise <a-scene> et de l'entité <a-marker> pour ancrer le contenu 3D.
  • L'intégration de modèles 3D GLTF et d'animations enrichit considérablement l'expérience.

Le potentiel du Web AR est immense, allant des applications marketing interactives à l'éducation, en passant par le divertissement. A-Frame et AR.js rendent cette technologie accessible même aux débutants en 3D.

Nous vous encourageons vivement à expérimenter avec différentes formes de contenu 3D, à explorer les options d'interactivité via JavaScript et à tester la reconnaissance d'images. Dans les prochaines leçons, nous explorerons d'autres facettes des expériences immersives, y compris la Réalité Virtuelle plus en profondeur et des interactions plus complexes. Continuez à explorer et à créer !