AR Lunettes est une application web qui superpose en temps réel une paire de lunettes 3D sur le visage d’un utilisateur via sa webcam. Le projet combine la détection de visage fournie par JeelizFaceFilter et le rendu 3D via Three.js.
La solution est optimisée en utilisant deux canvas distincts :
- Un pour la capture vidéo et le tracking,
- Un autre pour le rendu 3D transparent.
-
Tracking en temps réel :
Extraction des coordonnées, de la rotation (pitch, yaw) et de l’échelle du visage grâce à JeelizFaceFilter. -
Rendu AR optimisé :
Utilisation de deux canvas pour séparer le traitement vidéo du rendu Three.js, améliorant ainsi la stabilité et les performances. -
Correction d’ancrage :
Deux pivots (un global et un interne) permettent d’appliquer les transformations du tracking tout en corrigeant la rotation (annulation du roll) afin que l’overlay (lunettes) reste bien aligné aux yeux. -
Interpolation (lerp) :
Lissage des mouvements pour offrir une animation fluide et naturelle, avec des facteurs d’interpolation ajustables.
-
Clonez le repository :
git clone https://github.com/alexiscrocilla/Optic-VUEJS
-
Structure du projet :
-
Racine du projet: Contient la configuration générale (fichiers de configuration TypeScript, package.json, etc.), l'index principal et les dossiers liés au développement (par exemple, .idea, .vscode). -
src et public: Regroupent le code source de l'application (notamment pour la partie Vue.js) et les fichiers publics. -
V0.2: Contient la version actuelle de l'application AR Lunettes.V0.2/index.html: Le fichier d'initialisation pour l'AR.V0.2/models: Les modèles 3D des lunettes (ex. lunettes.glb, lunettes2.glb) ainsi que les fichiers de configuration pour le tracking (dossier neuralNets).
-
Base de données: Réunit les scripts et fichiers de données (ex. color_map.json, glasses_data.json) pour la gestion des mappings et l'importation des données.
-
-
Lancez un serveur HTTP/HTTPS (par exemple avec http-server) :
npx http-server -c-1
-
Ouvrez l’URL fournie par le serveur dans un navigateur compatible WebGL et autorisez l’accès à la webcam.
- Une fois la page chargée, la webcam s’active et le flux vidéo s’affiche en arrière-plan.
- JeelizFaceFilter détecte le visage et fournit des données de tracking (position, rotation et échelle).
- Ces données sont utilisées par Three.js pour mettre à jour la position et l’échelle d’un modèle 3D de lunettes.
- Grâce à une architecture à deux pivots, la rotation du visage est appliquée globalement, tandis qu’un pivot interne annule la rotation autour de l’axe z pour garder les lunettes bien alignées sur les yeux.
- Un système d’interpolation lisse les transitions pour que les mouvements soient fluides et naturels.
-
Calibration :
Vous pouvez ajuster les multiplicateurs appliqués à la position et à l’échelle (dans la fonction de mise à jour) pour adapter le rendu aux dimensions du visage. -
Lissage adaptatif :
Les coefficients d’interpolation (lerp) sont configurables (facteurs pour la position, la rotation et l’échelle) et peuvent être adaptés en fonction des performances et de la fluidité souhaitées. -
Optimisation du modèle :
Assurez-vous que le modèle 3D des lunettes est optimisé (nombre de polygones réduit, textures compressées) pour garantir des performances optimales. -
Résolution :
Pour améliorer la qualité et la performance, vous pouvez intégrer le helper JeelizResizer.js afin d’adapter la résolution du canvas à la taille d’affichage réelle.
-
index.html :
Contient le code d’initiation de JeelizFaceFilter et de Three.js, la gestion de deux canvas (un pour la vidéo et un pour le rendu 3D), et la logique de tracking avec interpolation. -
/neuralNets/ :
Dossier contenant les fichiers du réseau neuronal (ex.NN_DEFAULT.json). -
/models/ :
Dossier contenant le modèle 3D des lunettes (ex.lunettes.glb).
Ce projet est distribué sous licence Apache-2.0.
Voir le fichier LICENSE pour plus de détails.
Note : Pour une démonstration complète, consultez la version web 'https://lia-one.vercel.app/'.