Join the Discord
Login With Twitter

Getting Started with Creating a Web VR Game using WebXR

VR, in your Browser?

The first thing to realize about making VR experiences in your browser is this technology is still very niche. In this blog post, I simply want to remove some of the mystique around using WebXR to make VR for your browser. While WebXR has been around for decades, it's not until the last few years that we've seen any real investment into the space. By the end of this, you hopefully will have an idea where to get started with making your first VR game.

WebXR Logo

Unity and A-Frame are the two technologies I plan on touching on, but first, let me touch on what WebXR is. WebXR is an API that allows web browsers to talk to your VR or AR equipped device. The project started many years ago, but more recently two major companies are now making VR more pervasive than ever--Mozilla and Facebook.

Mozilla has been working to make creating WebXR content more shareable than ever with their WebXR exporter, allowing for the easy exporting of Unity projects into a VR compaitble format. Of course, this, paired with Facebook's continued investment into the VR space, has made this content not only easy to create, but also worth consuming with a larger market than ever.

How to Create a Game Using Unity and WebXR

Unity Logo

This is NOT a Unity tutorial, but we do want to provide a conceptual overview of what goes into creating a game or experience using WebXR and Unity.

Learning Unity is a big undertaking, but a worthwhile one, and it's surprisingly easy to "build" on your skillset while creating great content the whole time. Luckily though, once you know Unity, you pretty much know how to make VR content. Plug-ins and SDKs will do all of the work for you, so all you need to focus on is making a game.

At a high level, and assuming you're familiar with Unity, creating VR content in Unity is as easy as downloading the plug-in or SDK for whatever device you're using, wiring up the controls using this software, and making a game in the same way you'd make a game that utilizes a phone or keyboard.

Once you've done this, building it to be compatible with a browser can be a bit tricky, but if you follow these over-simplified steps, you'll have a working game:

Of course, building using WebGL will make your game HTML5 compatible, and the Mozille WebXR exporter is a really handy way to ensure your game or experience works with headset when in a browser environment. If it doesn't and you're using an iframe to render it, check out this tutorial.

Making a WebXR or VR game in A-Frame

A-frame Banner

A-Frame was also conceieved within Mozilla and was built on top of Three.js (now it's maintained by the same engineers under the name SuperMedium). What this mean, in essense, is it's all more or less just HTML5. What this means for you is it's simpler than diving full into Unity, it loads faster, yet it's a bit less powerful than Unity.

I don't want to come across as a hater, because if anyone has tried to load one of the Unity games on gamechef, you know that it takes a bit. It's not the most painful thing in the world, but if you've got a lower spec'd headset or have somewhere to be in the next half hour (I'm exaggerating), you're gonna have a bad time. ThreeJS is Html5, meaning it's lightning fast, yielding load times of a few seconds, if even that, but you won't have the power of a full on game engine at your fingertips.

A-frame Logo

In essense, A-frames's Hello VR is stupid simple and takes no time at all. Download their package, drop in a script and a-scene tag, and they take care of the rest for you. Of course you'll need to learn Three.js, which is probably slightly more work than the Unity GUI for the same sort of Hello World example, but it'll get you farther in the medium-term.

Wrap Up

So if there's on takeaway, it's that creating VR content for the web is pretty easy these days. There aren't any special skills, you don't need to dust off the old calc 3 textbook, and you really can carry over any skills you already have in Unity of ThreeJS straight into the world of virtual reality. We'll be releasing an ACTUAL tutorial on how to develop games using ThreeJS and A-Frame soon, so stay tuned!

Want a more in depth explanation of the differences between A-Frame and Unity? Click here! Interested in seeing what other's have already made? Check this blog post out.