Depuis 2014, l’API WebVR est en cours d’élaboration. Son but est de permettre à une page web d’interagir avec un équipement VR tel qu’un Cardboard, un HTC Vive ou un Oculus Rift. Ces API, conçues notamment par Mozilla et Google, sont en constante évolution et sont progressivement intégrées aux navigateurs internet modernes.
En tant que créateur principal de ces API, Mozilla souhaitait proposer un moyen aux développeurs, novices comme expérimentés, de pouvoir facilement les exploiter. C’est ainsi que naquit A-Frame à la fin de l’année 2015. A l’heure où j’écris ces lignes, en juillet 2017 et après plus de 3400 commits, A-Frame en est à sa version 0.6.1.
Bien qu’exploitant WebGL à foison via la librairie Three.js, A-Frame permet une abstraction bienvenue pour la création de scènes 3D. La stratégie de développement consiste à utiliser des tags HTML, par exemple <a-box> ou encore <a-camera>. Cela permet d’avoir un code HTML simple et lisible, les comportements de ces tags sont pour leur part définis par A-Frame et il est permis aux développeurs de créer leurs propres tags avec des comportements qui leurs sont propres.
Voici un exemple simple :
<!DOCTYPE html>
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>Voici le résultat :
En plus du développement du framework et de l’ajout du support des API WebVR, l’équipe d’A-Frame et sa communauté ont développé un certain nombre d’outils et d’expériences :
L’inspecteur de scène permet d’avoir une vue d’ensemble de la scène et de la manipuler facilement. Au début, il arrive parfois de placer des objets dans l’HTML mais de ne pas les voir lors du rendu. On se rend ensuite compte qu’ils étaient situés derrière la caméra ou qu’ils lui tournaient le dos…
L’outil de Motion Capture permet au développeur d’enregistrer une fois pour toute une situation précise lorsqu’il est muni d’un équipement VR, pour ensuite être en mesure de la rejouer aisément. Cela évite au développeur de devoir sans cesse jongler entre équipement VR et travail à l’ordinateur.
A-Frame a su tisser des liens comme on en voit rarement avec sa communauté. Je pense par exemple à la revue des projets de la semaines postées sur le blog d’A-Frame qui met en avant les travaux les plus intéressants des derniers jours. La capacité qu’ont les développeurs principaux à réagir sur les réseaux sociaux ou sur GitHub est également très appréciable.
Ce framework n’est pourtant pas encore parfait et ce n’est pas forcément la faute des gens qui le maintiennent. Parmi les problèmes, je peux lister la lenteur à laquelle les navigateurs adoptent les API WebVR. Il est à présager que de nombreuses années d’attentes seront nécessaires à ce que tous les principaux soient suffisamment compatibles. Pour donner une idée de la situation actuelle, il est aujourd'hui nécessaire d’utiliser la version Nightly de Firefox pour pouvoir visualiser ses scènes sur un casque HTC Vive ou Oculus VR. Il est à noter qu’à l’opposé des navigateur desktop, les navigateurs mobiles ont été très rapidement compatibles, ce qui a fait des téléphones portables de très bons outils pour présenter des travaux ou prototypes, à l’aide de Cardboards notamment.
D’autres bugs inévitables mais néanmoins gênants existent et sont corrigés au fur et à mesure. C’est ici que la réactivité des développeurs se fait remarquer positivement.
Catégories :
Tech web VR/AR/MRTags :
mobile A-Frame réalité virtuelle (VR) HTC Vive cardboard OculusVous avez aimé cet article ? Suivez-nous sur Facebook pour ne rien manquer !