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.
A-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.”
“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.