Multiple <SoftShadows /> not working with different canvases.

[fully-john]

• three version: 0.163.0
• @react-three/fiber version: 8.16.1
• @react-three/drei version: 9.105.4
• node version: 20.8.1
• npm (or yarn) version: 10.1.0

Problem description:

I'm currently using a site where I need multiple canvas. I've looked into the <View /> component and tried using that. In that case, I can't have multiple different <SoftShadows /> components, which makes sense, since it's all rendered to the same canvas. However, I will be using two different canvases because the way our site is built. However, even in the case where I'm using two different canvases, I get a fragment shader issue (see image below).

Relevant code:

Error replicated here: https://codesandbox.io/p/sandbox/interesting-cannon-tm8m2m

let your = (bug, fix) => `be ${quick}`

Suggested solution:

Honestly, I'm not sure. It seems like you'd need some sort of validation for the fragment shader if it already exists or something. I'm not really knowledgeable enough with shaders to know unfortunately.

[skrat]

Same issue here. I need this fixed. Obviously this is because drei is mutating https://github.com/pmndrs/drei/blob/18c24eb5b5d7e110b17f108e3b15937ef581acad/src/core/softShadows.tsx#L148 THREE's properties. It should probably use private module variable to indicate whether this mutation already happened, and skip the mutation if it was done already.