Issue with WebGLRenderer WebGLShadowMap - artifacts

Questions
,
1

Sometimes I’m getting this weird behaviour with shadows:

image
image838×801 14.7 KB

How can I get rid of those line artifacts?

Here is a direct link to the stackblitz in case you cannot see it for some reason.

I think renderer.shadowMap.type = BasicShadowMap; may help but what about other shadow types like PCFSoftShadowMap, VSMShadowMap and PCFShadowMap?

Thanks.

2

Look into setting normalBias and bias in the lights shadow map.

These are some reasonable values I’ve used in another project. These are typically the types of things you tweak until they look good for your scene:

light.shadow.normalBias = 1e-2;
light.shadow.bias = - 1e-3;
2 Likes
3

Looks like it’s working, Thanks alot @gkjohnson.

I have another question but I wasn’t able to reproduct it on Stackblitz.

Sometimes when I’m changing the light.shadow.mapSize.width and light.shadow.mapSize.height the shadow gets a huge indentation.

This is how it looks like with 512x512:

image
image882×630 33.4 KB

and this is how it looks like with 1024x1024:
image
image1011×647 40.6 KB

Do you happen to recall a solution for this issue as well by any chance?

5

I don’t think I’ve seen changing the shadow map resolution affect the result like that. From the image it looks like the light / shadow camera near plane has been moved too close to the objects casing shadows.

6

You are probably right, to me it’s also looks like the SpotLightShadow's PerspectiveCamera.

I have tried:
light.shadow.camera.updateProjectionMatrix();
light.shadow.needsUpdate = true;
light.shadow.updateMatrices(light);
But to no avail.

What I have ended up doing is just creating a new SpotLightShadow instance for the light, which is a bit problematic considering three.js doesn’t export this class anymore.

I guess I could also just declare a new SpotLight altogether while using copy or something.

Anyway, as I said, I cannot reproduce the issue on Stackblitz so I guess that’s the way I’m going to do things.

Thanks.