Changing shadow type at runtime

When changing shadow type at runtime using a gui I get very strange behaviour. If I start with a VSM and change to another type they display extreme shadow acne. If I start with Basic, PCF or PCFSoft and change to VSM the reverse is the case. Also changing between Basic, PCF and PCFSoft at runtime has no discernible difference. It looks like after changing type you need to do more work. Please advise.

1 Like

I would not describe my experience with shadows as great. However, shadows are very sensitive to their parameters, they usually need fine-tuning and the best values depend significantly on the scene, on the camera, and on the type of the shadow algorithm. So, when you change the type of the shadow, you have to readjust all accompanying parameters, otherwise you will get strange shadows, full of artifacts arranged in various patterns, etc.

1 Like

Hi Pavel
I appreciate your advice. But I don’t think that’s the issue. If I start with Basic, PCF, PCFSoft or VSM I have no problem. So the setup for all types works fine. The issue is switching. I might delete the renderer and recreate on a shadow switch.
Cheers Nik

Try this right after switching the shadow type:

scene.traverse( (child) => {if( child.material ) child.material.needsUpdate=true} )

This should force all materials to be recompiled.


You’re a total marvel. I should have thought of that!! Thanks, working perfectly now.


Just wanted to tack on my go to shadow advice… make sure the shadow camera near and far are set to closely match mainly the area you want the shadows to cover… that helps focus the resolution of the shadowmap on the area that it needs to be highest. It’s less important with VSM/cascaded shadows but… just general advice:

So if your scene is 100 units wide and your shadow light is 50 units above the ground… a good and far values might be 1 and 100…

Then the other thing is the shadow.bias… which, depending on the situation, should be a very small positive or negative number… chosen to minimize the shadow acne…

Values like .0001 or -.0001 and increase or decrease them until the acne goes away.

1 Like

I love ThreeJS, so many people sharing their skills and knowledge. Mr Doob shared a post on Twitter showing that Apple are using the library to display an IPhone. If you’re using the library you’ve made the right choice.