React-Three-Fiber sending uniforms to custom shader with TypeScript

Question

Im converting to TypeScript and I cant seem to get uniform sent into shader. There are no errors anywhere and everything runs but uniform is not updating, nor is it really being sent in the first place I think. I think that because I set uTime to 0.5 and my box is just green, meaning red channel value that my uTime uniform is supposed to affect doesnt do anything.

this is what I have

function Box(props: JSX.IntrinsicElements['mesh']) {
  const matRef = useRef<THREE.ShaderMaterial>(null!)

  useFrame(({clock, mouse }) =>{
    if(matRef.current){
      matRef.current.uniforms = {uTime: {value: clock.getElapsedTime()}}
    }
  })

  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <shaderMaterial
        ref={matRef}
        attach='material'
        vertexShader={vertex}
        fragmentShader={fragment}
        uniforms={{uTime: { value: 0.5}}}
      />
    </mesh>
  )
}

fragment shader

export const fragment = `
      precision mediump float;
      uniform float uTime;
      uniform sampler2D uTexture;
      uniform float uMouseX;
      uniform float uMouseY;
      uniform float uScreenW;
      uniform float uScreenH;

      varying float uCol;
      varying vec2 vUv;
      varying vec3 v_position;


      void main() {

        vec3 color = vec3(sin(uTime), 1.0, 0.0);

        gl_FragColor = vec4(color, 1.0);
      }
    `

EDIT Inital value is getting to shader. So problem is in updating uniform

fauxxi · Accepted Answer · 2022-03-21 22:55:51Z

2

by this line matRef.current.uniforms = {uTime: {value: clock.getElapsedTime()}} you are mutating the uniforms obj, so the other uniforms value are gone.

if you want to change uTime only, you can use this instead matRef.current.uniforms.uTime = {value: clock.getElapsedTime()}

or

you can copy the previous other uniforms with spread operator: matRef.current.uniforms = {...matRef.current.uniforms, uTime: {value: clock.getElapsedTime()}}

answered Mar 21, 2022 at 22:55

fauxxi

851 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

angel · Accepted Answer · 2024-08-02 14:27:23Z

0

try just with mathRef.current.uTime if you are using the shaderMaterial from 'dre' it should be okay just by writing that line instead of mathRef.current.uniforms.uTime

answered Aug 2, 2024 at 14:27

angel

1

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

MiguelG · Accepted Answer · 2024-09-23 02:39:13Z

0

referencing this post:

Try setting a key value to your shaderMaterial component so react can keep track of it and update the uniforms. It worked for me.

  <shaderMaterial
    key={colorDomain} //important for updating the uniforms!!
    ref={shaderMatRef}
    uniforms={{ uDomainColor: { value: new THREE.Color(colorDomain) } }}

Or as suggested in this thread, create a stable reference to the uniforms:

  const uniforms = useMemo(
    () => ({ uDomainColor: { value: new THREE.Color(colorDomain) } }),
    []
  );
  useEffect(() => {
    uniforms.uDomainColor.value.set(colorDomain);
  }, [colorDomain]);
  return( ...<shaderMaterial
    vertexShader={vertexShader}
    fragmentShader={fragmentShader}
    uniforms={uniforms}
  />...);

edited Sep 23, 2024 at 2:39

answered Sep 23, 2024 at 2:27

MiguelG

4815 silver badges19 bronze badges

Collectives™ on Stack Overflow

React-Three-Fiber sending uniforms to custom shader with TypeScript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related