Faites vos premières expériences en réalité augmentée avec A-Frame

Le 22/12/2015

Dans Tech

Je pense que vous avez tous entendu parler de réalité virtuelle cette année (VR pour les intimes), et je pense que 2016 sera l’année où cette technologie explosera vraiment. Que ce soit avec un casque (Oculus, Steam VR, …) ou avec un simple téléphone (avec google Cardboard), il y a fort à parier que nous puissions tous essayer au moins une fois une expérience de réalité augmentée l’année prochaine.

Google Cardboard

La question qui se pose encore est : à​ quoi pourra servir cette technologie ? Steam et Sony penche pour une utilisation dédiée aux jeux vidéos, et Facebook (propriétaire d'Oculus) mise tout sur les interactions sociales et planche sur une sorte de "téléportation" virtuelle, vous permettant de visiter les lieux de votre choix avec les personnes de votre choix à tout moment, sans contraintes géographiques. Bref chacun prêche pour sa paroisse, et c'est bien normal.

Chez Mozilla, ils ont une autre réponse à apporter à cette question : la VR pourra servir à tout ce que vous pourrez imaginer créer avec. Et pour nous aider à créer le plus de choses, ils ont décidé de sortir le framework que je vais vous présenter aujourd'hui : A-Frame.

A Frame

Créez des expériences de réalité virtuelle avec A-frame

A-frame est un framework crée par Mozzilla, compatible presque tout support (Android arrive bientôt), et fait pour simplifier les premiers pas dans la création d'expériences en réalité augmentée. 

Attention, quand je dis qu'Android n'est pas encore compatible, je parle de compatibilité native. Il est tout à fait possible d'utiliser les versions navigateurs d'A-frame sur n'importe quel téléphone.

Penser un monde en 3D présent tout autour de nous, avec du son, le positionnement des lumières et des caméras, cela fait beaucoup d'un coup. S'il faut aussi apprendre a manipuler le WebGL, la tâche devient presque insurmontable pour beaucoup d'entre nous.

Pour éviter ce blocage technique et permettre d'agrandir la scène VR, MozVR (le team derrière l'outil) a décidé de créer un outil en WebGL qu'il est possible de contrôler avec du simple markup HTML, pour des résultats vraiment impressionnants.

Frame video exemple
Frame cube exemple

Son fonctionnement est assez simple : créez et ajoutez des "entity" (des cubes, sphères, mais aussi des caméras, ….) à votre scène en ajoutant des éléments HTML à votre document, puis modifiez les "components" de ces objets en modifiant les attributs correspondants dans leur élément.

 

A frame code example

L'avantage de ce mode de fonctionnement est que nous nous retrouvons dans un environnement connu (le DOM), avec la possibilité de travailler avec les mêmes ressources et frameworks que nous utilisons déjà pour les applications Web : jQuery, redux, et les autres.

A frame doc

Je vous conseille de passer faire un tour sur le site de A-Frame. Vous y découvrirez de nombreux exemples, ainsi que le code source nécessaire pour le mettre d'oeuvre. Cela vous donnera peut-être des idées pour occuper vos vacances de Noël !