Three.js: Mirror Example broken on Standalone Oculus Quest

[PlumCantaloupe]

The mirror example doesn't work on the Oculus Quest in three.js (and A-Frame 1.04 - https://github.com/aframevr/aframe/issues/4629) within the Oculus Browser and Firefox Reality when in immersive mode (appears to work before VR mode is entered interestingly). I have recreated the cubes WebXR r118.dev example and added a mirror here: https://glitch.com/~pure-threejs-mirrortest which leads to the following strange behaviours:

• object parented to the camera does not move in the mirror.
• object sorting appears to be broken on the mirror.

I haven't tested this example on the Oculus Quest using the link and Firefox Desktop, but as mentioned in the A-Frame issue linked above, I imagine it is fine as those mirror examples were.

I know this worked not so long ago, so perhaps on the switch to WebXR something broke on the Quest?

Three.js version

• [ ] Dev

  Browser

• [ ] Oculus Browser

• [ ] Firefox Reality
• [x] Firefox Desktop (using Oculus Link cable)
• [x] WebXR emulator (as noted here by @mrdoob https://github.com/mrdoob/three.js/pull/19666#issuecomment-651445442 )

OS

• [x] Windows
• [x] macOS
• [ ] Oculus Quest OS
• [x] iOS

Hardware Requirements (graphics card, VR Device, ...)

• [x] Oculus Quest 2D mode
• [ ] Oculus Quest VR mode

Quoting @mrdoob's relevant response from this issue #19666 to keep all information contained :)

object sorting appears to be broken on the mirror.

Fascinating. I can reproduce this in the Oculus Browser, but I can't reproduce when using the WebXR Emulator 🤔

It's unrelated to encoding though. Do you mind creating a new issue?

[Mugen87]

I've tested the webxr_vr_sandbox example on Oculus Browser with each release from r118 to r111 and all show the same rendering error.

https://raw.githack.com/mrdoob/three.js/r111/examples/webxr_vr_sandbox.html

When I remember correctly, this example still worked a few months ago (March/April) when I've tested all XR examples with my Oculus Quest. Can somebody test the above link with a different VR headset?

[Mugen87]

Well, the demo works with Daydream on a Pixel 1. So I guess this is a device issue. Maybe it's worth to report this to Oculus:

https://developer.oculus.com/bugs/

[mrdoob]

Indeed...

@Artyom17 For some reason, the mirror gets rendered on top of everything on the Quest 🤔

[PlumCantaloupe]

To be thorough I submitted a bug here: https://developer.oculus.com/bugs/bug/203927750864686/

Thanks everyone for looking at this. So strange :)

I'll try to poke at it some more to determine whether it is the existence of the virtual camera, or rather the rendertarget being drawn that is causing the issue. I feel it has something to do with the camera though as the active camera acts up and doesn't report appropriate world matrices breaking any entities parented to the camera itself (noted here also: https://github.com/aframevr/aframe/issues/4626).

[PlumCantaloupe]

Not sure if it helps but the virtual camera doesn't seem to have anything to do with it. I can render sorting appropriately by commenting out the following lines starting at line https://github.com/mrdoob/three.js/blob/83f334bd91d7870b2e2266e70791dd1265c98467/examples/js/objects/Reflector.js#L154 (line 169 in the ./jsm/objects/reflector.js Glitch example ):

//if I comment these lines of Reflector.js out the mirror doesn't render, but the sorting bug stops. 
//It appears switching renderTargets causes the issue. The other lines also need to be commented out to reduce motion sickness :P
renderer.setRenderTarget( renderTarget );

renderer.state.buffers.depth.setMask( true ); // make sure the depth buffer is writable so it can be properly cleared, see #18897

if ( renderer.autoClear === false ) renderer.clear();
renderer.render( scene, virtualCamera );

[cabanier]

It's suspicious that this is broken on the Oculus browser and Firefox reality. This points to either a bug in the experience or the low level graphics driver.

What I see in VR matches the non-immersive session. Can you record a video of what is wrong?

[cabanier]

Was the GL buffer created with depth?

[mrdoob]

Can you record a video of what is wrong?

@cabanier here you have: https://twitter.com/Firepal3D/status/1329741918566289408

[Mugen87]

FYI: The mirror's render target is created like so:

https://github.com/mrdoob/three.js/blob/4dc817354558be010fe765582044cd9ab67085b8/examples/jsm/objects/Reflector.js#L50-L56

So yes, the internal FBO does have a depth but not stencil buffer.

[mrdoob]

I hear this has been fixed! @cabanier what version of the browser has the fix?

[cabanier]

This is fixed by using the experimental WebXR Layers feature and this PR.
You can test it out with the current shipping Oculus browser even though it doesn't have the very latest version of the WebXR API.

We'd love to get feedback on layers (things that are now fixed or broken, performance, etc)
We're also considering a polyfill so authors can use layers even if the browser doesn't support them.

[mrdoob]

I hear (correctly this time I think 😅) this has will be fixed in Oculus Browser 13.2.