Three.js: Shadow problem with logarithmic depth buffer

[1147079942]

use the logarithmicDepthBuffer cause shadow problem, use threejs r108dev
this is the example link
https://raw.githack.com/1147079942/three.js/dev/examples/webgl_shadowmap_viewer.html

Three.js version

• [x] Dev
• [x] r108
• [x] r107

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, ...)

[1147079942]

problems arising from actual use

[Mugen87]

Here is your code slightly modified as an interactive live example:

https://jsfiddle.net/yqxencra/

Indeed, it looks like a bug when rendering shadows with logarithmicDepthBuffer.

[WestLangley]

this is the example link
https://raw.githack.com/1147079942/three.js/dev/examples/webgl_shadowmap_viewer.html

That branch is 722 commits behind mrdoob:dev.

This issue was likely fixed in #17442.

[1147079942]

i guess i know the reason, hope it can help. the meshDepthMaterial not use the logarithmicDepthBuffer extend. make meshDepthMaterial use the extend, if can set this parameter for meshDepthMaterial by custom could be better, it will affect my old function.
https://github.com/mrdoob/three.js/pull/17174#discussion_r312306578

[WestLangley]

@1147079942 @Mugen87 Please try the current dev branch r.109dev.

/ping @gkjohnson for your opinion

[gkjohnson]

If I'm thinking about it correctly then what could be happening here is that because the directional light uses an orthographic camera the generation of the shadow map is being plagued by the depth buffer issues illustrated in #9108. While the values output to the shadow map are _not_ logarithmic the depth buffer is which results in an unexpected and incorrectly formed shadow map.

If that's what is causing the problem then I believe #17442 should have addressed this, as well. It would be good to test this on latest dev.

This issue also sounds like #7815 so that can probably also be closed if this is proven to have been fixed.

[Mugen87]

This issue was likely fixed in #17442.

Looks good: https://jsfiddle.net/qa53t8dm/

[1147079942]

the shadow looks good, but what happen to that outside look.i will prefer not use the logarithmicDepthBuffer

[Mugen87]

but what happen to that outside look

Can you please explain what you mean by that?

[1147079942]

i can't up load the picture, it looks not correct. the object's face is break.

[1147079942]

but what happen to that outside look

Can you please explain what you mean by that?

[Mugen87]

Um, I don't see this artifacts on my computer. Can you please share your system specs? Besides, what browser are you using?

[1147079942]

Um, I don't see this artifacts on my computer. Can you please share your system specs? Besides, what browser are you using?

system：mac

browser：chrome 76.0.3809.132 （all extend set is default）

[Mugen87]

Can you please share the CPU and GPU model, too?

[1147079942]

Can you please share the CPU and GPU model, too?

cpu : 17
gpu: NVIDIA GeForce gtx760

it has problem in any browser or system here.

[mrdoob]

@1147079942 what version of MacOS?

[1147079942]

@mrdoob 10.13

[1147079942]

what version of MacOS

[1147079942]

what's the truly reason cause that.

[WestLangley]

Is this the test case you are using? https://jsfiddle.net/qa53t8dm/

[1147079942]

https://jsfiddle.net/qa53t8dm/

[WestLangley]

Did you clear your cache first?

Do the artifacts appear when logarithmicDepthBuffer is false?

[1147079942]

Did you clear your cache first?

Do the artifacts appear when logarithmicDepthBuffer is false?

of course and i has update the chrome to the newest version. this test code look good on my phone. but i try a lots of computer in my company, no one can render it correct.
when logarithmicDepthBuffer is false the picture looks ok.

[1147079942]

the render picture on ipad looks object is right, but shadow is wrong

[WestLangley]

Renders correctly on MacOS High Sierra 10.13.6 AMD Radeon HD 6750M, Chrome, FF, and Safari.

[1147079942]

Renders correctly on MacOS High Sierra 10.13.6 AMD Radeon HD 6750M, Chrome, FF, and Safari.

some laptop is good. all the pc has same problem.
will you fix this compatibility of this problem?
@Mugen87 @1147079942 @mrdoob may i get some article or explain about this problem, thanks.

[Mugen87]

will you fix this compatibility of this problem?

If it's a hardware or driver issue, there is in general not much we can do. The problem is that I and the others can't reproduce the issue. That makes any kind of investigation more complicated.

may i get some article or explain about this problem, thanks.

TBH, I have no idea what's going wrong. Does it work if you update the macOS version to the latest on (10.14.6)? Update the OS also updates system drivers.

[1147079942]

will you fix this compatibility of this problem?

If it's a hardware or driver issue, there is in general not much we can do. The problem is that I and the others can't reproduce the issue. That makes any kind of investigation more complicated.

may i get some article or explain about this problem, thanks.

TBH, I have no idea what's going wrong. Does it work if you update the macOS version to the latest on (10.14.6)? Update the OS also updates system drivers.

I test so many personal computer, many windows system has the same problem, I don't think update the system or hardware can solve this very well.I afraid I need learn more about the shader now, wish me luck.

[WestLangley]

I am not able to reproduce the artifacts, either.

@1147079942 I suggest you avoid using logarithmic depth buffer.