Article original : How to use Augmented Reality with JavaScript — a case study
Par Apurav Chauhan
Dans cette expérience, je parle de la manière dont la Réalité Augmentée avec JS peut être utilisée pour rendre l'apprentissage plus amusant et interactif. L'étude de cas discutera du processus de conception, de la mise en œuvre et des retours d'enfants dans la tranche d'âge de 2 à 10 ans.
Éducation et apprentissage interactif des alphabets utilisant la Réalité Augmentée et Javascript
La Réalité Augmentée (AR) m'a toujours attiré, et dans cette expérience, j'essaie de créer une application AR pratique. Le cas d'utilisation que nous allons couvrir est l'éducation primaire et nous verrons comment nous pouvons rendre l'apprentissage amusant et interactif. Nous allons créer une application pour apprendre les alphabets dans trois langues principalement : le Pendjabi, l'Hindi et l'Anglais.
L'application Javascript de Réalité Augmentée n'a actuellement pas de détection de plan. Pour simplifier, nous superposons simplement nos objets sur la vue avec un suivi de mouvement 3D.
OBJECTIF FINAL
Ci-dessous une démonstration de notre expérience AR Javascript. Vous pouvez télécharger et jouer avec l'application ici.
Le code complet a été open-sourcé à des fins d'apprentissage et est disponible ici.
Alphabets en réalité augmentée et javascript pour rendre l'éducation plus amusante et engageante
Le Processus de Conception
Pour rendre l'apprentissage amusant et sans effort, je m'appuie sur les points suivants :
- Participation active de l'enfant
- Activité physique de l'enfant au lieu de rester assis à un seul endroit
- Un peu d'effort pour trouver les alphabets.
- UX/UI intuitive.
Le thème central de l'application sera assez similaire à la célèbre application de réalité augmentée Pokemon Go. Seuls deux composants principaux seront impliqués : la Vue Caméra et les Alphabets.
UX des Alphabets pour le Jeu AR
Itération 1
Alphabets 2D en Anglais, Hindi et Pendjabi pour notre Jeu de Réalité Augmentée JS
Dans notre première itération, nous avons des alphabets 2D que nous allons essayer de fusionner dans notre vue caméra. L'idée de l'application de Réalité Augmentée (AR) est d'avoir des enfants qui trouvent ces lettres de l'alphabet dans une pièce ou un espace autour d'eux. Le prototype après la fusion de l'espace avec des alphabets 2D ressemblera à ceci :
Capteur de mouvement AR avec objet 2D
Comme vous pouvez le voir ci-dessus, l'expérience immersive est manquante avec un modèle 2D car l'œil humain voit les choses en 3D.
Itération 2
Essayons de créer un modèle 3D et voyons si nous pouvons améliorer l'expérience de notre jeu de Réalité Augmentée basé sur Javascript :
Alphabets 3D en Anglais, Hindi et Pendjabi pour notre projet AR
Et ci-dessous la comparaison de l'expérience d'un capteur de mouvement avec des modèles d'alphabets 2D vs 3D. Comme vous pouvez le voir, le 3D vous donne naturellement une expérience beaucoup plus immersive en matière de réalité augmentée.
Expérience de mouvement AR 2D vs 3D
Le Processus de Mise en Œuvre de la Réalité Augmentée
Pour mettre en œuvre le concept AR ci-dessus, j'utiliserai les outils et technologies suivants :
- Ionic Framework : Pour construire l'application hybride
- Aframe : Pour apporter l'expérience de la réalité virtuelle (VR) et de la réalité augmentée (AR) à notre application
- MagicaVoxel : Pour créer nos modèles 3D
Le processus de base de construction de l'application est très simple. Vous pouvez suivre mon article précédent pour apprendre comment construire et déployer une application en utilisant le framework Ionic ici.
Une fois que vous avez suivi le tutoriel ci-dessus pour créer une application simple, il est temps d'intégrer Aframe pour apporter nos alphabets 3D avec des capteurs de mouvement dans notre application.
Chargez simplement les bibliothèques core et loader d'Aframe dans le fichier index.html du projet Ionic :
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/v2.1.1/dist/aframe-extras.loaders.min.js"></script>
Avec cela, nous sommes prêts à faire un peu de magie AR/VR dans notre base de code Javascript.
Maintenant, dans votre composant home.html, incluons nos modèles 3D exportés depuis MagicaVoxel :
Et cela devrait rendre une scène 3D prête pour l'interaction avec tous les capteurs de mouvement prêts :
Scène finale de Réalité Virtuelle 3D prête avec des alphabets 3D
Ajout de l'Effet de Réalité Augmentée
La dernière partie de cette expérience consiste à ajouter l'effet de Réalité Augmentée (AR) dans notre application hybride basée sur Javascript. Comme déjà expliqué, la Réalité Augmentée consiste à superposer des modèles 3D ou d'autres objets sur votre vue caméra. La seule chose manquante est donc la vue caméra derrière notre scène.
Pour ce faire, nous utilisons le plugin de prévisualisation de la caméra comme expliqué ici. Et voici le gist complet après l'intégration avec le plugin de prévisualisation de la caméra :
Nous devons également nous assurer que nos arrière-plans sont transparents afin que la prévisualisation de la caméra soit visible sur mobile. Cela est très IMPORTANT, sinon vous pourriez penser que le plugin ne fonctionne pas. Voici le fichier home.scss avec le CSS de transparence activé :
Et voici à quoi cela ressemblerait finalement :
Réaction des utilisateurs à notre jeu JS de réalité augmentée
La dernière étape pour mesurer le succès de votre concept est la validation par de vrais utilisateurs — dans notre cas, des enfants :) Et voici leurs retours en direct enregistrés.
Il était assez clair que chacun d'eux a apprécié le jeu et nous avons obtenu la note maximale pour la partie amusement. Cependant, au début, j'ai dû leur dire de bouger le téléphone dans l'espace pour trouver les lettres. Points perdus en termes d'intuitivité :(
Points obtenus sur 10
Retours des utilisateurs pour le jeu JS de réalité augmentée
Réflexions Finales
C'était un projet passionnant et j'ai pu voir un grand potentiel pour la Réalité Augmentée dans l'apprentissage et l'éducation. Les enfants l'adorent vraiment et cela ajoute certainement le facteur amusement manquant à l'éducation, surtout dans notre système éducatif monotone.
N'hésitez pas à commenter et à partager vos retours.
Téléchargements
Le code de cette application est disponible sur github. N'hésitez pas à jouer et à ajouter de nouvelles fonctionnalités. Je serai ravi de pousser les mises à jour en production.
Vous pouvez télécharger l'application pour Android ici.