Material must set Material.customProgramCacheKey

[gromgull]

Currently, if you use multiple of these materials, only one (the first) shader gets used.

If you use onBeforeCompile you must set the cache key: https://threejs.org/docs/?q=meshstand#api/en/materials/Material.customProgramCacheKey

See https://github.com/mrdoob/three.js/pull/17567 and https://github.com/mrdoob/three.js/issues/19377

[FarazzShaikh]

Ah yes we ran into this issue in another lib. The Cache key is the shader program itself, since each new instance of CSM is initialized with the same base material shader they get the same cache key.

Thanks, will fix

[FarazzShaikh]

Currently, if you use multiple of these materials, only one (the first) shader gets used.

Do you have any code I can take a look at for this? If I duplicate the water material and give them different colors, it works as expected:

    <Water base={Base} />
    <group position={[-5, 0, 0]}>
        <Water color="#ff0000" base={Base} />
    </group>
    <group position={[0, 0, -5]}>
        <Water color="#ff00ff" base={Base} />
    </group>

I think you might be running this this https://github.com/FarazzShaikh/THREE-CustomShaderMaterial/blob/7b06e53ce5daea2b70f99737d3271be8db948a21/example/src/components/Water.tsx#L23

That like overrides the unifroms on the Water material, so it appears as though even duplicates are the same material.

Closing for now, will re open if I run into this.

[FarazzShaikh]

Never mind, I found that this is the case where you use 2 completely separate instances of <CustomLayerMaterial />

[FarazzShaikh]

Ok applied patch https://github.com/FarazzShaikh/THREE-CustomShaderMaterial/blob/bc22d80088b1b32ec62e34c304ec5453c69648d6/src/vanilla.ts#L33-L35

Little hacky but will do for now. Need to find a better, cache-friendly solution. Thanks so much for the report!