# Setting transparent meshes in WebXR causes weird flickering glitch

**URL:** <https://discourse.threejs.org/t/setting-transparent-meshes-in-webxr-causes-weird-flickering-glitch/54501>\
**Category:** Questions\
**Tags:** webxr, materials\
**Created:** [August 1, 2023, 12:24pm UTC](https://discourse.threejs.org/t/setting-transparent-meshes-in-webxr-causes-weird-flickering-glitch/54501 "2023-08-01T12:24:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gabriel\_Schaldach](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gabriel_schaldach/32/36603_2.png) [@Gabriel\_Schaldach](https://discourse.threejs.org/u/Gabriel_Schaldach)\
**Post date:** [August 1, 2023, 12:24pm UTC](https://discourse.threejs.org/t/setting-transparent-meshes-in-webxr-causes-weird-flickering-glitch/54501/1 "2023-08-01T12:24:40Z")

</div>

Hey guys

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/e/1ebb7b7ed136d817e7cb4af1c7af0581ccdbda91.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/e/1ebb7b7ed136d817e7cb4af1c7af0581ccdbda91.mp4)
  
I’m currently building an app using THREE in WebXR and I’m not able to set the materials of a mesh to some opacity. As soon as i put transparent = true on the materials, without even setting an opacity, the glitch similar to a flickering already starts.  
Any idea on what is going on?  
Already tried attributes such as material.depthWrite = false, material.depthTest = false, mesh.renderOrder, and both depthWrite and depthTest have definitely helped, but didn’t solve it.  
A simple example in THREE would already help me. I have observed that the more meshes the gltf model has, the more this effect will happen.  
Live example: posicao-react.web.app

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [August 1, 2023, 4:55pm UTC](https://discourse.threejs.org/t/setting-transparent-meshes-in-webxr-causes-weird-flickering-glitch/54501/3 "2023-08-01T16:55:21Z")

</div>

Did you try setting [.furumstrumCulled](https://threejs.org/docs/index.html?q=obje#api/en/core/Object3D.frustumCulled) to `false` ?

---

<div class="post-metadata">

**Author:** ![Gabriel\_Schaldach](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gabriel_schaldach/32/36603_2.png) [@Gabriel\_Schaldach](https://discourse.threejs.org/u/Gabriel_Schaldach)\
**Post date:** [August 1, 2023, 6:49pm UTC](https://discourse.threejs.org/t/setting-transparent-meshes-in-webxr-causes-weird-flickering-glitch/54501/5 "2023-08-01T18:49:30Z")

</div>

Yep. The flickering stayed the same. Did for each element and the gltf object.

---

<div class="post-metadata">

**Author:** ![FuzzyWobble](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fuzzywobble/32/15221_2.png) [@FuzzyWobble](https://discourse.threejs.org/u/FuzzyWobble)\
**Post date:** [September 13, 2024, 11:22am UTC](https://discourse.threejs.org/t/setting-transparent-meshes-in-webxr-causes-weird-flickering-glitch/54501/6 "2024-09-13T11:22:13Z")

</div>

If there are hidden meshes where visible=false, this will cause a lot of transparency glitching in webXR. To avoid this, when you hide a transparent mesh in webXR, do it like this:

```javascript
                    child.visible = false;
                    child.material.visible = false;
                    child.material.depthTest = false;
                    child.material.depthWrite = false;

```