Dans ce tutoriel, nous allons vous guider pas à pas dans la création d'une application web en réalité augmentée (AR) simple.
PXL_20240918_150111160_2.mp4
L'objectif est de voir ensemble toute la chaine technique qui permet à un projet d'exister en tant que page web. Nous verrons aussi comment écrire des informations sur des puces RFID.
Nous utiliserons A-Frame, un framework web open-source pour créer des expériences VR/AR, et AR.js, une bibliothèque JavaScript qui permet d'intégrer des fonctionnalités AR dans les applications web.
Notre objectif sera d'afficher le texte "Hello" sur un marqueur AR de type code-barres. Puis de customiser le contenu.
Ce petit projet comprend aussi la réalisation d'une "étiquette" / "porte clé".
Nous allons utiliser différents outils gratuits :
- github : pour versionner votre code et hébérger gratuitement votre projet.
- Firebase Studio : qui est un IDE (integrated development environment) qui permet d'écrire du code et qui se connecte à github pour hierarchiser les changements dans notre code.
- nfctools : qui est une application pour android ou iOS et qui nous permettra d'écrire de l'information sur notre sticker RFID.
-
avoir un compte Github
-
avoir un compte Gmail
-
Un ordinateur
-
Un éditeur de code notre outil sera : Firebase Studio
-
Un navigateur web (Chrome, Firefox ...)
-
Un smartphone avec un navigateur web (Chrome, Firefox ...)
- un petit carré de carton bois aux bords arrondis
- un sticker découpé sur vinyle mat
- un petit cordon métallique avec une attache
- une petite puce RFID
Pour l'assemblage, rien de plus simple :
- coller le sticker sur le carré en carton bois sur l'emplacement délimité par la gravure.
- coller la puce RFID, centrée, au dos de ce carré.
- dévisser l'attache et faite la passer dans le trou.
et voilà ! on est prêts à passer sur la partie numérique !
Si vous voulez plus d'infos sur cette partie là
📽️Speedrun video :
- ce tuto parait long ...
- en vrai non, ça prend moins de 10 minutes !
speedrun_edit_4.mp4
- Créer un compte GitHub : Si vous n'en avez pas déjà un, rendez-vous sur https://github.com/signup?source=login et créez un compte.
☢️ Le nom d'utilisateur que vous choisissez sera utilisé pour l'adresse qu'il faudra tapper pour voir votre projet. Choisissez un nom court ! sans espaces, sans caractères spéciaux (accents, cédille, etc.)
- Créer un nouveau dépôt : Une fois connecté, cliquez sur le bouton "New repository".
- Donnez un nom à votre dépôt (par exemple, "microProjetAr"),
- (Ajoutez une description facultative),
- Activer l'option Add README.
- et cliquez sur "Create repository".
Nous allons maintenant configurer GitHub Pages, pour permettre à notre projet d'être servi par les serveurs de github lorsque l'on rentre l'adresse :
https://[votre-nom-utilisateur].github.io/[votre-depot]
- Accéder aux paramètres : Dans votre dépôt, cliquez sur l'onglet "Settings", puis sur l'onglet "Pages"
- Sélectionner la branche : Dans la section "GitHub Pages", sélectionnez la branche "main" (ou la branche principale de votre dépôt).
- Enregistrer les modifications : Cliquez sur le bouton "Save". Votre site GitHub Pages sera maintenant accessible à l'adresse https://[votre-nom-utilisateur].github.io/[microprojetAr].
Si vous revenez sur la page d'accueil de votre projet, vous remarquerez au bout de quelques minutes, que certains éléments ont changés. Un déploiement est maintenant disponible !
Toute l'infrastructure nécessaire pour héberger votre projet est donc bien en place, il suffit maintenant d'ajouter du contenu.
Rendez-vous sur Firebase Studio et connectez-vous.
Problème de contrôle parental? Ou de restriction d'âge?
Et à partir de celle-la, il faut revenir en arrière (mais c'est important de visiter cette page)
Importer le dépôt : Utilisez l'option pour importer votre dépôt GitHub.
Copiez l'adresse du dépot créé précédemment.
Configurer le projet pour un usage de développement web.
-
Créer un dossier ".idx":
-
Dans ce dossier, créer un fichier nommé "dev.nix"
Pour arriver à ce résultat :
-
Copier le code de configuration de l'environnement de développement dans le fichier "dev.nix" que vous venez de créer. (Ce fichier va nous permettre de tester notre code directement dans Firebase Studio et aussi de tester sur notre téléphone).
# To learn more about how to use Nix to configure your environment # see: https://developers.google.com/idx/guides/customize-idx-env { pkgs, ... }: { # Which nixpkgs channel to use. channel = "stable-23.11"; # or "unstable" # Use https://search.nixos.org/packages to find packages packages = [ pkgs.nodejs_20 pkgs.python3 ]; # Sets environment variables in the workspace env = {}; idx = { # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id" extensions = [ # "vscodevim.vim" ]; # Enable previews and customize configuration previews = { enable = true; previews = { web = { command = ["python3" "-m" "http.server" "$PORT" "--bind" "0.0.0.0"]; manager = "web"; }; }; }; # Workspace lifecycle hooks workspace = { # Runs when a workspace is first created onCreate = { # Example: install JS dependencies from NPM # npm-install = "npm install"; # Open editors for the following files by default, if they exist: default.openFiles = [ "style.css" "main.js" "index.html" ]; }; # Runs when the workspace is (re)started onStart = { # Example: start a background task to watch and re-build backend code # watch-backend = "npm run watch-backend"; }; }; }; }
Votre environnement de travail devrait ressembler à ceci :
Il ne vous reste plus qu'à cliquer sur le bouton "Rebuild Environment" et c'est bon !
En theorie Firebase Studio devrait se recharger pour prendre en compte les changements specifies dans le dev.nix mais si ce n'est pas le cas, utilisez la palette avec Ctrl + Shift + P (Cmd + Shift + P sur Mac) et cherchez "rebuild" pour trouver l'option "rebuild environment".
Créer un fichier index.html : Dans votre Firebase Studio, créez un fichier nommé "index.html".
Ajouter le code HTML : Copiez et collez le code HTML suivant dans votre fichier index.html :
<!DOCTYPE html>
<html>
<head>
<title>Ma première app AR</title>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded
arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; trackingMethod: best ; changeMatrixMode: modelViewMatrix;"
renderer="sortObjects: true; antialias: true; colorManagement: true; logarithmicDepthBuffer: true;"
vr-mode-ui="enabled: false"
smooth=" true" smoothCount="5" smoothTolerance=".05" smoothThreshold="5"
sourceWidth="800" sourceHeight="600" displayWidth="1280" displayHeight="720">
<a-marker type='barcode' value='0'>
<a-text value="Hello !"
side="double" position = "0 0 -1" rotation="270 0 0"
width="8"
color="red" align="center" >
</a-text>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>Ce code créer une expérience simple de réalité augmentée (RA) en utilisant A-Frame et AR.js. Décomposons ce que fait chaque partie :
Si vous n'êtes pas à l'aise et ne connaissez pas du tout la manière dont du code html fonctionne cliquez sur le petit triangle pour déplier une explication des bases de la syntaxe html
💡 les bases html
Une page HTML est comme un sandwich. Elle a besoin d'un pain du haut et d'un pain du bas pour contenir la garniture !
Le pain du haut et du bas, ce sont les balises <html> et </html>. Elles indiquent au navigateur que le contenu entre ces balises est du code HTML.
Deux parties principales : À l'intérieur du "sandwich HTML", on trouve deux parties :
La tête (<head> et </head>) : C'est comme les informations sur l'emballage du sandwich. On y met des informations importantes pour le navigateur, mais qui ne sont pas affichées directement à l'utilisateur.
Par exemple :
-
Le titre de la page
<title>qui décrit au navigateur quoi afficher dans la barre d'onglets. -
Des liens vers des fichiers CSS pour charger la mise en page
-
Des liens vers des fichiers JavaScript pour les fonctionnalités interactives
Le corps (<body> et </body>) : C'est la garniture du sandwich ! C'est le contenu visible de la page web : texte, images, vidéos, etc.
La syntaxe et donc l'interprétation par le navigateur du code html repose sur des balises ouvrantes et fermantes :
- La balise ouvrante (par exemple
<p>) dit au navigateur : "Attention, on commence un paragraphe !" - La balise fermante (par exemple
</p>) dit : "Voilà, le paragraphe est terminé."
Tout le contenu entre la balise ouvrante et la balise fermante est considéré comme faisant partie de cet élément.
Exemple :
<html>
<head>
<title>Ma page web</title>
</head>
<body>
<h1>Bienvenue !</h1>
<p>Ceci est un paragraphe de texte.</p>
</body>
</html>Dans cet exemple :
<html>ouvre la page HTML et</html>la ferme.<head>ouvre la section d'en-tête et</head>la ferme.<title>ouvre le titre de la page et</title>le ferme.<body>ouvre le corps de la page et</body>le ferme.<h1>ouvre un titre de niveau 1 et</h1>le ferme.<p>ouvre un paragraphe et</p>le ferme.
Ici nous avons une structure HTML classique : Le code met en place une page HTML basique avec les sections et .
Dans la partie <head>, nous ajoutons :
-
le titre de l'expérience
<title>Ma première app AR</title>
-
la Bibliothèque A-Frame : Il inclut la bibliothèque A-Frame (aframe.min.js) qui est un framework JavaScript permettant de créer des expériences de réalité virtuelle (RV) et de RA en utilisant du HTML. Une bibliothèque est simplement du code que l'on ammène dans le projet pour ajouter des fonctionnalités supplémentaires. Un framework est une bibliothèque qui nécessite de respecter certaines regles pour bien marcher, mais en echange un framework est plus puissante qu'une bibliothèque normale.
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
-
la Bibliothèque AR.js : Il inclut la bibliothèque AR.js (aframe-ar.js) qui ajoute des capacités de RA à A-Frame.
<script src="https://raw.githubusercontent.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.js"></script>
Dans la partie <body>, et c'est ici que tout ce joue pour le contenu visible par l'utilisateur. Nous ajoutons :
-
la scène RA : L'élément
<a-scene>crée la scène de RA.<a-scene embedded arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; trackingMethod: best ; changeMatrixMode: modelViewMatrix;" renderer="sortObjects: true; antialias: true; colorManagement: true; physicallyCorrectLights; logarithmicDepthBuffer: true;" vr-mode-ui="enabled: false" smooth=" true" smoothCount="5" smoothTolerance=".05" smoothThreshold="5" sourceWidth="800" sourceHeight="600" displayWidth="1280" displayHeight="720"> <!-- contenu de l'expérience AR avec d'autres balises --> </a-scene>
Remarquez que dans la balise ouvrante
<a-scene>nous ajoutons beaucoup d'options (qui s'appellent attributs en html) pour configuer la manière dont la scène va s'afficher.💡 les détails des options de configuration de l'attribut arjs
- *embedded* : Cet attribut indique à A-Frame d'intégrer la scène dans la page HTML.- arjs : Cet attribut configure AR.js
- sourceType: webcam : Utilise la webcam de l'appareil comme source vidéo.
- detectionMode: mono_and_matrix : Détecte à la fois les images cibles et les marqueurs de type code-barres.
- matrixCodeType: 3x3 : Spécifie que le type de code-barres utilisé est un code-barres matriciel 3x3.
- trackingMethod: best : Utilise la meilleure méthode de suivi disponible.
- changeMatrixMode: modelViewMatrix : Mode de changement de matrice pour le suivi.
- vr-mode-ui="enabled: false" : Désactive l'interface utilisateur du mode VR.
- renderer. Configure le rendu de la scène avec des options pour le tri des objets, l'antialiasing, la gestion des couleurs, etc.
- smooth : Active le lissage du mouvement de la caméra.
- arjs : Cet attribut configure AR.js
-
Le marqueur : L'élément
<a-marker>définit un marqueur de type code-barres avec la valeur '2'. Lorsque la caméra détecte ce marqueur, le contenu à l'intérieur de la balise sera affiché en RA.<a-marker type='barcode' value='0'> <!-- ajouter du contenu qui sera visible par l'utilisateur et donc ancré sur notre marqueur --> </a-marker>
Ici la valeur 9 correspond à un motif précis qui a été prédécoupé pour vous à la découpeuse de stickers. Avec la technique que nous utilisons il existe 64 motifs différents qui peuvent être détectés en même temps par arjs.
-
Un texte : L'élément crée un texte en 3D qui sera affiché au-dessus du marqueur. Le texte est "Hello !", de couleur rouge et centré.
<a-text value="Hello !" side="double" position = "0 0 -1" rotation="270 0 0" width="8" color="red" align="center" > </a-text>
💡 les détails des attributs de la balise a-text
- *value* : Le texte à afficher. - *side=double* : permet d'afficher le texte quelque soit l'angle sous lequel on le regarde. - *position="0 0 -1" : la position xyz du centre du texte par rapport au centre du marqueur. - *rotation="270 0 0"* : - *width="8"* : la largeur du texte. - *color="red"* : la couleur du texte. - *align="center"* : l'alignement du texte.
-
Caméra : L'élément
<a-entity camera>définit la caméra de la scène, le fonctionnement par défaut nous convient parfaitement, mais il est possible d'ajouter des fonctionalités comme par exemple l'interaction via l'orientation du regard ('gaze' interaction).
En résumé, ce code crée une expérience de RA où un texte apparaît dans un esapce 3D lorsque le marqueur code-barres 0 est détecté par la caméra.
-
Enregistrer les modifications : Enregistrez votre fichier index.html.
-
Tester votre projet : Affichez la webview de votre projet.
Pour ouvrir la preview de votre app, cherchez "web" dans la palette pour trouver "Show Web Preview". (rappel: la palette c'est
Ctrl/Cmd + Shift + P).
Vous pouvez alors visionner votre page en plein écran en cliquant sur le petit icône en haut à droite.
Cela ouvrira votre expérience dans un nouvel onglet sur votre ordinateur. A ce stade vous devriez voir : une page web vous montrant vous !
Si vous montrez le marqueur à la caméra vous devriez voir ceci :
Votre projet fonctionne donc dans l'éditeur et avec la caméra de votre ordinateur.
Vous pouvez maintenant le tester sur votre smartphone. Il vous suffit de vous rendre sur la page que vous venez d'ouvrir.
Pour cela vous pouvez cliquer sur l'icône "lien" en haut à droite à côté de l'icône pour ouvrir dans une nouvelle fenêtre. Scannez le qr code et vous voilà avec la page chargée sur votre téléphone.
Vous pouvez ensuite répéter ces opérations en changeant le code, et en actualisant la page.
Essayer par exemple de changer le texte, sa couleur, sa taille, sa position etc.
Commiter les modifications : Utilisez les outils de versioning de Firebase Studio pour commiter vos changements et les pousser sur votre dépôt GitHub.
-
Cliquer sur le bouton source control de Firebase Studio
-
'Stager' les changements en cliquant sur le "+"
-
Ajouter un message expliquant les changements ! c'est obligatoire !
-
'Commiter' les changements en cliquant sur le bouton 'commit'
-
Synchroniser les changements en cliquant sur le bouton 'commit'
Cette dernière opération va envoyer vos changements à votre dépot github et du coup mettre à jour la page mise en ligne.
Votre expérience est maintenant déployée à l'adresse : https://[votre-nom-utilisateur].github.io/[votre-depot]
✨ Félicitations ! ✨ Vous avez créé votre première application AR. Vous pouvez maintenant personnaliser votre application en modifiant le texte, en ajoutant des modèles 3D, et en expérimentant avec différentes fonctionnalités d'A-Frame et AR.js.
Note : Ce tutoriel est une introduction de base. Pour approfondir vos connaissances, consultez la documentation officielle d'A-Frame et AR.js.
Notre but est de programmer notre sticker RFID pour que lorsque nous approchons notre téléphone, celui-ci va nous proposer d'ouvrir la page web hébergeant notre projet.
Pour cela nous allons utiliser NFCTools qui est gratuit et qui est disponible pour Android ou iOS?.
- Choisir l'onglet "Ecrire" et sélectionner "ajouter un enregistrement"
- Choisir "URL/URI"
- Entrer l'adresse de votre page puis valider
- Vous pouvez maintenant cliquer sur le bouton "Ecrire" sous le champ "Plus d'options"
- Vous devrier voir cet écran vous demandant d'approcher votre smartphone du sticker.
- Une fois que vous avez réussi à détecter votre sticker, l'écriture devrait s'effectuer
Normalement c'est bon ! Vous pouvez fermer NFCTools et tester !
Un cours entier en anglais est disponible sur le site de l'ateliernum à cette adresse : https://github.com/b2renger/Introduction_A-frame#introduction_a-frame
Personnaliser l'apparence : Ajouter d'autres éléments, modifier les couleurs, les tailles et les positions des éléments.
Ajouter des modèles 3D : Importer des modèles 3D dans votre scène.
Utiliser d'autres types de marqueurs : Explorer les différents types de marqueurs AR.
Créer des interactions : Ajouter des événements et des interactions à votre application.
Mais si vous êtes arrivés ici vite vous méritez un peu d'aide avec des templates pour ajouter une image, un modèle 3D ou une vidéo.
Vous pouvez télécharger un zip avec : une image, un modèle 3D et une vidéo à cette adresse.
Les assets sont des fichiers qui peuvent être utilisés dans votre application, cela peut-être : des images, des modèles 3D, des sons, des vidéos.
Nous sommes dans un contexte web du coup il faut que ces fichiers soient légers pour ce charger vite et optimisés.
-
prévoyez des images et vidéos dans une résolution 1920x1080 pixels maximum
- pour les vidéos encodés en H.264 et au format mp4
- pour les images au format png ou jpeg.
-
pour les 3D cela sera des modèles 3D au format glb (le format du web), exportable depuis blender.
Vos fichiers ne doivent pas faire plus de 5mo (même si pour une image c'est déjà énorme).
Vous pourrez trouver un pack d'asset à cette adresse : https://github.com/b2renger/microprojetar/releases/download/v1.1/assets.zip
C'est une bonne pratique de mettre nos fichiers assets dans un dossier séparé.
Nous allons donc créer un dossier 'assets' dans firebase. C'est la même chose que lorsque nous avons créé un dossier pour notre fichier de configuration.
Vous pouvez ensuite déplacer des fichiers dans ce nouveau dossier - évitez les accents, les espaces et les caractères spéciaux dans les noms de fichiers.
Si vous avez importé tous les assets du fichiers zip, cela devrait ressembler à cela
Maintenant il faut charger les fichiers dans notre scene A-Frame.
Chaque type de fichier a mode de chargement différent. Cela se fait entre les balises ... et
Notez bien qu'il faut adapter ces nouveaux éléments au nom de nos fichiers
- Dans le paramètre "src", nous chargeons le fichier nommé "nom_du_fichier.png" qui est rangé dans le dossier asset.
- Dans le paramètre id nous choisissons un alias qui nous permettra de réferencer ce fichier sans avoir à retapper son nom.
Pour les images : Nous chargeons le fichier logo_ecole_1_coul_defonce_noir.png qui est rangé dans le dossier asset.
<a-assets>
<img id="img1" src="./assets/logo_ecole_1_coul_defonce_noir.png">
</a-assets> Pour les modèles 3D : Nous chargeons le fichier plant_modelling.glb qui est rangé dans le dossier asset.
<a-assets>
<a-asset-item id="glbTest" src="./assets/plant_modelling.glb"></a-asset-item>
</a-assets>Pour les vidéos : Nous chargeons le fichier video qui est rangé dans le dossier asset.
<a-assets>
<!--point to you *mp4 file : h264, AAC etc-->
<video src="./assets/video" muted="true" loop="true" controls="false" playsinline webkit-playsinline
type='video/mp4' id="vid"></video>
</a-assets>Les exemples fournis ci-dessous sont complets et fonctionnels, vous pouvez les copier / coller directement dans votre fichier index.html
Vous aurez besoin d'adapter la largeur "width" et la hauteur "height" de l'image selon l'aspect ratio de votre image pour qu'elle ne soit pas déformée.
<!DOCTYPE html>
<html>
<head>
<title>Ma première app AR</title>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded
arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; trackingMethod: best ; changeMatrixMode: modelViewMatrix;"
renderer="sortObjects: true; antialias: true; colorManagement: true; logarithmicDepthBuffer: true;"
vr-mode-ui="enabled: false" smooth=" true" smoothCount="5" smoothTolerance=".05" smoothThreshold="5"
sourceWidth="800" sourceHeight="600" displayWidth="1280" displayHeight="720">
<a-assets>
<img id="img1" src="./assets/logo_ecole_1_coul_defonce_noir.png">
</a-assets>
<a-marker type='barcode' value='0'>
<a-image src="#img1" rotation="270 0 0" width="1" height="2"></a-image>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>Pensez à adapter le paramètre scale en fonction des unités d'export de votre modèle.
<!DOCTYPE html>
<html>
<head>
<title>Ma première app AR</title>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded
arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; trackingMethod: best ; changeMatrixMode: modelViewMatrix;"
renderer="sortObjects: true; antialias: true; colorManagement: true; logarithmicDepthBuffer: true;"
vr-mode-ui="enabled: false" smooth=" true" smoothCount="5" smoothTolerance=".05" smoothThreshold="5"
sourceWidth="800" sourceHeight="600" displayWidth="1280" displayHeight="720">
<a-assets>
<a-asset-item id="model" src="./assets/plant_modelling.glb"></a-asset-item>
</a-assets>
<a-marker type='barcode' value='0'>
<a-entity scale=".1 .1 .1" gltf-model="#model"></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>Dans cet exemple très complexe, nous ajoutons un script javascript dans le head de la page.
Ce script permet de gérer la lecture automatique de la vidéo, quand le marqueur est détecté. Malgré cela ne marche pas à tous les coups (on parle bien ici de Safari et iOS...)
Il permet aussi de créer un chromakey, c'est à dire de rendre une couleur transparente (par exemple un fond vert, au hasard ;))
Bref il y a beaucoup de code au début !
Pensez quand même à changer les noms de fichiers et les ids pour qu'il correspondent à vos fichiers.
Il faudra aussi penser à l'aspect ratio comme pour les images avec les paramètres 'width' et 'height' de l'élément.
<!DOCTYPE html>
<html>
<head>
<title>Ma première app AR</title>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script defer>
// https://github.com/nikolaiwarner/aframe-chromakey-material
AFRAME.registerShader("chromakey", {
schema: {
src: { type: "map" },
color: {
default: { x: 0.0, y: 1.0, z: 0.0 },
type: "vec3",
is: "uniform",
},
chroma: { type: "bool", is: "uniform" },
transparent: { default: true, is: "uniform" },
},
init: function (data) {
const videoEl = data.src;
document.addEventListener("click", () => {
videoEl.play();
const entity = document.querySelector("[sound]");
// console.log(entity)
// console.log(document.querySelector("#debug-marker"))
entity.components.sound.playSound();
});
var videoTexture = new THREE.VideoTexture(data.src);
videoTexture.minFilter = THREE.LinearFilter;
this.material = new THREE.ShaderMaterial({
uniforms: {
chroma: {
type: "b",
value: data.chroma,
},
color: {
type: "c",
value: data.color,
},
myTexture: {
type: "t",
value: videoTexture,
},
},
vertexShader: `
varying vec2 vUv;
void main(void)
{
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
`,
fragmentShader: `
uniform sampler2D myTexture;
uniform vec3 color;
uniform bool chroma;
varying vec2 vUv;
void main(void)
{
vec3 tColor = texture2D( myTexture, vUv ).rgb;
float a;
if(chroma == true){
a = (length(tColor - color) - 0.5) * 7.0;
}
else {
a = 1.0;
}
gl_FragColor = vec4(tColor, a);
}
`,
});
},
update: function (data) {
this.material.color = data.color;
this.material.src = data.src;
this.material.transparent = data.transparent;
},
});
AFRAME.registerComponent("vidhandler", {
trackedElements: null,
init: function () {
this.trackedElements = document.querySelectorAll(
"a-marker[vidhandler]"
);
// console.log(this.trackedElements);
},
tick: function () {
// if(!userConsent){
// return;
// }
this.trackedElements.forEach((marker) => {
if (marker.object3D.visible) {
const vid = document.querySelector(
marker.attributes.vidreference.value
);
// console.log(vid)
if (vid.paused) {
vid.play();
}
} else {
const vid = document.querySelector(
marker.attributes.vidreference.value
);
}
});
},
});
</script>
</head>
<body>
<a-scene embedded
arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; trackingMethod: best ; changeMatrixMode: modelViewMatrix;"
renderer="sortObjects: true; antialias: true; colorManagement: true; logarithmicDepthBuffer: true;"
vr-mode-ui="enabled: false" smooth=" true" smoothCount="5" smoothTolerance=".05" smoothThreshold="5"
sourceWidth="800" sourceHeight="600" displayWidth="1280" displayHeight="720">
<a-assets>
<video id="vid" src="assets/video.mp4" autoplay="true" loop="true" preload="auto" controls="true"
muted="true" playsinline="" webkit-playsinline=""></video>
</a-assets>
<a-marker vidhandler vidreference="#vid" type="barcode" value="0">
<a-entity material="shader: chromakey; src: #vid; chroma:false; color: 0. 0. 0."
geometry="primitive: plane; width: 1.05; height: 1.05" position="0 0 0" rotation="270 0 0" side="double">
</a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>