Three.js: Single translucent object re-render incorrectly with shadow map enabled

[nickcoutsos]

Description of the problem

I've made a jsfiddle to illustrate my problem: https://jsfiddle.net/nickcoutsos/xzfoc8a9/41/

The description follows, but to use it quickly just click the big red Render button in the top right corner.

Here's the steps to reproduce:

1. Set up a scene, camera, and renderer with shadowMap.enabled = true
2. Add a single mesh to the scene with a material that includes {transparency: true, opacity: 0.5}
3. Render a single frame. (so far everything looks fine)
4. Render a second frame.

At this point the object looks... less transparent... brighter?

Here are my first and second renders respectively in case others can't reproduce the issue from the fiddle.

I'm not sure if it's that the buffer isn't being cleared properly or what, but there are couple of things I've found that ensure it doesn't happen:

• Disable the renderer's shadow map, or,
• Have at least one object with a non-transparent material rendered.

In the latter case it's the transparent flag itself that matters and not just opacity === 1. I just discovered this yesterday so I haven't had a lot of different cases to test.

I've also tried:

• explicitly setting renderer.autoClear = true
• manually calling renderer.clear() before rendering
• adding the forceClear argument when rendering

Three.js version

• [x] Dev
• [x] r100
• [x] 98

Browser

• [ ] All of them
• [x] Chrome (71.0.3578.98)
• [x] Firefox (64.0.2)
• [ ] Internet Explorer

OS

• [ ] All of them
• [ ] Windows
• [x] macOS (10.13.6)
• [ ] Linux
• [ ] Android
• [ ] iOS

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

Intel Iris Graphics 6100

[Mugen87]

Many thanks for reporting the issue and the fine test case! There was actually a bug in WebGLShadowMap. The linked fix should solve the problem.

[nickcoutsos]

You're a hero! I'm going to pull your branch and try that out tonight, thanks!