Uploaded March 2022 | Updated September 2026, 3 weeks ago

---

We're using fragment shaders to occlude threejs objects using the depth api from webxr. Occlusion is a requirement for augmented reality immersion. The depth api is very new and a little rough around the edges. If you have any difficulties let me know. There was a few educated guesses I took making this so if you notice a mistake let me know.

Resources:
live example for mobile: graemeniedermayer.github.io/ArExperiments/html/depthOcclusion.html

code:
github.com/graemeniedermayer/ArExperiments/blob/main/javascript/depthDiscard.js

formal docs depth API:
github.com/immersive-web/depth-sensing

best deep dive into shaders I've found:
youtube.com/watch?v=kfM-yu0iQBk