WebVR is Easy with A-Frame

About a week ago, I got my first set of VR goggles. Nothing fancy – it’s the Samsung Gear VR. I explored some of the demos. (great fun!) Some of what I explored was WebVR, which just became available on Gear VR (without the use of “experimental browsers”) a couple of weeks ago – albeit with a “deprecated API”. (which means, an old obsolete version.) Then I took a crack at a tool called A-Frame.

WebVR is easy with A-FrameA-Frame makes WebVR easy. Easy peasy. It reminds me of X3DOM – it’s a “declarative language”, so it drives a lot like HTML5. All of the things you declare when you’re using A-Frame get added to the “DOM” (Document Object Model), so everything in your “world” can be accessed and manipulated just like you would the elements on a plain, old-fashioned web page. Which, really, makes a lot of things easy. Easy peasy.

It all starts with a very good website, which has a very good overview, and very good documentation.

The A-Frame Website


One one hand, I’m tempted to put my first easy peasy demo here. But I’m going to save that for my next post. For the rest of this post, I’m gonna snarf some of the copy from the aframe.io website. It’s really good writing – explains the technology supremely well. I’ve discovered that often with these fledgling technologies, the text on the website changes. One might expect that a technology that has some quick maturation underway would inspire its creators to update their blurb with above-average regularity. So, for the sake of both clarity and posterity, here’s some excerpts from the aframe.io site as it appeared in April 2016:

A-Frame is a open-source framework for creating 3D and virtual reality experiences on the web. It was built by the MozVR team to more quickly prototype WebVR experiences as we asked ourselves “what would the virtual reality on the web look like?”. Just as today on the web, we click on links to jump from page to page, one day we will walk through portals to jump from world to world. And to have worlds to jump between, we need WebVR content. Unfortunately, there are only a handful of WebGL developers in the world, but there are millions of web developers, web designers, and 3D artists. A-Frame puts VR content creation into hands of everyone.

A-Frame allows us to create VR scenes that works across desktop, the Oculus Rift, and mobile with just HTML. We can drop in the library and have a VR scene running in just a few lines of markup. Since it based on HTML, we can manipulate scenes with JavaScript like we would with normal HTML elements, and we can continue using our favorite JavaScript libraries and frameworks (e.g., d3, React). But the key factor is that A-Frame introduces the entity-component-system pattern, a pattern commonly used in 3D and game development, to HTML for composability, extensibility, and flexibility. If we are to bring 3D to the web, we need to adopt existing patterns from the industry.

Under the hood, A-Frame is built on top of Custom Elements and is powered by three.js. Although A-Frame at first looks like only a handful of custom HTML elements like <a-cube>, A-Frame at its heart is a entity-component-system-based three.js framework with a DOM interface. Everything in an A-Frame scene is an entity which we plug components into in order to compose appearance, behavior, and functionality. This allows experienced developers share reusable components that other developers can drop into their scene and use immediately.

Isn’t that delightful? As a web developer, looking at incorporating VR into our bag of tricks, isn’t this just exactly what you’d like to hear?

Myself, I’m not a huge fan of “declarative” languages – but I still strive to be a tool agnostic. And today, that pays off. I made a demo. I made a demo in no time. Like, literally, no time. Because the MozVR team has thoughtfully created something that brings the potential of WebVR down to the very easiest form for web developers to grok. It’s markup. It’s scene-graph-become-DOM. It’s responsive VR, which is to say, it “reponds” to the device you’re trying to view it it – monitor on a desktop or a laptop – screen on a smartphone – or VR goggles, mobile, PC, or console. Leaving the developer to focus on developing the content.

So, for my first demo – see my next post.

Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone

Author: Pete

Editor-in-Chief, Lead Software Developer and Artistic Director @ 3dspace.com

3 thoughts on “WebVR is Easy with A-Frame”

Comments are closed.