Zbuffer rendering issues in webXR context

Describe the bug

I was having issues with rendering on my current webXR AR app. The 3d models are randomly rendered inside out (I thought that I was seing the backfaces instead of the front faces) but actually I have the exact same rendering when I put depthWrite or depthTest to false in the material, so it seems to be related to depth Z buffer.
I was able to reproduce on the official Three.js webXR AR paint example, which is what I describe here.
We have a similar but not identical issue on another device, where we can see Z buffer ghosting and also the same “inside out” Z buffer issue.

To Reproduce

Steps to reproduce the behavior:
Go to the official webXR AR paint example with a webXR AR compatible android device (I am using a Samsung S8) https://raw.githack.com/mrdoob/three.js/dev/examples/index.html#webxr_ar_paint

Go into AR, touch to draw a 3D paint trajectory.
And randomly, the model is rendered apparently ignoring the depth (like with depthTest=false in the material). Sometimes it is back for a few second when you draw something else, or randomly. Sometimes you need to go out of AR mode and back in.

Expected behavior

The model should be rendered correctly, taking into account depth correctly.


Correct rendering of the 3d model, we see the outside of the model:

Incorrect rendering (randomly happening), we see the inside because apparently Z is ignored:



  • Device: Android device Samsung S8
  • OS: Android 8.0.0
  • Browser: Android Chrome 88
  • Three.js version: r125 and also tested on dev 126


2 thoughts on “Zbuffer rendering issues in webXR context

  1. The workaround is now known (see linked Chromium issue).
    On my side, I am doing this in my app in my main loop:

    let gl = this.renderer.getContext();
    this.renderer.render(this.scene, this.camera);

    And the issue is gone! yay! ;-D