Remove edge highlighting when using shadows

I am encountering an issue which isn’t new: highlights on mesh edges when using shadows:

The answers available online always seem to point to tweaking the light shadow bias or tweaks to effect composer passes:

I’ve uploaded a simple sample that doesn’t include any post processing:

While this little line between the two objects might not seem like much in the sample, the scene I am working with has many objects and anytime there is such an edge, this happens. So the issue is very apparent. Tweaking the shadow bias only seems to make it worse with bigger values…making the values smaller doesn’t solve it. It seems to happen only on concave edges.

btw, the same can be seen in the PCSS example:

Shadowmap sample:

What are some things I could try to mitigate or solve this issue?


Any ideas?

this is shadow bias, you can set it on the light. try extremely small negative (or maybe even positive) values: -0.00001 and go higher lower until it more or less fits. you may not eliminate gaps entirely in some cases.

Unfortunately no amount of tweaking the shadow bias has helped.

use different shadows then. like What's the fastest way to use stencil shadows in modern three.js?

1 Like

thanks for the suggestions. I was hoping I wouldn’t need to resort to such options.

btw, you can pause the example in debugger and type this in the console:

scene.children[6].position.y += 0.01

observe the seam disappear :joy: it will come back when there is a ball passing over it, though.

1 Like

again, same trick helps, although not quite as much:

1 Like

Ok. Thanks for the suggestions. Still not fixing my issue unfortunately.

Material side default and material.side=THREE.DoubleSide;

as long as it also does not receive shadow, it is fine :sweat_smile:

1 Like

Changing the sideness does help the edge highlighting, but at the cost of some wicked banding:


After tweaking the shadow bias it does seem I can get rid of the banding to some extent!