Mozilla releases A-Frame, an easy VR creation tool

Mozilla, which helped pioneer WebVR last year, is making virtual reality development even easier with this month’s release of A-Frame, a tool that allows developers to create experiences for the desktop, the Oculus Rift, and smartphones with Google Cardboard headsets, Mozilla said in its announcement last week.

Screenshot of "Hello World" A-Frame example in Chrome browser on Android.
Screenshot of “Hello World” A-Frame example in Chrome browser on Android.

“WebVR has shipped in builds of Firefox and Chromium since the summer of 2014, but creating content for it has required knowing WebGL,” said the announcement. “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?”

Screenshot of "Anime UI" A-Frame example in Chrome browser on Android.
Screenshot of “Anime UI” A-Frame example in Chrome browser on Android.

About a dozen examples are available on the A-Frame site. To run them in virtual reality on a smartphone, simply load the related web page, such as for the Hello World demo.

The site also has a “show source” button — for the “Hello World,” example, there is one line of HTML to load the appropriate libraries, and then just a line of HTML per object. Everything else — including the rendering of the objects in 3D, the side-by-side stereoscopic view, and the motion tracking that knows the direction the user is looking in — is all handled behind the scenes.

When viewed in a regular desktop browser, without a virtual reality headsets, the scenes can be viewed in regular 360-degree, where dragging the mouse across the screen changes the point of view.

The “Composite” example combines a 360-degree panorama photograph, a 3D object, and a static image. It might make a good basis for the home page of a grid’s Website.

The Getting Started Guide is here.


Maria Korolov