THREE.JS / FOUNDATIONS 191

Depth can move with you.

Study the official custom-depth bridge: a WebGL-only ShaderMaterial samples a two-layer depth array, while controller selectstart/selectend attaches and releases the same objects that the shader shades.

Initializing Preparing renderer

Preparing WebGLRenderer, ShaderMaterial, depth-array fixture, and controller spaces...

mode: -
controllers: -
selected: -
owned: -
depth: -
occlusion: -
ray hits: -
events: -
draws: -
frames: -

Desktop controller harnessofficial drag listeners

Target

Occlusion strength 0.70 use procedural desktop depth array

Connect a virtual controller, aim at an object, then selectstart to attach it to the target-ray space.

Event sequencewaiting

No controller events yet.

active controller-

target-ray mode-

object ownershipscene group

controller moves0

The log records connection, hover, selectstart, move, selectend, and disconnect transitions.

Custom depth contractWebGL-only boundary

ShaderMaterialcustom GLSL fragment

sampler2DArray depthColortwo XR views

hasDepthSensing()capability gate

getDepthTexture()session depth input

controller.attach / group.attachdrag ownership

The procedural array exercises the same shader uniform shape on desktop. Native depth texture dimensions and occlusion still come only from a compatible immersive XR session.

Capability boundaryprobing

WebXR API-

immersive VR-

XRButton-

depth sensing-

reference space-

Desktop simulation verifies the shader, depth-array, and drag contracts; physical depth data, occlusion alignment, controller pose, and immersive timing require a headset.

This study intentionally uses WebGLRenderer because Three.js ShaderMaterial is WebGL-only. The XR button requests optional depth-sensing; desktop depth is explicitly procedural.

THREE.JS FOUNDATIONS LAB