ALPHA

WebXR Spatial Layout
Multiple Video Player
for Quest3

Experience depth videos in immersive WebXR

▶ Launch Player
Spatial video player layout preview
Sample layout preview of the multi-screen WebXR player
Last commit: 2025-09-26T00:41:42+09:00 [ce0a0a1] main

Sample Videos

Download depth side-by-side videos to test the player

Gen-4_Zoe_sbs thumbnail

Gen-4_Zoe_sbs.mp4

Download sample video

 Cozy-time_sbs thumbnail

Cozy-time_sbs.mp4

Download sample video

Documentation

Everything you need to know about the player

WebXR Spatial Multiple Video Player

Disclaimer

  • This project is an experimental demo app created via vibe coding.
  • The app/service may change or stop without prior notice.

Local WebXR-enabled video player (static site). Use /player/ to open local video files (MP4/WebM/MOV/OGV/OGG/MKV best-effort) and play DepthSBS / S3D / 2D. PWA enabled (manifest.webmanifest, sw.js).

Pages

What is a Depth_SBS video?

It is a side-by-side export that captures the depth analysis of a monoscopic video using tools such as Video Depth Anything V2.

If you are familiar with Python, you can set up Video Depth Anything V2 locally and generate depth-augmented side-by-side videos on your own.

For a quick Depth_SBS workflow, we recommend the Owl3D app (https://www.owl3d.com/).

The free plan lets you create Depth_SBS clips up to one minute long. When you export with the RGB-Depth format and have an NVIDIA RTX-class GPU, you can convert Depth_SBS videos locally.

How to use (Player)

  1. On Quest 3, launch the browser and open this page.
  2. Press the Launch Player button to switch to the player view.
  3. Use the Open button in the bottom control bar to load your video.
  4. Once the video appears and plays in the player view, press Enter VR/AR in the bottom control bar to enter the immersive space.
  5. Inside the immersive space, press the right controller A button to enable the ray, select the node (the video mesh) with the ray, and keep holding the right controller squeeze button while moving the controller to reposition it.

For additional controller details, read the Controller/Hand operations (current) section below.

Supported modes

  • DepthSBS: color on left half, depth on right half; vertex displacement reconstruction; masking/edge cleanup supported
  • S3D: planar stereo (OU/SBS)
  • 2D: monoscopic 2D

Unsupported

  • Stereo180 (VR180): currently unsupported (previous support removed)

Controller/Hand operations (current)

  • Right controller (when gamepadInput enabled)
    • A button: toggle VR menu
    • Stick left/right: mesh Y rotation
    • Stick up/down (normal): mesh Y position (height) adjustment
    • Stick up/down (while squeezing): depthScale +/-
    • Trigger + Squeeze: scrub seek by yaw rotation (60s per radian)
    • Hold Squeeze (grip) alone: drag-move + rotate (follows right-hand pose)
  • Left controller (when gamepadInput enabled)
    • Stick (all directions): mesh move on X/Z plane
    • Squeeze (grip): combined with right squeeze for two-hand scale
    • Squeeze double-click: seek +20s
    • Squeeze triple-click: seek -20s
  • Both controllers (when gamepadInput enabled)
    • Left+Right Squeeze: two-hand scale (based on hands distance)
  • Hand tracking (when supported)
    • Left hand double pinch: seek +20s (requires selectedItem.video)
    • Left hand triple pinch: seek -20s (requires selectedItem.video)
    • Right Squeeze (controller) + left pinch: hybrid scale (distance-based)
    • Note: left-hand single pinch does not move/grab in current spec

Notes

  • Demo videos are not bundled. Use Open to select local files.
  • WebXR works only in secure contexts (HTTPS equivalent).