Web VR: Overview
Note: This page is about VR for the web, not to be confused with just the WebVR device API.
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?
Oculus Browser is the preinstalled browser for Oculus 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.
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
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.
Web VR Programming Frameworks
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.
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.
How Can I Integrate Collaboration?
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.
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.
A-Frame React / VR-Viz
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 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?
A free web hosting service that lets you make web apps, react apps, node.js apps and more. Works really well for A-Frame.