Three.js: 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

• [x] Dev
• [ ] r92
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] 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! :tada: :raised_hands:

[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:

https://github.com/mrdoob/three.js/blob/0dde0819043776d5bd7bab01e6aa229692f06fd2/examples/js/objects/Reflector.js#L66

@mrdoob Do you know the reason why e0d7e315ce0a5ad61d3dce49f4cd2eb4dba62ff4 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.