Setting transparent meshes in WebXR causes weird flickering glitch

Questions
,
1

Hey guys


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

1 Like
3

Did you try setting .furumstrumCulled to false ?

1 Like
5

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

6

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:

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