WebXR Visualizer

Audio-reactive WebXR visualizer built with plain HTML and vanilla JavaScript — Butterchurn-driven visuals, passthrough AR, shared scene lighting, and a full in-headset menu. No build step, no frameworks.

Live Demo

• Three visualizer modes: Toroidal, Skysphere, Sky Toroid with optional horizontal mirroring
• Butterchurn preset engine starts immediately on page load
• Audio-reactive floor colors and shared scene lighting

• Flashlight: controller-driven circular passthrough cutouts with radius and softness controls
• Distance: near-depth cutout mode — geometry closer than a configurable distance opens toward passthrough, with optional sound-reactive modulation
• Echo: repeating depth bands alternating between passthrough and modified reality, with phase animation, wavelength, duty cycle, and selective sound-reactivity
• Unified Depth Pipeline: xr-runtime packages current per-eye depth source packets, while xr-depth owns source canonicalization, native-resolution smoothing, screen-space spline upscaling, and centralized visibility derivation
• Matched Depth Views: immersive AR requests required WebXR depth sensing with matchDepthView: true, depthTypeRequest: ["raw"], and dataFormatPreference: ["float32"], letting the runtime choose the supported usage path
• Stable Metric Semantics: planar depth uses current view-space depth; radial depth derives real distance from the current view ray without reconstructing world points or applying extra motion compensation
• Central Visibility Semantics: fade = 0 is a hard threshold on the reconstructed field, while fade > 0 fades only over the configured metric interval from threshold to threshold + fade; consumers do not rebuild fallback masks from raw depth presence
• Lighting Anchoring: Auto, VR World, and Real World anchor modes for passthrough lighting placement, with Auto preferring real-world adhesion when usable depth is present and falling back to VR-world anchoring otherwise
• Depth-bound Light Projection: passthrough lighting consumes the shared screen-space visibility texture for depth-aware overlays, while fixture footprints stay in the current projected view
• Shared Light Layers: fixture effects now build one reusable lightLayers frame buffer that projection and passthrough share directly, instead of repacking per-frame object lists into renderer-specific arrays
• Background mix crossfades between visualizer and darkened modified reality via manual or sound-reactive blend modes

• Lighting modes: None, Uniform, Spots, Club (preset- and audio-driven)
• Lighting presets: Aurora Drift, Disco Storm, Neon Wash, Stereo Chase, Pulse Strobe
• WebXR depth sensing for passthrough masks and depth-aware overlays in immersive AR
• Shared fixture groups drive both passthrough lighting and VR-world scene lighting so color and timing stay synchronized
• Wall-bound fixture effects keep their authored vertical placement in the fallback room, so silhouettes, beats, and runners stay on believable wall tracks

• Prefers immersive-ar with local-floor, falls back to immersive-vr
• WebXR rendering via XRWebGLLayer, with XRWebGLBinding used for depth queries when available
• Desktop preview with shared locomotion: walking, jumping, sprinting, crouching, tiptoe, airborne boost
• Collision world with platforms, structures, and GLB props
• In-headset menu plus mirrored desktop preview using the same menu system

The menu exposes these sections:

• Jump Mode: Double, Multi
• Eye Distance and World Opacity sliders
• Background: manual or sound-reactive mix mode with blend control
• Passthrough: Flashlight toggle and depth modes (Distance, Echo)
• Scene Lighting: lighting mode, light preset, anchor mode, darkness control
• Visualizer Mode selector with horizontal mirror toggle
• Butterchurn Preset selector
• Session: Exit VR button
• Audio Meters: Level, Bass, Kick, Bass Hit, Transient, Beat Pulse, Strobe, Fill, Left Hit, Right Hit

The main control deck is laid out in multiple numbered columns: audio meters run across the full top row, Background now sits in the left stack directly under World Opacity, Passthrough and Scene Lighting occupy the second column, and Exit VR is reserved for the footer at the bottom. The menu texture is wider than the original single-column version, while the in-headset plane stays smaller than a literal 2x expansion.

There is no build step and no backend. Repository text files use LF line endings by policy; .gitattributes and .editorconfig keep that stable across editors on Windows, macOS, and Linux.

1. Clone or download the repository.
2. Open index.html in a modern browser.
3. Wait for the XR status line to report readiness.
4. Use the desktop shell to test audio input, menu options, and preview movement.
5. Enter immersive mode when the browser and headset report support.

Open TestLab.html to inspect one lighting effect at a time instead of full presets. The test lab starts with neutral passthrough settings (Uniform, Manual, Mix 100%) so the active effect stays easy to judge in isolation. It uses the same runtime modules as index.html with a reduced in-headset menu focused on effect parameters.

adb forward tcp:9222 localabstract:chrome_devtools_remote

adb -s <pico-ip>:5555 shell cat /proc/net/unix | findstr /I "devtools weblayer"

adb -s <pico-ip>:5555 forward tcp:9222 localabstract:weblayer_devtools_remote_<pid>

session.depthUsage -> InvalidStateError: Depth sensing feature is not supported by the session
session.depthDataFormat -> InvalidStateError: Depth sensing feature is not supported by the session
frame.getDepthInformation(view) -> NotSupportedError: Depth sensing feature is not supported by the session
XRWebGLBinding.getDepthInformation(view) -> null

chrome://flags/#webxr-incubations -> Enabled
chrome://flags/#enable-openxr-android -> Enabled
chrome://flags/#enable-openxr-extended -> Enabled
chrome://flags/#webxr-runtime -> OpenXR

• matchDepthView is enabled by default and is part of the effective immersive-AR depth request.
• xr-runtime.js emits one current-view DepthSourcePacket per eye and does not own reprojection, reconstruction, or masking.
• xr-depth.js is the only module that understands raw-depth decoding, native smoothing, spline upscaling, metric derivation, and visibility classification.
• Consumers use fieldTexture, coverageTexture, and visibilityTexture from xr-depth.js; they do not perform their own reprojection, fallback masking, or world-point reconstruction.
• The shared processed field texture stores metric depth in r; no depth-derived world point channels are produced.
• coverageTexture represents valid screen-space depth coverage after smoothing and upscaling.
• Depth -> Diagnostic can show either direct source depth or processed depth with Rainbow, Grayscale, and Bands palettes. Range and Cycles control how the selected palette repeats over metric depth.

Deployed via .github/workflows/deploy-pages.yml on pushes to main.

Parts of this project are derived from or based on Butterchurn, and this repository also bundles Butterchurn preset data.

• https://github.com/jberg/butterchurn
• https://github.com/jberg/butterchurn-presets

This repository is licensed under the MIT License.

Bundled third-party components:

• butterchurn.min.js is derived from or based on jberg/butterchurn and is covered by the MIT License
• butterchurnPresets.min.js is derived from or based on jberg/butterchurn-presets, which is published on GitHub as MIT-licensed
• bundled third-party licensing details are collected in THIRD_PARTY_LICENSES.md

If you redistribute or modify the bundled Butterchurn files, keep the upstream copyright and permission notices with them and verify the current upstream license files during release review:

• https://github.com/jberg/butterchurn
• https://github.com/jberg/butterchurn-presets

Project history is tracked in CHANGELOG.md.