WebVR is playing an increasingly important role in the field of virtual reality. The idea of WebVR is actually quite simple: It’s about bringing virtual reality into the browser and making it very easily accessible. Most recently, our columnist Tina Sauerländer showed in her column about the Laval Virtual Conference what WebVR can do and what it can be used for in addition to nice experiences in the browser. In this article we not only explain to you what WebVR is. Rather, we show you how you can develop VR applications yourself with A-Frame.
What is WebVR?
Before we look at how you can create VR applications for the browser yourself, let’s first take a look at WebVR itself. WebVR is basically nothing more than an application programming interface (API) in browsers. This interface can now be used to develop VR applications with the JavaScript programming language. This interface was originally created by Mozilla and has since been jointly developed by Mozilla and Google.
What’s so great about WebVR?
WebVR is an important step towards spreading virtual reality. Because at the moment VR is still more of a niche phenomenon. Most applications are quite specific and are aimed at a suitably specific audience. However, devices like the Oculus Quest or Samsung Gear VR are making the hardware needed for VR increasingly accessible. Not only is it becoming more affordable, it’s also becoming a lot more accessible through plug-and-play. The ability to now distribute VR applications over the internet also makes the technology much more accessible to the masses.
A very good example here is digital conferences, which have almost become the norm during the corona pandemic. These can be held in a much more immersive way via WebVR. At the same time, these conferences do not exclude participants without a VR headset. Because WebVR applications can also be run without a headset, then just via the screen.
What is A Frame?
With the WebVR interface, developers have the opportunity to develop VR applications in the browser. There is also the option of developing 3D applications using WebGL. However, since programming with WebVR and WebGL is quite inaccessible, Mozilla has created a framework that greatly simplifies programming WebVR. By the way, a framework is a whole collection of different functions that developers no longer have to write themselves.
This framework is called A-Frame. It is based on WebVR on the one hand and Three.js on the other. The latter is in turn a framework to greatly simplify development with WebGL. I know that sounds a bit complicated. So again simply: A-Frame is actually everything you need to develop a VR application for the browser.
What is possible with A-Frame?
A-Frame enables almost any type of VR application in the browser. However, the whole thing is of course somewhat limited by the lack of performance. That means: Native VR applications that you download and install will run a little better on your devices than in the browser.
We show you what is possible with WebVR and especially A-Frame using the example of some very cool VR applications:
Hubs by Mozilla
Hubs is an A-frame application developed by Mozilla in which multiple users can enter a room and interact and play with each other there. In Hubs you can meet, play or simply chat via VR device or screen.
MathworldVR
In MathworldVR you can look at mathematical functions. Not just in 2D or 3D on the screen, but in VR. This creates a completely different approach to mathematics!
moonrider
Moonrider is one of the examples straight from A-Frame itself. Here you can watch a relaxing ride through space in VR while listening to music.
Which browsers are supported?
supermedium
Firefox
Oculus Browser
Samsung Internet
Microsoft Edge
Chrome
Exokit
Safari for iOS
Chrome for Android
Firefox for iOS
UC Browser
Which devices are supported?
HTC Vive (commission link)
Oculus Rift
Oculus Quest
Oculus Go
Google Daydream
Samsung GearVR (commission link)
Vive Focus
How does A Frame work?
At the heart of A-Frame is the so-called Entity Component System (ECS). Before you venture into the framework, you should have understood this ECS. The approach is actually quite simple. You have an “entity” composed of several “components”. For example, a box could be included in your WebVR application. This entity “box” consists of several components, such as the shape, the position and the material. A-Frame has already predefined some of these entities for you. These primitives are already created in most 3D frameworks and programs because they are used frequently. These include, for example, the box, the sphere, the sky, the plane and the cylinder. In A-Frame you can also create your own primitives and register them as such. This is especially useful if you plan to use a particular object multiple times and don’t want to keep rewriting it.
A-Frame is built on top of HTML. You can create the individual entities like an HTML element. In the case of a box, it looks something like this:
Learn to program with A-Frame
In this article we have given you an overview of what A-Frame is, what it can do and how it works in general. Of course, this is not sufficient if you want to program yourself with WebVR with A-Frame. That’s why we’re giving you some further tutorials and links in this paragraph, with which you can wonderfully familiarize yourself with this great and exciting framework.
If you’ve never had anything to do with web development, it’s not a good idea to jump straight into A-Frame. It is best to familiarize yourself with HTML and JavaScript in advance. HTML determines the structure of a website on the web and also forms the basis for A-Frame. JavaScript, on the other hand, enables program logic and interactivity on websites. The third pillar of web development – CSS – is not so critical to A-Frame. With CSS you determine the appearance of a website. For WebVR, that is a minor matter. Here is an article that explains how to get started with web development.
The A-Frame documentation
The most reliable source to get you started on A-Frame is probably Mozilla’s official documentation. Here you will find everything you need to know about the WebVR framework, broken down in a meaningful way. Starting with the installation (which is ridiculously easy), through the basic concepts, to slightly more concrete scenarios. Particularly practical examples always help me to learn such frameworks, which I can use to learn the individual things while making them. Here you will find specific guides from A-Frame itself, with which you can walk through the beginnings and explain them.
Detailed A-Frame tutorial on YouTube
The YouTuber Danilo Pasquariello has made a very comprehensive and good tutorial series on his channel. In it he explains everything about A-Frame using concrete examples and writes the code directly with you. So you can program directly while watching the videos. However, the tutorial series is in English and sometimes a bit difficult to understand due to Pasquariello’s heavy accent. But over time you get a good listen.
Get started with A-Frame
As with almost all technology, at some point it’s just a matter of “getting started”: If you have read this article, you should have a clear understanding of what A-Frame is, how it works and what you can do with it. Now it’s time to get creative and develop your own VR applications for the browser. If you consult the official documentation of A-Frame, you should have familiarized yourself with the framework and hopefully you will soon be able to implement exciting and creative projects.
