react-three-fiber icon indicating copy to clipboard operation
react-three-fiber copied to clipboard

Resizing the window resets render shadowMap type and/or explodes them.

Open DennisSmolek opened this issue 1 year ago • 2 comments
trafficstars

When fighting shadow acne I decided to switch to using VSM Shadows. However I didn't want every one of the Jolt demos to use them. So I used:

const { gl, controls, camera } = useThree();
useEffect(() => {
    gl.shadowMap.type = THREE.VSMShadowMap;
//...
}

This works fine and my shadows look decent: Screenshot 2024-06-06 233009

Then I resize the window and they explode: Screenshot 2024-06-06 233028

I tried a few things, needsUpdate = true; changing values, reloading the light. finally I used a setInterval to set the shadowMap to use VSM again. And it works..

So then I went to the <Canvas> and set shadows="variance"

And bam. no more resizing explosions.

I'm not sure where in the React render cycle it is, but something is exploding the shadow maps and/or resetting them to whatever is set on the canvas.

this means using gl.shadowMap can expect to be overwritten at any time. (I was able to trigger it with things besides window resize)

DennisSmolek avatar Jun 06 '24 14:06 DennisSmolek

Hi @CodyJasonBennett,

I would like to work on this issue. Could you please assign it to me or let me know if there are any specific requirements or guidelines I should follow?

Thank you!

parthsali avatar Aug 20 '24 17:08 parthsali

Feel free to make a PR. Windows will need to be configured for symlinks, but our examples folder will automatically link and use your changes. Alternatively, each commit to your PR produces a Codesandbox build which you can install in a real project. For things which should be deterministic like this, I'll add a regression test often to help me develop, but I can add that for you based on an example.

CodyJasonBennett avatar Aug 21 '24 18:08 CodyJasonBennett