Découvert récemment, A-Frame, un petit moteur 3D Web VR, qui permet de faire de petite application HTML5/JS de façon assez simple, en comparaison avec des bibliothèque de codage pur tel que THREE.js.
Fonctionnement
Grâce aux exemples proposés sur leur site, on peu rapidement se rendre compte de la façon dont on va aborder le codage avec ce moteur. Pas d’UI ici, mais une majorité de codage avec un système de balise type HTML.
C’est assez ingénieux, car en utilisant les propriétés d’un langage à balise (Markup Language) On visualise facilement dans le code la structure de notre univers 3D.
Avec la balise <a-scene>, et ses différents attributs on paramètre donc notre scène 3D, avec son type de rendu et tout un tas d’autres options possibles. Puis on va imbriquer des balises de type :
- <a-assets> pour déclarer tout un tas de ressources, audio, vidéo, images, etc. en imbriquant successivement les balises <a-asset-item> pour chaque ressource. Via l’attribut SRC on indique le chemin de la ressource et via l’ID on lui donne un identifiant qui servira à l’appeler au besoin. Classique !
- <a-sky> permet de créer un ciel à partir d’une image 360° ou d’une vidéo 360° par exemple.
- <a-entity> selon les attributs utilisés, permettra l’intégration et le groupement d’objets 3D, d’objets de contrôle ou d’événement tels que les camera rig, hand controller, mouse controller, etc.
Ainsi en implémentant différents script JS dans votre en-tête, vous pourrez ajouter tout un tas de gestionnaires, pour transformer petit à petit votre premier viewer 3D en un petit 3D à explorer avec des casque tels que l’OCULUS QUEST, le VIVE, le RIFT, etc.
La création de jeux
En poussant un peu l’exploration et l’apprentissage de ce petit moteur, je suis assez convaincu par le fait que l’on puisse proposer de petits jeux VR sympas et des expériences originales.
Il n’y a qu’à voir A-BLAST, un des jeux exemples proposés sur le site de A-FRAME. Bon à ce niveau, faut quand même passer du temps à coder, mais bon déjà on gagne pas mal de temps avec la mise en place de l’univers 3D !
Découvrez l’univers de A-FRAME, moteur de création 3D Web VR
Commencer à développer avec A-Frame
Pour commencer à développer avec A-Frame, voici quelques ressources utiles :
- Documentation officielle d’A-Frame : https://aframe.io/docs/
- Tutoriels sur A-Frame sur le site de la communauté : https://aframe.io/learn/
- Cours en ligne sur Udemy : https://www.udemy.com/topic/a-frame/
- Tutoriels sur YouTube : https://www.youtube.com/results?search_query=a-frame+tutorial
Pour conclure
En conclusion, A-Frame est un outil incroyable pour les développeurs qui souhaitent développer des jeux VR pour le web.
Il est facile à utiliser et vous permettra de vous concentrer sur la création de jeux en WebVR plutôt que sur la complexité du développement. Alors pourquoi ne pas commencer à explorer A-Frame dès maintenant ?