WebVR Content Kit

Setup instructions for the Mozilla VR Kit

If you want to demo the WebVR technology with the available demos and have the hardware for it, here are the instructions you need to follow to do it yourself.

Starting the demoing

If everything is set up, just start the demo sessions.

• Plug in Oculus Rift, its positional tracker, and Leap Motion
• Open StartWebVRDemos script from desktop
• Open Nightly app from desktop
• Open VR Demos bookmark from Nightly (or navigate to localhost:8080)
• Open OBS Multiplatform app from desktop (to run screen mirroring software and see what people are seeing)

Single session

Demoing steps for a single person.

• Invite the person to sit comfortably in front of the laptop
• Give them the headset, so they can put it on their head on their own (ask to put out the glasses if they can to have more comfort, but should work with them too)
• Wait till they sit still to reset the sensor (all they see is black screen, so you can say out loud that you are resetting it and launching the demo)
• Launch the demo, make it fullscreen
• Explain what's happening.
  • Sechelt: it's a landscape render in which they can look around in any direction (there are no interactions and the path is fixed)
  • Polar Sea: works similar to the previous one, it's a set of 360 videos (you can emphasize that they can look around and see what's happening behind them)
  • Rainbow Membrane: this one uses Leap Motion, so when it's launched explain that they can put both hands in front of them and play around with the face and all the surfaces
• Repeat for the demos you want to show. For me showing the demos listed above in that particular order work best. Turn off the first demo when they reach the island. Say that the second one is long and they can let you know when they want to see the third one (some people only need a few seconds while others are amazed for longer). The third one is exciting for a minute or two and after they finished they can just put off the headset.
• That's it - answer any questions, invite another person

Demoing tips and best practices

Learn how to do the demoing nice and smooth.

• Try to keep demo lengths to under 5 minutes. We don't need to show every demo to each person. As you demo you'll get a sense of which demos people like the most (eg Rainbow Membrane, Polar Sea).
• Demoer will need to switch demos for the user, eg: open site, double click to enter fullscreen, watch demo, press escape to exit fullscreen, press back, select new site. The user will see black while this is happening so it's a good idea to do the switching as fast as possible.
• Wipe the lenses between demos
• Restart Firefox to clear memory-related performance problems
• Reset sensor when users put on the headset: press the Reset sensor button on the demo landing page. This will reset the global forward position of the HMD.
• Head phones are awkward, but important: not all demos have audio, and headphones add yet another cable to deal with. Headphones also make it difficult for the demoer to narrate for the user. But audio enhances immersion and enjoyment tremendously. We should use headphones for the demos.
• If something isn't working:
  • Unplug Rift and Leap — close Firefox — close server
  • Plugin Rift and Leap — start server — open Firefox
• If Rift loses sync, you can also try restart the Rift server: from Settings Tray, select the Rift icon (looks like a small black eye), select Rift Configuration Utility from the two available options. In the utility that opens, select Tools - Service - Restart, and confirm the dialogue that pops up. This effectively restarts the Rift software, and can sometimes resolve Rift tracking failures.

Setup WebVR from scratch

If your laptop was wiped out clean or when you want to setup everything from scratch on a new one.

• Download and install Oculus runtime (0.6.0.1-beta)
• Download and install Leap Motion SDK (latest)
• Download and install Firefox Nightly (latest) and WebVR enabler add-on (0.2.0)
• Download and install Open Broadcaster Software Multiplatform (latest)
• Plug in Oculus Rift, its positional tracker, and Leap Motion
• Monitor configuration. Go to Display settings - Screen resolution, select Oculus Rift and set the Orientation to Landscape (flipped). Then set Multiple displays to Extend these displays. Go to the Advanced settings - Monitor - Monitor settings and set the screen refresh rate to 60Hz.
• Graphics card configuration. For computers with multiple GPUs: make sure we're always working from the discrete GPU. For NVIDIA GPUs, this can be set by accessing NVIDIA Control Panel via right-click on desktop. And setting Manage 3D Settings - Global settings - Preferred graphics processor - High-performance NVIDIA processor. This may need to be done from admin account for the setting to work.
• Set MozVR.com website as the default homepage
• Show bookmarks toolbar and drag demos we want into the toolbar

Setup offline demos from scratch

Offline-friendly demos load faster and don't need Internet connection to work.

• Download and install git
• Download and install node (comes along with npm)
• Download and unzip WebVR-Demos from the GitHub repository
• Open Git Bash and CD to webvr-demos directory
• Install dependencies with `npm install`
• Run local web server with `npm start`
• Navigate to server in Firefox Nightly http://localhost:8080
• You're ready! Enter VR mode on demos

Frequently Asked Questions

If someone ask a question during demoing, the answer will probably be here. If not, then fork this page on GitHub and add it, so we can try and answer it.

Why do I need an Oculus Rift? Will you add support for other headsets?

The Oculus Rift DK2 is currently the best-supported headset for WebVR development. Limited support for mobile browsers is possible with WebVR Boilerplate, but the Rift has greater capabilities (eg positional tracking), better performance, etc. Support for other headsets like the HTC Vive is coming soon.

Is there a WebVR spec?

Yes. A draft of the spec is available here.

Can I build CSS VR websites?

We are working on enabling CSS VR websites in future builds of Firefox. Currently Firefox supports WebGL VR sites only.

What do I need to get started?

Grab Firefox Nightly and the WebVR Add-On from MozVR.com!

Is Mozilla planning on building a dedicated VR browser?

We're always creating new VR experiments, especially for basic interactions like entering URLs, loading pages, etc. Currently the best way to experience WebVR is with a desktop browser like Firefox.

Why do I need an add-on?

The WebVR Add-On enables WebVR and disables multiprocess browsing (E10S), a new feature which is currently incompatible with WebVR. Once you have installed Firefox Nightly, open it, install the Add-On, and then follow the prompt to restart the browser.

Can I build my own sites?

Yes! And it's tons of fun. Start by grabbing some of the various boilerplate examples available: WebVR Boilerplate or WebVR Starter Kit.

The demos run slow or choppy for me. How can I improve performance?

See the VR setup tips on MozVR.com. VR is a very new technology, and a few settings can make the difference between a smooth or choppy experience.

Why do I need Firefox Nightly? Can I use standard desktop Firefox?

VR web support is very new, and we want to test it thoroughly before we ship to all Firefox users. Our intention is to ship VR support in standard desktop Firefox as soon as it's ready.

Can I use Firefox for Android?

Yes, Nightly builds of Firefox for Android now support WebVR. The current implementation is rough and will evolve over time. Feedback is welcome!

Can I use other browsers?

Yes, in addition to VR-enabled Firefox, MozVR.com also works with experimental VR-enabled builds of Chromium being created by Brandon Jones of the Chrome team. No other browsers currently support WebVR, but we're hopeful that they will start experimenting as well.

TODO

• Instructions on setting up the 360 camera
• Demos home page should look better
• Health and safety warning should be showed only once, and not before every demo
• Fullscreen mode is launched either by double clicking, ctrl+f, or f - it should be consistent

Help and contact

• Andrzej Mazur
• Josh Carpenter
• #vr channel on irc.mozilla.org

You can also go back to the Content Kit's index page.