WebGLBackground: Rendering issue with Reflector

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]

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.

[Mugen87]

Yes, it does!!! Yay! 🎉 🙌