Réalité augmentée
Une vidéo valant 1000 mots, voici quelques exemples de l'utilisation de la réalité augmentée.
Codename: Urban Legends le prochain jeu en réalité augmentée de NIANTIC
KEMTAI : la réalité virtuelle au service de l'activité physique
The Ghost Pacer : votre partenaire holographique
Snap Spectacles : une paire de lunettes de réalité augmentée propulsée par Snapchat Lens Studio
Dans ces différents contextes d'utilisation, la réalité augmentée consiste à superposer des éléments virtuels (image, vidéo, modèle 3D, ...)
- à un emplacement donné repéré par un marqueur, élément caractéristique reconnu dans le flux vidéo, ou par des coordonnées GPS.
- à la surface du corps à l'aide du suivi du visage ou du corps entier dans le flux vidéo
AR.js
Pour implémenter des solutions de réalité augmentée basées sur des marqueurs ou des coordonnées GPS, nous allons utiliser le framework Web AR.js qui s'appuie sur A-Frame pour l'intégration d'éléments 3D dans le flux vidéo.
Marqueurs de type barcode
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Marker Based AR</title>
<!-- A-Frame JavaScript library -->
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<!-- AR.js JavaScript library for A-Frame -->
<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; debugUIEnabled: true; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
<a-marker type="barcode" value="0">
<a-box position="0 0.5 0" material="color: yellow; opacity: 0.5;"></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
MindAR
Cette bibliothèque est une alternative à AR.js dans la mesure où elle propose deux modes de tracking :