How to create a WebVR experience using Unity

In my review of Amazon Sumerian I said multiple times that in other game engines, like Unity, it is not possible to create a WebVR experience. Well, just some days after that article, I’ve been proved wrong.
Actually it is possible and I’ll explain you how.

Yesterday, I was reading an article on VentureBeat about the importance of WebXR. Nothing special, just the classical editorial saying that WebAR and WebVR will merge into WebXR and that WebXR is going to be great, because it will allow for easy sharing of experiences with just a link. It was something that I already knew… plus I was really tired because of the hard work done and so I was really going through the text lines not giving much interest, when suddenly I read something like “Mozilla that has released a WebVR exporter for Unity” and suddenly I woke up and my eyes popped out.

unity create webvr projects mozilla
You got my attention, baby (Image from We Know Memes)

A WebVR exporter for Unity??? When?? Where?? I want it!

I immediately clicked on the link and so I discovered that on February, 15th 2018, Mozilla has published a tool to create WebVR projects inside Unity: it is a plugin for Unity that you import and that “hacks” the WebGL exporter so that it can actually export a WebVR page. I had to try it, and so I did. And it kinda works.

unity create webvr projects mozilla
Unity on one side, a WebVR experience running on Firefox on the other one

So, how to do you export a WebVR project from inside Unity? Well, first of all create your 3D Unity project and set the platform as WebGL. Then you have to import a special plugin made by Mozilla, called “Unity WebVR Export”. You have two ways to do this:

  1. Open the Asset Store and look for the “WebVR Assets” package. It is a free package released by Mozilla. Beware that this is a “complete project” package, so it will change your project settings. In a while, I’ll explain you why this is needed. If you have an already existing project, maybe it is better to use plan B;
  2. Download the unity exporter package directly from the GitHub repo of the project. At the moment, the download link is this one. After the download, import it into your project.
unity create webvr projects mozilla
This is the package you have to import (Image by Mozilla)

After you have imported it, you have to setup your solution, following these step-by-step instructions provided by Mozilla. The official tutorial is already very straightforward, so any commentary from me on it is not needed. The only thing that I want to add is that if you imported the WebVR exporter with approach 1, you’ll already have all the project settings set in the correct way (for instance my WebGL template was already set correctly), while if you use approach 2, you’ll have to set everything by hand.

Basically, to use WebVR, you have to remove your standard camera and substitute it with a special WebVR camera prefab, to which you have to attach the models of the two hands (Mozilla already supply you some simple hands models). Notice that this means that you CAN NOT use your SteamVR/Oculus/whatever player controller prefab. You have to use a new one, so supporting WebVR along with the other platforms won’t be easy, you’ll have to re-write a lot of stuff regarding controls, player movements, etc… Furthermore, the various facilities offered by the VR platforms (Steam VR, Oculus Avatar SDK, VRTK, etc…) most probably won’t work (I haven’t tested them, but they’re made for mobile/PC platforms and do work with their prefabs, that here are not used anymore).

The provided basic hands will just move and rotate, but won’t have any animation (open/closed fingers) and controlling schema. So basically, they’re good just as ping pong paddles. Mozilla won’t give you interactions, but hints you how you can obtain them: you have to use the standard Input class and query for various joysticks and input key presses. This means that at the moment you have to code everything by hand, starting from the very basics. The reference for all this process can be found here.

unity create webvr projects mozilla
Even if they’re very basics, seeing your hands in WebVR is a great satisfaction

When you then build with WebGL, the project will take a lot of time for the first build… compiling the scripts took ages. The next builds are faster, though. After the build process, you are provided with what seems a classical WebGL project solution: an html file, plus a lot of other files and strange stuff into which getting your hands is almost impossible. So, don’t expect a readable HTML+JS solution that you can modify as you wish, as the one offered by A-frame. Here you just take the output and you launch it.

Of course you can also deploy this solution on a server and let anyone in the world to access it. If this is what you want to do, Mozilla also has a page dedicated in giving you suggestions on how you can optimize your results.

To launch the experience on your PC, you have to put the link to the HTML file in the build directory inside a WebVR-capable browser (Firefox or Chromium on PC, even Edge if you have Microsoft headsets) and live your WebVR experience! As always, the experience will just run in a standard way on your screen, but if you press the Cardboard button that is on the lower right corner of the browser window, you can live it inside your VR headset… and it works! Wowwww!

The solution is referred as a “hack” because it offers just the basics, just a way to export in WebVR from Unity, but it is not a complete framework for WebVR development. As I’ve said, you don’t have all the features of the other VR SDKs. Furthermore, I experienced some bugs during the development (like the hands flickering like hell if they were tracked bad). You have to be warned about this.

But at the same time it is just awesome: it is possible to export from Unity to WebVR! You can create WebVR experiences using the tool that you already know, without learning anything new. And since Unity is maybe the best game engine for fast prototyping, this means that you can prototype very fast WebVR experiences!

Thanks Mozilla for this hack. And thanks to you for having read this article… and if you want to support me in writing other articles like this one, please subscribe to my newsletter and share this article with your friends!

(Header image created from the logos of Unity and WebVR)

Join my super-exclusive club!

Receive for free AR/VR articles like this + a weekly roundup of the most important XR news of the week straight in your inbox!

Subscribing, I accept the privacy rules of this website

4 e-mails/week circa. No spam, no ads, no GIFs of kitten (not sure about the last point, though)

Disclaimer: this blog contains advertisement and affiliate links to sustain itself. If you click on an affiliate link, I'll be very happy because I'll earn a small commission on your purchase. You can find my boring full disclosure here.

Skarredghost

AR/VR developer, startupper, zombie killer. Sometimes I pretend I can blog, but actually I've no idea what I'm doing. I tried to change the world with my startup Immotionar, offering super-awesome full body virtual reality, but now the dream is over. But I'm not giving up: I've started an AR/VR agency called New Technology Walkers with which help you in realizing your XR dreams with our consultancies (Contact us if you need a project done!)

Subscribe to the Ghost Howls's newsletter to have epic VR articles straight in your inbox!Wow, of course!
+