A-Frame

By: Joe Robbins

Introduction

For our recent Daden-U day, I decided to look into A-Frame, the new open-source framework from Mozilla that is designed to make producing websites containing virtual reality content quick and simple.

Examples

Examples of the kind of content that is possible through A-Frame can be found at https://aframe.io. To experience the examples as they were intended you will either need to visit them on a PC with an Oculus Rift or on a mobile device with an attached VR viewer such as Google Cardboard.

If you are using the Oculus, you may need to download a browser capable of handling VR content, I myself opted for Mozilla’s own Nightly browser and it worked fine.

My Experience

Given the number of Daden’s projects that utilise VR I thought that it would be a good idea to try building a small VR website informing visitors about who Daden are and what we do here.

I started by downloading the Nightly browser and going through the examples presented on the A-Frame website. This served to give me an overview of what could be accomplished using A-Frame and also gave me some inspiration as to what I wanted my website to look like.

I then grabbed the office’s Oculus Rift Development Kit and hooked it up to my PC, pleasantly surprised with how painless it was to begin viewing the example sites through the headset.

It was time to pull back the cover and see how these pages were made. I had expected that to achieve even the simple results shown in the image below, one would have to write code of nightmarish proportions. The reality was quite different, and the process was no more complicated than adding any kind of content to a website.

For instance, the body of the page shown above consisted of nothing more than the listing below.

Nothing here should look too peculiar to anyone who has covered even the basics of web development. A-Frame introduces its own set of HTML tags, but fortunately all of the properties for these tags are fairly self-explanatory.

I read further into the framework’s documentation and found that it utilises an entity-component paradigm that will be familiar to anyone who has ever developed using a game engine like Unity. For those who haven’t seen this system, it simply involves having an entity, which is a general-purpose object within a scene, and a series of components attached to said entity. The components house properties that affect the behaviour of the entity.

Whilst the documentation for A-Frame isn’t complete at the time of writing, the content that was there did a very good job of introducing the different building blocks with which one produces a VR website.

It was finally time for me to try my own hand at writing a VR webpage. After rolling up my sleeves, I created a new project in Visual Studio, where I would be writing my website. Adding the A-Frame script to my site was accomplished with a single line referencing the location of the latest version.

I planned to produce a very simple page to begin with, featuring the Daden logo, a few paragraphs and images illustrating what we do, and a video showing some of our work as the cherry on top.

I hit a roadblock immediately, I attempted to import a PNG file containing the Daden logo into my page and tried to run it. All that was waiting for me was a black rectangle. I tried a couple of other images, with varying degrees of success. Visiting the relevant page in the documentation I found a message to the effect of “Yeah, images don’t always work, but we’re going to try and fix it some day, maybe”.

With the image not working out, I moved onto the text. I crawled through the documentation looking for some page that would tell me how to present text and came up empty. It would appear that, at least for now, there is no functionality in A-Frame for presenting a paragraph of text. The workaround that sprung to mind was to import the text inside an image file and then just display the image. This would have been fine, had I not already realised that images don’t tend to present themselves correctly.

At this point I was holding out very little hope that the video would work, but to my surprise I managed to import it using a single HTML tag.

So in the end my page consisted of nothing but a floating video, which is not much use to anyone. Perhaps with a bit more time spent working out how to successfully bring pictures into my site I could begin to produce something impressive. But we may never know, because soon after, my graphics drivers decided to go haywire and I had to waste time getting my screens back up and running.

The Good

• Easy to utilise - 3D shapes can be produced with a single HTML tag, and the attributes attached to those tags are simple and easily manipulated. Bringing in the A-Frame script is also handled with just one tag.
• Impressive example pieces - A few of the example sites I encountered did impress me, if not in terms of functionality, then at least in terms of design. One that stood out to me was the clothing shop pictured below.

The Bad

• Importing images rarely worked - I could only seem to import images that were already hosted online, rather than from within my own Visual Studio project. While I’m certain I could have found a workaround, I was disappointed that such a fundamental task was not as hassle-free as the rest of the framework.
• Requires custom-built content - It shouldn’t surprise anyone that we can’t simply load up our old web pages, plug in a headset and immediately be treated to a great VR experience. A VR website needs to be built from the ground up, and needs to be designed to take advantage of the extra dimension granted to its users. This means that 3D models are infinitely preferable to flat images, and somebody is going to have to create all those models.
• Reading text just doesn’t work - One of the examples on the A-Frame site displays some articles from Wikipedia. The problem with that is that the resolution of the displays in VR headsets simply isn’t high enough to display that text clearly at a distance. This means that the user has to move very close to the text and ends up craning their neck just to read one line of text. I think we can all agree that this is not the kind of progress we imagined the VR revolution to bring about.
• Poor community support - As is to be expected with any new technology, there is not yet a wide array of resources available in terms of support. This meant that when I ran into problems, such as my images not rendering correctly, I was pretty much on my own. Coupled with the incomplete documentation on the official A-Frame website, this means that a fair amount of perseverance is required when debugging with the framework.

Verdict

I cannot deny that A-Frame is an intriguing new technology, and that it is a promising start for VR web development. I am also very impressed with how simple it is to make use of the framework. However, I still have my doubts about viewing web pages in virtual reality. A lot more design work needs to be put in if we are going to come up with sensible ways to present information to users.

Ultimately, I feel that the future of the VR web is in the hands of content creators, any compelling virtual reality website is going to need a wealth of 3D models, images and videos that have been specifically crafted for viewing in this new format. Time will tell if A-Frame is the start of a VR web revolution or just a nifty way of drawing some cubes in your browser.