How it Works

VR in the Browser

VR in the browser refers to the ability to experience virtual reality (VR) content directly from a web browser, without the need for additional software or plugins.

This technology opens up new opportunities for developers and content creators to explore and push the boundaries of what’s possible in virtual reality, and allows users to access and enjoy VR content more easily than ever before.

What is WebXR?

WebXR is an open standard that allows developers to create immersive experiences in the browser. It builds on the earlier, experimental WebVR standard, but expands beyond VR to support a wider range of immersive technologies, including augmented reality (AR) and mixed reality (MR). While WebVR was limited to head-mounted displays (HMDs), WebXR can be used with a wider range of devices, including smartphones and tablets, making it far more accessible to users across different platforms and devices.

The WebXR Device API and WebGL (“Web Graph­ics Lib­rary") work together to enable immersive VR experiences by providing a way to access VR hardware and render 3D graphics in the browser.

The WebXR Device API provides a unified JavaScript interface for accessing VR and AR devices such as headsets, controllers, and sensors. 

WebGL provides a way to create 3D models, apply textures and lighting, and add animations and interactivity in the browser.

Building a WebXR experience

Developing with WebXR can be easier to get started with than traditional VR because it leverages existing web technologies, such as HTML, CSS and JavaScript, which many developers are already familiar with. 

The following are some of the key aspects to consider when building a WebXR experience:

WebXR Frameworks

Several frameworks are available to make it easier to create VR and AR experiences for the web. These frameworks provide a set of tools and APIs that make it easier to create interactive, 3D content for the web. We recommended exploring different WebXR frameworks and engines to see which one best fits your development needs.

The fol­low­ing table shows a list of frame­works and en­gines:

 

 

Input Types

WebXR experiences can be controlled using various input types, each providing a unique way for users to interact with the game environment and providing a different level of immersion. Supporting a wide range of input types requires careful consideration of how these input types interact with the game mechanics. It may be necessary to make logical changes to the game design or limit certain input types to avoid issues with game-play or user experience.

Some of the most common input types are:

Gaze: This input type enables users to interact with the virtual environment by looking at an object. Users can only interact by changing the view direction, and all interaction is based on where the user is looking or directing their screen.  

Tap: A simple touch-based interaction that requires users to tap on a screen. This input type is essential for mobile players to enjoy the game. 

Three-DoF: This input type allows users to rotate their heads to look around the virtual environment, but does not permit physical movement. Typically, it is combined with a Three-DoF controller with button(s). The Oculus Go is a typical device for this input type

Six-DoF: This input type enables users to both rotate their head and move around physically in the virtual environment. Typically, it is combined with 2 Six-DoF controllers and has become the modern standard for VR. 

Hand and finger tracking: This input allows users to interact with the virtual environment using their hands, which movements are directly tracked. There is no need for separate controllers in this instance. 

Mouse and Keyboard: This input type enables users to control the game using just the mouse and/or keyboard.

Developers are free to choose which input types they support in their games. Therefore, it is important to note that not all games on heyVR have all of these input types available. 

Resources

There are many useful tools and workflows that can help you get started and be more productive with WebXR development. Here are a few recommendations:

A-Frame

A-Frame is a popular, open-source framework for building VR and AR experiences for the web. It provides a simple, intuitive API and offers many pre-built and community provided components. It is a great choice for developers with no native (such as Unity Engine) experience.

Babylon.js

Babylon.js is a powerful, open-source framework for building 3D experiences for the web. It provides a comprehensive set of tools and APIs for creating complex, interactive VR and AR experiences. 

Three.js

Three.js is another popular framework for building 3D experiences for the web. It provides a rich set of tools and APIs for creating 3D graphics, animations, and other interactive content for the web. It can also be combined with other engines/frameworks. They provide many WebXR examples.

Wonderland Engine

Wonderland Engine is a powerful game development engine that simplifies the creation of complex 3D experiences for the web. Its built-in support for Web Assembly allows for high-performance graphics and physics simulations, making it an excellent choice for creating high-quality, immersive WebXR content. 

 

In addition to these tools, there are many resources available to help you learn more about WebXR development. Here are some useful resources to help you get started:

WebXR Developer Documentation

The official documentation for WebXR developers, provided by the Immersive Web Working Group.

WebXR Samples

The WebXR Samples GitHub repository contains a wide range of sample projects that demonstrate how to use the WebXR API and various WebXR frameworks.

WebXR API Specification

The WebXR API Specification provides detailed documentation on the WebXR API, including examples and usage guidelines.

A-Frame School

A-Frame School is an interactive tutorial that teaches the basics of building VR experiences using the A-Frame framework.

Three.js Fundamentals

Three.js Fundamentals is a comprehensive guide to using the Three.js framework, including detailed explanations and interactive examples.

Wonderland Engine Tutorials

Wonderland Engine offers a library of official mini-tutorials, as well as an active youtube channel.  

 

With these tools and resources, you'll be able to start creating your own WebXR games. Still have questions, or just feel like talking WebXR? Join the conversation on our Discord server!