With the rise of headsets like the Meta Quest 3 and Apple Vision Pro, AR is primarily achieved via high-resolution, color video passthrough rather than optical see-through displays.


Module 1: Requesting Passthrough in WebXR

Passthrough can be enabled by setting the session mode to immersive-ar and ensuring the background is transparent.

passthrough.jsjavascript
navigator.xr.requestSession('immersive-ar').then((session) => {
  // In Three.js, ensure the renderer has alpha: true
  const renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setClearColor(0x000000, 0); // Transparent background reveals camera feed
});

Module 2: Advanced Composition & Masking

You can use depth sensing to occlude virtual objects behind real-world furniture, enhancing the illusion of presence.