WebVR: Overview
Note: This page is about VR for the web, not to be confused with just the WebVR device API.
Introduction
The web is the most accessible way to use VR--for each page, no additional application installs or remote desktops are needed. Rather, all that is required is a VR headset and a VR-supported browser for your headset. It should be noted that increased accessibility comes at the cost of depth of features--VR in the web does not have as advanced data visualization features as native applications.
To enter a VR-supported website in immersive mode, press the VR icon in the bottom right corner of the webpage. This section investigates current frameworks, libraries, and plugins for web-based immersive VR.
Which Browser Should I Use?
Quest Browser is the preinstalled browser for Quest users. It supports multi-screen viewing and many experimental features of WebXR such as hand-tracking and 360 video. It is based on the Chromium engine. On occasion, sites will not work in immersive mode on this browser.
Quest users: Firefox Reality and Oculus Browser are your two main options. In terms of WebXR integration, most VR-enabled websites will work fine on both, but occasionally a site will not work with immersive mode with Oculus Browser, and will only work on Firefox Reality. Personally I prefer using Firefox Reality because there are more advanced features aside from webXR, such as better privacy settings.
Firefox Reality was launched in 2018 and as of Feb 2nd, 2022, it is still downloadable from the Oculus store but will soon be taken off the Vive and Oculus app stores. It has supported immersive mode for every webXR website I have tried. It has additional features such as enhanced privacy settings that the Oculus browser lacks. When Mozilla officially stops supporting their VR Browser, it has directed users to instead use the Wolvic Browser.
An open source browser still in beta that is available to download from the Huawei and Oculus stores (with plans to support Vive soon). Much of the browser is based on the source code of Reality, so it has a similar look and feel to it.
WebVR Softwares
The following are different libraries and frameworks that incorporate VR. By far the easiest to use is A-Frame, since unlike the other ones, it is made specifically for building VR for the web and it is active, and thus it is the best for building VR web apps. If you are looking for a more comprehensive data visualization application then you should consider building your project in Unity and exporting to the web.
The Pillars of Web VR
These two APIs (Headset data and 3D Graphics, respectively) are what enable VR experiences to happen in the web. Every framework builds on these two APIs.
WebXR is a device API standardized by W3C that allows for the ability to track headset movement in the web. Its predecessor was WebVR, which was only used for VR headsets. Although WebXR is used for tracking device movement, it does not provide any graphics rendering and must be used alongside WebGL (Web Graphics Library) for a complete VR experience. Web GL allows websites to render 2D or 3D graphics without plug-ins.
Developer Recommendations:
WebGL (Web Graphics Library) is a library for rendering 2D and 3D graphics in the web. It enables web applications to take advantage of a client's GPU for shader computations.
Web VR Programming Frameworks
Three.js is a javascript library that simplifies the use of 3D graphics in the web. It utilizes both WebGL for rendering and WebXR for optional headset integration, so it is possible to create fully immersive VR experiences with just three.js. Though this is possible, it is much easier to accomplish this with A-frame. Three.js is most often used for 3D graphics without VR integration.
A-Frame is a framework built on top of Three.js specifically for creating cross-platofrm VR/AR experiences that can also be accessed through non-VR devices (like mobile and desktop). Since it is built on top of three.js, anything that can be used in that library can also be accesses through A-Frame. A-Frame wraps graphic objects as web components, making it very easy to build a basic scene. Additionally, this component syntax makes it easy to import third-party components which provide additional and more specific prebuilt scenes. These can be found in the A-frame registry.
Tutorials
Include Visualizations OF the software
Tutorials
Recommendations for A-Frame Developers
A-Frame has a built-in visual inspector that can be accessed with ctrl + alt + i.
With the inspector, you can check the position of entities and move them around. This can make it much easier to debug and I recommend using it.
Unity is a powerful multi-platform game engine that allows exports to webXR. Follow this guide to learn how to export your Unity project to webXR. If you are building a sophisticated visualization project for multiple platforms, then Unity would be a good choice because it doesn't require much extra work to convert it to a WebVR project.
Tutorials
How Can I Integrate Collaboration?
A-Frame
Although no WebVR programming framework supports collaboration by default, for A-Frame there is an external npm package called A-Frame Networked that makes it easy to add visual avatars and audio sharing for real-time multiplayer experiences.
Three.js
If you want more control over your avatars, or are using three.js instead of A-frame, it is possible to implement similar collaborative features manually. These are client / server repos that implements basic visual controller collaboration with the socket.io library. If you would like real time audio sharing, you would need to pair this with a package like EasyRTC that uses WebRTC protocol for audio, but makes it easier to use.
In order to communicate between clients, you do need a backend server that relays messages. One option to set this up is with AWS Lightsail, and there is a tutorial for doing so. Other options include Cloudflare, Vercel, and deploying locally.
It may be possible to use Photon Web, but this has been tried to no avail. Additionally, the documentation for Photon Web is difficult to navigate.
A-Frame React cannot be used with A-Frame Networked. Since VR-Viz the data visualization library, uses A-Frame React, it too cannot be used with A-Frame Networked. Very similar features, including the same avatars, have been constructed with React by Nicholas Bottone in this repo. The Avatar, PlayerList, clientSocket, and stringToColor files can be downloaded into an existing repo, compiled to JS, and imported to your main App.js file to support collaboration.
Unity
Unity has its own separate options, including Photon PUN and Normcore. There is a Multiplayer Unity wiki page about all of the options for collaboration that Unity supports. All of these options should work when exported to the web, although they have not been tested. Of these, by far the most popular option is Normcore, so I recommend trying that first.
How Can I Host My WebVR Apps?
Glitch
A free web hosting service that lets you make web apps, react apps, node.js apps and more. Works really well for A-Frame.