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 mrdoob/three.js#17567 and mrdoob/three.js#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

THREE-CustomShaderMaterial/example/src/components/Water.tsx

Line 23 in 7b06e53

useWaterControls(material)

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

THREE-CustomShaderMaterial/src/vanilla.ts

Lines 33 to 35 in bc22d80

	this.customProgramCacheKey = () => {
	return this.uuid
	}

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