Creating virtual reality applications has typically been a skill best left to 3D game developers. All of that is about to change however, thanks to Mozilla and the release of it’s new open source WebVR framework called A-Frame.
A-Frame was created to give web developers the ability to easily build, what are normally, very complex WebGL virtual reality elements, by wrapping them in simple HTML code.
Mozilla has been doing a lot of work and research over the past few years to bring VR to the browser, and A-Frame is a huge step towards giving web developers a set of simple tools and building blocks (much like web components) to explore and start creating more complex VR based websites that can work across multiple platforms.
Anyone with a basic understanding of HTML can use A-Frame. In the video above, I do a simple demonstration of just how easy it is to create simple VR elements using a very small piece of HTML code. The code immediately creates, not only a VR scene, but also includes the button which splits the screen when using a mobile browser in order to be used with VR headsets such as Google Cardboard.
In the video, I use the following code to create a cube in a simple HTML document and load it in my browser.
My first A-Frame VR Code
This is the result:
With a few more adjustments of the code, I was able to create fog, colors, position and size.
My first A-Frame VR Code
The result of the adjustments can be seen below, but are shown loaded on my mobile browser.
By clicking on the VR headset icon, the image is split into two screens which can now be viewed using a VR headset or Google Cardboard. This split screen functionality is already built into the script and will work on most mobile devices.
According to Mozilla, “A-Frame supports the Oculus Rift and mobile phones in “Cardboard”-style holders.” They do state that there are some issues with some Android devices but these problems are currently being addressed as a priority. I loaded the web page on my Galaxy 6 in Chrome and so far have not experienced any problems.
The A-Frame website offers a decent set of documentation and a pretty impressive selection of basic examples of how the framework can be used, as well as the code. Be sure to check out the site using your mobile browser, which will give you a better idea of it’s potential. As far as features, there is currently support for 360 videos, fog, cameras, lighting and other basic 3D elements, with interactivity and animation support coming soon.
I really encourage you to go to the website and start experimenting with A-Frame. As web developers start kicking the tires and exploring it’s capabilities, I think we are about start seeing a whole new paradigm shift in web design. Exciting times!
Sean Earley is the Executive Editor of AR/VR Magazine & co-founder of RobotSpaceship Podcast Network. He is the Director of New Biz Development and Publishing at KEMWEB, a musician, producer & consultant. He loves guitars, VR and coffee.
