WebXR Device API: Reference Space and Render Loop

Learn about spatial tracking, render loop, and state updates in the WebXR Device API.

So far, we’ve learned how to initialize the WebXR API through a browser. Next, we’ll understand how WebXR performs spatial tracking in the VR headset and recursively renders the XR content.

Reference space

Developers can analyze the mobility needs of the experience by defining an appropriate reference space. WebXR supports several different reference spaces. A reference space is a virtual coordinate system that defines the origin and orientation of a WebXR session. It allows WebXR applications to map the physical world to a virtual space and enables developers to create immersive experiences that interact with the user’s surroundings. We discuss the reference spaces supported by WebXR below:

  • viewer: This is the default reference space in WebXR and doesn’t require any tracking, such as those that use click-and-drag to explore the environment.

  • local: This reference space is used if the XR experience doesn’t require tracking, but the initial position of the experience needs to be initialized on runtime.

  • local-floor: This is similar to the local reference space but also identifies the floor level and sets its own y-axis coordinate for the XR experience.

  • bounded-floor: This reference space is preferred when the user moves around to interact with the environment within a specific boundary fully.

  • unbounded: This reference space is preferred when the user is free to move around their physical environment and travel significant distances.

The following flowchart shows how to analyze reference spaces in your environment:

Get hands-on with 1200+ tech skills courses.