< home

WebXR Layers Samples


This project is a product of an Major League Hacking (MLH) Spring 2021 Fellowship open source contribution!

Composition of WebXR layers has significant benefits. This application is a small collection of samples that demonstrate creating and interacting with video layers in an XR environment. Because video layers cannot be interacted with directly via a controller, a 3D rendering library is used to achieve the desired interactions, including video playback controls, and moving and resizing layers. For this project, we chose to use Three.js as our main 3D rendering library.


Featured by Facebook and Major League Hacking for my contribution to the WebXR project!


Kickstarted open source scene for WebXR and WebXR layers.


Overview and minimal viable product:

Static overview

Application Architecture


Application Architecture

For in-depth discussion, see here.

User Interface

User Interface


Toolbar Interactions

Four main playback controls:

  1. Play / Pause
  2. Rewind 15s Backwards / Skip 15s Forwards
  3. Restart
  4. Progress Bar Point Select

Toolbar Interactions

Moving Video Layers

Moving With Controller

Moving With Hand

Resizing Video Layers

Resizing With Controller, Fixed

Resizing With Controller, Fluid