← Back to Index Scene_03 · DepthShift ● live
Scene 03 · WebXR Hologram · 2025

DepthShift

Three.js · WebXR · GLSL Vertex Shader → Particle Field

DepthShift extrudes flat imagery into an orbitable particle volume using a depth map and a custom vertex shader. The same structure extends into Quest 3, where the depth field can be anchored to physical surfaces as a lightweight spatial hologram.

Three.js WebXR GLSL Particles
Montreal, QC
2025
OUTPUT
Particle Field
WebXR
01 · Problem

Depth maps are often computed, then left trapped in flat interfaces.

Single images and videos can now yield useful depth estimates, but most workflows stop at visualization overlays or offline processing. The latent spatial structure is present, yet it rarely becomes something directly navigable.

DepthShift focuses on that gap. It takes a flat media source plus depth data and asks how little machinery is required to turn the result into a convincing spatial object in both browser and headset.

DepthShift particle field overview
DepthShift · depth reprojection into an orbitable point field
02 · Context

A bridge between flat media and situated holograms.

DepthShift sits at the intersection of browser graphics and mixed reality. It borrows from point-cloud aesthetics, but its goal is less about faithful reconstruction than about fast translation: take an ordinary piece of media and let it behave like a lightweight 3D apparition.

The Quest 3 companion pushes that logic further. Once the same depth field can be anchored through plane detection and manipulated with hand tracking, the experiment stops being only a viewer and starts becoming a spatial media primitive.

03 · Approach

Extrude a dense particle grid along the depth axis.

A source image or video is paired with a depth map and passed through a custom GLSL vertex shader. The shader displaces a dense particle grid along Z per pixel, producing an orbitable point cloud that reads as both image and volume.

The browser version emphasizes inspection and control. The WebXR version reuses the same depth-derived mesh logic but anchors it to real-world surfaces on Quest 3, with plane detection and hand tracking providing the bridge from representation to placement.

04 · Stack

Shader-driven depth reprojection across browser and headset.

Rendering
Three.js · custom GLSL vertex shader · dense particle system
Backend / Data
Image or video source paired with externally generated depth maps
Pipeline
Flat media + depth map → per-pixel Z displacement → orbitable field / anchored XR mesh
Deploy
Vercel · depthshift.spatial-index.xyz · Quest 3 WebXR companion
05 · Reflections

A small shader can open a large spatial jump.

DepthShift shows how far a lightweight reprojection technique can go before full reconstruction is necessary. The result is not a full model, but it is spatial enough to change how the source media is perceived and handled.

It also established a practical bridge between browser graphics work and later XR experiments. Once plane detection and hand tracking were in place, headset deployment stopped feeling separate from the rest of the stack.

06 · Build Log

From depth map to hologram.

2025
Particle reprojection prototype
Tested per-pixel Z displacement on a dense grid to translate flat depth information into an orbitable field.
2025
Shader refinement
Adjusted the vertex shader and point density until the field held together as a readable image-volume hybrid.
2025
Quest 3 companion
Extended the technique into WebXR with plane detection and hand tracking so the depth field could be placed onto real surfaces.
2025
Launch
depthshift.spatial-index.xyz live with browser particle viewing and an XR anchoring path for Quest 3.