An A-Frame for WebVR

  The FireFox folks on the MozVR team released this month the first version of A-Frame: an open source framework for creating WebVR experiences with very simple markup. For those that are unfamiliar with WebVR, it is the term used to describe virtual reality experiences that are accessible via a Web browser (opposed to VR experiences that are downloaded executables).


Currently WebVR only works in the developer builds of Google's Chromium browser and Mozilla's FireFox Nightly build. There are a few options for WebVR including X3DOM, the standards based framework I use for my WebVR scenes. A-Frame is simply another Javascript framework for WebVR and since it leverages WebGL, the demos and scenes are viewable in any updated browser.


  "A-Frame makes it easy for web developers to create virtual reality experiences that work across desktop, iPhone (Android support coming soon), and the Oculus Rift. We created A-Frame to make it easier to create VR web experiences. WebVR has shipped in builds of Firefox and Chromium since the summer of 2014, but creating content for it has required knowing WebGL. The WebGL scene is unbelievably talented and has created many mind-blowing VR experiences in the last year, but they are a small subset of the full web dev community. There are millions of talented developers who do not know WebGL. What if each of them could create and share VR experiences on the open web?" - A-Frame blog


The syntax is fairly straight forward and reminds me a lot of X3DOM. Let's take a look at how to create a basic scene from one of the A-Frame examples

<html>
<head>
<meta charset="utf-8">
<title>Hello, World! • A-Frame</title>
<meta name="description" content="Hello, World! • A-Frame">
<script src="../../dist/aframe.js"></script>
</head>
<body>
<a-scene>
<a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-cube>
<a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>

The A-Frame Javascript library is referenced here:
<script src="../../dist/aframe.js"></script>

with the 3D scene being defined between the 'a-scene' tags:

<a-scene> <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-cube>
<a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>

Given this is simply HTML, modifying the scene is done very easily via Javascript.

I am very interested in playing around a bit more with A-Frame (get it here on GitHub) and hopefully will get the chance to sit down with the guys at Mozilla in 2016 for an interview to learn more about their plans with this WebVR framework. I say job well done to all the contributors to this project.

Comments

Popular posts from this blog

Virtual Reality is getting Religion

An Epic day of Unity with the Seattle VR scene