WebGLBackground: Rendering issue with Reflector

[Mugen87]

Description of the problem

While investigating an issue in the forum, I've encountered a rendering problem with scene.background.

This fiddle shows how it should look like. Proper reflections of the torus knot and the skybox:
https://codepen.io/anon/pen/XqeyBM

But if you set transparent to true on the reflectors material, it looks like this:
https://codepen.io/anon/pen/XqeyxR

For some reasons, the (white) clear color of the renderer is visible in the reflector's render target at certain parts. I have found two ways to solve this problem:

• Don't use scene.background but manually create the skybox like in this example:
  https://codepen.io/anon/pen/jxGQQb
• It does also work if you set depthWrite to true of the shader material in WebGLBackground.

I don't know so far why these approaches fix the issue but I suppose it has to do something with the way WebGLBackground renders the background.

Note: The reflector is rendered after the background in all these examples.

Three.js version

• Dev
• r92
• ...

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

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

[mrdoob]

Does #15329 solve this one?

[Mugen87]

Yes, it does!!! Yay! 🎉 🙌

[Mugen87]

Um, I'm afraid this problem is still not solved. #15329 fixed the issue when the reflectors material is transparent: https://codepen.io/anon/pen/XqeyxR

But now the problem occurs if the reflectors material is opaque, see https://codepen.io/anon/pen/XqeyBM

The problem is also visible in the WebVR sandbox demo. As soon as you remove the background, the glitch is gone.

[Mugen87]

I think we can fix the issue by removing the following line in Reflector:

three.js/examples/js/objects/Reflector.js

Line 66 in 0dde081

this.renderOrder = - Infinity; // render first

@mrdoob Do you know the reason why e0d7e31 was added?

[mrdoob]

The problem is also visible in the WebVR sandbox demo. As soon as you remove the background, the glitch is gone.

I think #15662 fixed that issue.