Resizing Window causes VSM shadows to explode

I’m fighting some shadow acne and decided to use VSM shadows.

I have 1 directional light and an ambient light. I was getting murderous acne even with all the standard bias/map size adjustments.

Once I got VSM shadows dialed in things look good:

But once I resize the window, the shadows explode:

marking the map with needsUpdate = true; does nothing.

How can I reset the shadows? Is there any decent shadow guide? Seems like a constant nightmare.

This ended up being related to r3f doing something on the window resize.

If I set shadows="variance" on the it was able to survive window resizes and other re-renders just fine.

What the explosion is or it’s cause is unknown…

Here is a minimal R3F example of using VSMShadowMap that works without your fix. You can resize the preview window and it is ok.

VSMShadowMap works best on Directional and Spot Lights

1 Like

Thanks for that, love your site and examples btw (Gerstner waves is my favorite)

The issue was I’m making a bunch of demos that have a single shared Canvas. So I didn’t set the shadows on the canvas but using:

const { gl } = useThree();
gl.shadowMap.type = THREE.VSMShadowMap;

Which when the window resizes (or even a global react-rerender) causes something to reset and make everything look weird.

Doing it on the canvas doesn’t have this issue (like your example)
So I switched to that. Although that makes shadows on my other demos much heavier

1 Like