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.