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

Post a Comment

Popular posts from this blog

Artificial Intelligence & Robots

Image
Artificial intelligence (AI) is the intelligence of machines and the branch of computer science that aims to create it. Released during the Game Developers Conference, the now viral “Kara” concept video made by the Paris-based Quantic Dream, developers of the Heavy Rain game, is a look at the future of gaming, using full-body motion capture and a new computer-graphics engine. It is running in real time on Sony’s PlayStation 3 platform. The video is thought provoking as a robot comes to life and is quickly scared by the idea of how precious that can be. What I find interesting is that this type of artificial intelligence is not too far in the future thanks to friends like David Hanson of Hanson Robotics . I got the chance to hang out with David for several days during a trip last year to New Zealand and I was amazed by his work and the state of the A.I. industry. While I have some reservations about 'smart machines' thanks to Hollywood (Terminator, Matrix), David assures me th...
Read more

Full of AWE at Augmented World Expo 2017

Image
Augmented World Event 2017 There are not many event series I can say I have attended since day one but the Augmented World Expo , formerly the Augmented Reality Event, is one I can put in that category. This was the 8th annual event and no doubt it sure has come a long way since that first event I visited in 2010 . AWE is the largest event focused on the commercial side of AR, VR, and includes wearables. “AR and VR are bringing superpowers to the people and this year we are on a mission to highlight how to use these Superpowers to Change the World. This year’s conference and expo will showcase speakers, startups and organizations who are using AR & VR to drive economic growth, encourage empathy and collaboration, democratize healthcare and education, and promote sustainability in the world.” - event website This year was the best year for AWE in my opinion and their biggest ever. The event brought in 4,700 attendees, 351 speakers, and 212 exhibitors from all ov...
Read more

Metaverse One - Upgrading to Social Media

Image
Today marks the 14th year of when I started this blog to cover the technologies of our ever evolving Metaverse.  A lot has happened since then, both in tech and the personal life. Yet knowing that I need to start blogging again since the topic of the Metaverse is everywhere, I use this anniversary to announce the launch of the Metaverse One TikTok channel  where I will be posting videos every few days covering topics about the Metaverse and related technologies .                                          Make sure to follow there and the Metaverse One Youtube Channel .
Read more