Mozilla today released A-Frame, an open source library for creating virtual reality web experiences without having to know the powerful (but complex) WebGL. Designed for web developers, A-Frame aims to make it easy to create high-performance and responsive virtual reality experiences that run right out of your browser.
Mozilla’s ‘MozVR‘ team has been experimenting with WebVR for some time now, but today’s release of A-Frame codifies the company’s R&D in this area into a package that’s ready for web developers to explore. A single line of code forms the basis of a VR-capable website.
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
From here, web developers can begin to create simple VR websites using familiar HTML markup. Mozilla has put together detailed documentation for those interested in developing with A-Frame.
A big part of A-Frame is seamless responsiveness between VR headsets and even non-VR devices like desktops and smartphones. Out of the box today, A-Frame works with the Oculus Rift DK2 and smartphone VR viewers like Cardboard (Android and iOS), though further headset compatibility is an obvious part of the roadmap. The MozVR team says that A-Frame will soon take advantage of Oculus’ latest v0.8 runtime with 75Hz headtracking. You can find out how to set up your Oculus Rift to work with WebVR here, though smartphone VR viewers and non-VR rendering should work on any WebGL browser.
A-Frame comes with a collection of building blocks for models, videos, skies, geometries, and more. Also included are controls, animations, and cursors, making it easy for developers to begin building rich interactive VR websites. A-Frame launches with a number of templates to give web developers easy starting points, and Mozilla is encouraging healthy sharing of template derivatives in the hopes of accelerating the creation of WebVR websites.
“If we care about the web and if we think that the web is awesome, we can’t wait for these things to crystallize and mature and bake for five years before we jump in and say ‘let’s make the web for [VR],’ we have to be there from day one,” Joshua Carpenter, Product Design Lead on the MozVR team, said at a Mozilla event last month. “And that really is the mandate of Mozilla and in particular the CTO office that I work out of; it’s research projects into the future of the web platform.”
Talking about the state of WebVR prior to A-Frame, Carpenter said it was powerful, but not readily accessible to millions of existing web developers.
“There’s just one catch. It’s way too hard to create WebVR experiences. The whole value proposition of the web is low friction,” he said. “You don’t have to install anything, it just works, you click on the link. And if you want to create something, you just type a couple lines of code and you publish it and no one can tell you ‘you can’t publish that’.”
A-Frame is designed to make those values a reality for WebVR development.
Part of the challenge is not only laying a foundation to responsively support proper headtracking and rendering for VR headsets, but also to eliminate the requirement of deep WebGL knowledge from WebVR development.
“A-Frame is aimed squarely at the web developer community, the vast majority of whom have been frozen out of WebVR development because they don’t know WebGL, the powerful-but-complex 3D API that WebVR runs on,” Carpenter told me. “A web developer who wants to create a VR site with A-Frame simply drops it into their markup via a single line of HTML, and is ready to go.”
Learn more about A-Frame at the official FAQ and Getting Started Guide.
