Use Mozilla WebXR Exporter in Unity for WebGL 2 VR Games

What is WebXR? Well, simply put, it’s an API that allows your browser to interact with and support AR and VR hardware. We’re interested in this because our website supports this technology so users can host and share VR games for their Oculus Quest or other VR devices. What we found though, is that WebGL games we made in Unity did not immediately play nicely within the Oculus Quest browser.

Enter Mozilla. Mozilla has been at the forefront of WebXR development, placing at least a few eggs in that basket based on Hubs, their full fledged VR browser, and a slew of tech demos. Our interest was piqued when we found they have also created a free to use Unity WebXR exporter.

Black Screen on Oculus Quest WebXR Project

Now we tried to use the package available on the Unity Asset Store and even followed the tutorial put together by Mozilla. Neither of these worked for us, as we were met with a black screen when trying to play the game on our Quest (their asset store package was not updated to the newest commit). This may have been fixed since then. If you are met with a similar black screen problem, we’ll quickly walk you through what we did to get our game working.

Easy but not Intuitive

Our first step was to download the latest master version of the WebXR-Exporter directly from Github — if this tutorial doesn’t seem to work for you, you may need to build the exporter from source (I’ll add a little section to the bottom of this article with instructions). You’ll be met with two options:

• If you choose to “open the file with Unity”, Unity Hub should open. Within Unity Hub, open the game you want to apply this to.
• The second option is to “save the file”. If you’ve already got your project opened, or if you want to use this exporter on multiple projects, save the file to your computer. Now you can simply drag “WebXR-Exporter” into your project.

In either case, you should be met with this pop-up.

Select “Import”, and wait for Unity to do its thing. Now you have the same package as the Unity Asset Store package, but with the newest source code. From here, you can resume with the tutorial provided by Mozilla.

Well That Was Easy

We hope this was informative. I know there is nothing groundbreaking in this tutorial, but we spent longer than we care to admit on this issue, and maybe this blog post will save you some time. If you’re curious how we’ve applied these learnings, you can check out some of our games, including Bowman VR if you want to try your aim, or Campfire VR if you need to relax.

If you’re having trouble getting your WebXR enabled content to display on your website, we’ve got a quick tutorial on how we were able to get that working.

Building from Source

Clone the repository, and then import that whole project into Unity through the Project menu.

Once in Unity, you’ll want to navigate to the WebGL Templates directory within your Assets, click on WebXR, and then in the Assets menu, export the package. Once done, you can resume this tutorial.

If you tried building already using an exporter that didn’t work, you should navigate to your unity project’s files, clear all the caches within the Library directory, and also take care to remove all artifacts of your exporter from your Unity project.