Différences

Ci-dessous, les différences entre deux révisions de la page.

--- ressource:code:fonctionnement_de_la_realite_augmente [2025/03/27 10:36]
celine [Qu'est-ce qu'un marqueur AR et comment fonctionne-t-il avec AR.js ?]
+++ ressource:code:fonctionnement_de_la_realite_augmente [2025/03/27 12:00] (Version actuelle)
celine [Quelles technologies sont utilisées pour exécuter WebAR ?]
@@ Ligne 23: / Ligne 23: @@
 Ensemble, ces technologies permettent à WebAR de fournir des expériences AR fluides et interactives sur le web, sans nécessiter d'application dédiée.
- ==== Qu'est-ce que AR.js et comment fonctionne-t-il ?====
-AR.js est une bibliothèque JavaScript gratuite et open-source pour créer des expériences de réalité augmentée sur le web. Elle est construite sur les normes web WebGL et WebRTC, et utilise les marqueurs ARToolKit et AR.js pour permettre des expériences AR sur les pages web.
+ ====Qu'est-ce que AR.js et comment fonctionne-t-il ?====
-AR.js est conçu pour être facile à utiliser et léger, ce qui en fait un choix populaire parmi les développeurs qui souhaitent créer des expériences AR sur le web. Il est également compatible avec une large gamme de navigateurs web et d'appareils, y compris les smartphones, les tablettes et les ordinateurs de bureau. Globalement, AR.js est un outil puissant pour créer des expériences WebAR, et il est largement utilisé par les développeurs dans le secteur AR.
+**AR.js** est une bibliothèque JavaScript gratuite et open-source pour créer des expériences de réalité augmentée sur le web. Elle est construite sur les normes web WebGL et WebRTC, et utilise les marqueurs **ARToolKit** et **AR.js** pour permettre des expériences AR sur les pages web.
+**AR.js** est conçu pour être facile à utiliser et léger, ce qui en fait un choix populaire parmi les développeurs qui souhaitent créer des expériences AR sur le web. Il est également compatible avec une large gamme de navigateurs web et d'appareils, y compris les smartphones, les tablettes et les ordinateurs de bureau. Globalement, **AR.js** est un outil puissant pour créer des expériences WebAR, et il est largement utilisé par les développeurs dans le secteur AR.
 ==== Qu'est-ce qu'un marqueur AR et comment fonctionne-t-il avec AR.js ?====
-Un marqueur AR est une image ou un motif spécial qui est reconnu par la technologie AR, comme AR.js, comme un déclencheur pour une expérience AR. Lorsqu'il est utilisé avec un marqueur AR, AR.js peut permettre des expériences AR qui sont déclenchées lorsque le marqueur est détecté par l'appareil de l'utilisateur.
+**Un marqueur AR** est une image ou un motif spécial qui est reconnu par la technologie AR, comme AR.js, comme un déclencheur pour une expérience AR. Lorsqu'il est utilisé avec un marqueur AR, AR.js peut permettre des expériences AR qui sont déclenchées lorsque le marqueur est détecté par l'appareil de l'utilisateur.
-Les marqueurs AR sont utilisés pour placer des objets et du contenu virtuels dans le monde réel. AR.js utilise la caméra d'un appareil utilisateur pour identifier un marqueur AR, puis superpose le contenu virtuel sur le monde réel via la vue de la caméra. Les marqueurs AR peuvent être n'importe quelle image ou motif, mais pour AR.js, il est recommandé d'utiliser des codes QR en noir et blanc.
+**Les marqueurs AR** sont utilisés pour placer des objets et du contenu virtuels dans le monde réel. AR.js utilise la caméra d'un appareil utilisateur pour identifier **un marqueur AR**, puis superpose le contenu virtuel sur le monde réel via la vue de la caméra. **Les marqueurs AR** peuvent être n'importe quelle image ou motif, mais pour AR.js, il est recommandé d'utiliser **des codes QR en noir et blanc**.
-Lorsque le marqueur est détecté par l'appareil de l'utilisateur, l'expérience AR associée au marqueur sera déclenchée, permettant de superposer du contenu virtuel sur le monde réel. Cela peut inclure des modèles 3D, des animations ou des éléments interactifs.
+Lorsque **le marqueur** est détecté par l'appareil de l'utilisateur, l'expérience AR associée au marqueur sera déclenchée, permettant de superposer du contenu virtuel sur le monde réel. Cela peut inclure des modèles 3D, des animations ou des éléments interactifs.
 [[https://github.com/artoolkit/ARToolKit5/tree/master/doc/patterns/Matrix%20code%203x3%20(72dpi)|Liste des marqueurs ]]
-=== Tableau des marqueurs ===
+==== ==== Tableau des marqueurs ==== ====
 Lorsque l'on utilise des marqueurs dans son fichier index.html il faut adapter le code en fonction de la taille des marqueurs.
@@ Ligne 61: / Ligne 65: @@
 {{:ressource:code:ex_code_html.png?direct&400|}}
@@ Ligne 67: / Ligne 76: @@
 Ce code HTML est une page web simple qui utilise A-Frame et AR.js pour créer une application de réalité augmentée (AR). Voici une explication détaillée de chaque partie du code :
-<head>
+<**head**>
-<title> : Définit le titre de la page web qui s'affiche dans l'onglet du navigateur. Ici, le titre est "Ma première app AR".
+<**title**> : Définit le titre de la page web qui s'affiche dans l'onglet du navigateur. Ici, le titre est "Ma première app AR".
-<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>:
+<**script** src="https://aframe.io/releases/1.7.0/aframe.min.js"></**script**>:
 Charge la bibliothèque A-Frame, un framework pour créer des expériences de réalité virtuelle (VR) et augmentée (AR) en utilisant des éléments HTML.
-<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script> :
+<**script** src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></**script**> :
-Charge AR.js, une extension d'A-Frame qui permet d'ajouter des fonctionnalités de réalité augmentée, comme la reconnaissance de marqueurs.
+**Charge AR.js**, une extension d'A-Frame qui permet d'ajouter des fonctionnalités de réalité augmentée, comme la reconnaissance de marqueurs.
-<body>
+<**body**>
-<a-scene>:
+<**a-scene**>:
-C'est l'élément principal d'A-Frame qui représente la scène 3D. Il contient divers attributs pour configurer la scène AR :
+C'est l'élément **principal** d'A-Frame qui représente la scène 3D. Il contient divers attributs pour configurer la scène AR :
-embedded: Indique que la scène est intégrée dans la page web plutôt que d'occuper tout l'écran.
+**embedded**: Indique que la scène est intégrée dans la page web plutôt que d'occuper tout l'écran.
-arjs: Configure les paramètres spécifiques à AR.js :
+**arjs**: Configure les paramètres spécifiques à AR.js :
     - sourceType: webcam` : Utilise la webcam comme source vidéo.
     - detectionMode: mono_and_matrix` : Détecte à la fois les marqueurs simples et les matrices de marqueurs.
@@ Ligne 94: / Ligne 103: @@
     - changeMatrixMode: modelViewMatrix` : Change le mode de matrice pour le rendu.
-renderer: Configure les paramètres du rendu :
+**renderer**: Configure les paramètres du rendu :
     - sortObjects: true : Trie les objets pour un rendu correct.
     - antialias: true : Active l'anti-aliasing pour des bords plus lisses.
@@ Ligne 100: / Ligne 109: @@
     - logarithmicDepthBuffer: true : Utilise un tampon de profondeur logarithmique pour améliorer le rendu des objets proches et éloignés.
-vr-mode-ui="enabled: false": Désactive l'interface utilisateur du mode VR.
+**vr-mode-ui**="enabled: false": Désactive l'interface utilisateur du mode VR.
+**smooth**: Lisse les mouvements de la caméra pour une expérience plus fluide
-smooth: Lisse les mouvements de la caméra pour une expérience plus fluide
+**smoothCount, moothTolerance, smoothThreshold** : Paramètres pour contrôler le lissage.
-smoothCount, moothTolerance, smoothThreshold : Paramètres pour contrôler le lissage.
+**sourceWidth, sourceHeight, displayWidth, displayHeight**: Définit les dimensions de la source vidéo et de l'affichage.
-sourceWidth, sourceHeight, displayWidth, displayHeight: Définit les dimensions de la source vidéo et de l'affichage.
+**Ce code configure une scène AR de base** qui utilise la webcam pour détecter des marqueurs et afficher des objets 3D en réalité augmentée.
-Ce code configure une scène AR de base qui utilise la webcam pour détecter des marqueurs et afficher des objets 3D en réalité augmentée. Pour une application complète, vous devrez ajouter des éléments 3D (comme `<a-box>`, `<a-sphere>`, etc.) à l'intérieur de la balise `<a-scene>`.
+Pour une application complète, vous devrez ajouter des éléments 3D (comme `<a-box>`, `<a-sphere>`, etc.) à l'intérieur de la balise `<a-scene>`.
 Il est aussi possible d'ajouter du son, une vidéo bref presque tout est possible de faire.
@@ Ligne 115: / Ligne 126: @@
 [[https://aframe.io/docs/1.7.0/primitives/a-sound.html|Lien externe]]
-Se référencer à [[https://aframe.io/]]|Lien externe]]
+__**Se référencer à**__ [[https://aframe.io/]]|Lien externe]]