Textures about three-customshadermaterial HOT 3 CLOSED

NVM answered my own question.

I was just setting the prop on the CustomMaterial, but I needed to update the uniform value. Passing it in via a prop doesn't work.

Bad:

<CustomShaderMaterial
    myTexture={myTexture} 
    {...MaterialProps} 
 />

Good (maybe a nicer way to do this?, But it works)

useEffect(()=>{
 ref.current.uniforms.myTexture.value = myTexture;
},[])

<CustomShaderMaterial
    ref={ref}
    {...MaterialProps} 
/>

from three-customshadermaterial.

This is intentional as an API goal for CSM is to emulate standard ShaderMaterial syntax and that’s just how it’s done with shaders.

A nicer way to do this is to extend CSM/vanilla and make your own material class. Then you can define setters/getters to map JSX props to uniforms.

Untested pseudocode:

import CSM from "three-custom-shader-material/vanilla"
import { extend } from "@react-three/fiber"

class MyCustomMaterial extends CSM {
   constructor() {
      super({
         baseMaterial: ...,
         uniforms: {
            myTexture: { value: null }
         }
      })
   }
   
   set myTexture(value) {
      this.uniforms.myTexture.value = value;
   }
   
   get myTexture() {
      return this.uniforms.myTexture.value
   }
}

extend({ MyCustomMaterial: MyCustomMaterial })

<MyCustomMaterial 
   myTexture={texture}
/>

Unfortunately, having CSM handle this is infeasible as it requires dynamically generating getters/setters which may override setters/getters on the base material causing unintended effects. Its better to leave this in user-land

from three-customshadermaterial.

Yeah it works well. I was porting a shader over from Drei's shaderMaterial() and it did things just differently enough to throw a wrench in my brain.

Extending the base class is probably overkill for what I'm doing, but I like the example.

from three-customshadermaterial.