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

A quick response to QR and Data Matrix code.

Image
So lately I have been seeing more Data Matrix and QR code around. Data Matrix and QR code is a 2D barcode consisting of black and white "cells" or modules arranged in either a square or rectangular pattern that represent encoded information. Unlike augmented reality markers, data matrix code only represents text or raw data. Data Matrix (DM) symbols are rectangular in shape and usually square, they are made of cells: little elements that represent bits . Depending on the situation a "light" module is a 0 and a "dark" module is a 1, or vice versa. Every Data Matrix is composed of two solid adjacent borders in an "L" shape (called the "finder pattern") and two other borders consisting of alternating dark and light "cells" or modules (called the "timing pattern"). Within these borders are rows and columns of cells encoding information. The finder pattern is used to locate and orient the symbol while the timing pattern p
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 over t
Read more

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