▲ 4 r/WebXR
How can I recreate this stereoscopic "looking through glasses" effect in WebXR?
Hey everyone,
I'm trying to build something similar to the attached image — a WebXR experience where the user sees the real world (or a passthrough/scene) through a pair of virtual glasses frames rendered in front of each eye, with the area outside the lenses masked out in black.
What I'm specifically trying to achieve:
- A stereoscopic view (left/right eye) rendered with WebXR
- Virtual glasses frames overlaid on each eye view, so it feels like you're literally looking through a pair of glasses
- Everything outside the lens area is masked / blacked out
- The "lens" region shows the passthrough camera feed (or a 3D scene)
How can I recreate this stereoscopic "looking through glasses" effect in WebXR?I'm comfortable with Three.js / WebXR basics, but I'm not sure about the best approach for:
- Rendering the glasses frame mask correctly per-eye (stencil buffer? alpha mask plane in front of the camera? shader?)
- Aligning the frame so it feels anchored to the user's face rather than the world
- Getting the passthrough camera feed to show through the lens region on devices that support it (Quest, Vision Pro, etc.)
- Whether to do this as a fullscreen post-process or as geometry parented to the XR camera
Has anyone built something like this? Any references, demos, or pointers to the right WebXR APIs / Three.js patterns would be hugely appreciated.
Thanks!
u/Jabbour_Dandan — 4 days ago