< home

WebXR Layers Samples

Source

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.

Media

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

Contribution

Kickstarted open source scene for WebXR and WebXR layers.

Design

Overview and minimal viable product:

Static overview

Application Architecture

General

Application Architecture

For in-depth discussion, see here.

User Interface

User Interface

Features

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