EyeBrowse – An Introduction to WebVR and A-Frame

A-Frame, a framework developed by Mozilla, is an option to easily create VR experiences in JavaScript. This allows you to host the application on any website and then simply send the user a link. The ability to run the application without having to enter an app store or give credit card details is a huge boost for ease of user access!

But how viable is it as a development platform and can it deliver a good user experience?

To attempt to answer these questions I set out to create a small project, which could be realised in a few days. I would then present this project to the studio, hopefully with an answer on whether we could use A-Frame for future projects.

The idea of the project was minimalist game where the player explores an abstract landscape in search of blue gems. It was simple; find the gems, go to the next level. Very little interactivity was a must considering the lack of input controls on a normal Cardboard HMD (Head Mounted Display). I also wanted to embrace the best feature of virtual reality, which is the freedom to look around and getting awesome feelings of depth between objects in the foreground and background.

The good news? The game was incredibly easy to create! It was up and running on a website in a matter of hours. The player could look around and the change the direction of gravity by looking at specific walls.

Levels could easily be created using MagicaVoxel, by @ephtracy, and imported into the game with a few lines of code. Manipulating objects, ray casting and figuring out directions through matrix multiplication was all available as A-Frame is built upon Three JS, by @mrdoob.

Most importantly, I could send the link to anyone and they could be playing the game within seconds! That’s incredible!

However, there are some issues with WebVR in its current state. User experience is obviously incredibly important. If they are not having a good time the application is not functioning correctly.

The biggest bonus, that anyone can open a link and experience virtual reality, is also a pitfall. We cannot currently guarantee a good user experience for all users. Maybe the user is using a browser which doesn’t render the screen as expected. The user could be using a low-powered device and therefore have frame-rate issues. The user could even receive a phone call half-way through the experience and get incredibly confused about what is happening to the screen. All these issues can cause eye-strain, nausea, head-aches and more.

This is probably the biggest problem to solve first. One solution would be to monitor the frame-rate. If the phone is not hitting the expected 90 FPS, then show a warning or don’t even allow the user into the experience. However, this doesn’t solve all the issues, especially as some phones reduce their capabilities as they heat up.

Another point to take into account is the issue of monetisation. Users are currently not used to paying for content on a website. Subscriptions are common for episodic content (such as newspapers and magazines), but there are few instances where you are asked to pay to try an application which runs on your browser.

Tied to this issue is security of your application. Because the whole application is simply JS and HTML, it would not be difficult to pirate the application. This might be less common for a user, but could be done by rivalling developers.

Some solutions to these issues could be to run any important code on a server, if possible.

For monetisation you could either fund the app through ads. Another alternative is to create applications which ARE ads. For example, a furniture store could have a VR catalogue on their website. The application would not need to be monetised, because the aim of the application is to sell a product.

In summary, if you are a JS developer and you want to jump on VR development you should definitely give A-Frame a shot! It is amazing how quickly you can get it running and in users’ hands. If you have any issues, it is all open source and the Slack channel is active and helpful! For me, primarily using Unity to develop applications, I will not fully switch to only using A-Frame. But it is definitely an option to propose to clients when discussing their requirements to ensure we are deliver the best experience for their users.

I look forward to seeing how the Mozilla team will continue to develop the framework and what applications come out of it!

To try Perspective, the demo I created, please visit www.projectsbyleroy.com/perspective

Follow me on @Lr_K.

West Pier Studio Website: http://www.westpierstudio.com/
Twitter: https://twitter.com/WestPierStudio
Facebook: https://www.facebook.com/WestPierStudio/
Instagram: https://www.instagram.com/westpierstudio_brighton/?hl=en