Updating uniforms

Hello!

I’m trying to update a uniform value used in a fragment shader, but the change doesn’t seem to register with the material.

Do I need to do anything other than updating the uniform, like calling needsUpdate or something like that?

(The value of time is changing, I checked that 😉)

Here’s an abbreviated version of what I’m doing:

const fragmentShader = `
precision highp float; 
uniform float u_time;

void main() {
    gl_FragColor = vec4(u_time, u_time, u_time, 1.0);
}
`;

…

const uniforms = {
    u_time: {type: 'f', value: time},
};

…

<mesh rotation-y={time}>
    <planeBufferGeometry name="geometry" args={[4, 4]} />
    <shaderMaterial
    name="material"
    uniforms={uniforms}
    vertexShader={vertexShader}
    fragmentShader={fragmentShader}
</mesh>

Here’s a Code Sandbox demonstrating the problem: https://codesandbox.io/embed/rw980y5jnq

I looked at the documentation and the issues, but couldn’t find a solution.

All examples with updating shaders seem to use react-spring and <animated.shaderMaterial> – does that do anything special?

I also tried using a ref on the mesh and useRender, like so, which didn’t work, either:

useRender(() => {
    if (
      mesh.current &&
      mesh.current.material &&
      mesh.current.material.uniforms
    ) {
      mesh.current.material.uniforms.u_time.value = time;
    }
  });

[julians]

Thanks so much for the explanation! I didn’t know that I had to keep the same uniform between renders and only change the value of u_time. I guess I was sort of expecting the shaderMaterial component to update when the uniform prop changed.

This made me understand:

if you can’t set the entire uniforms structure in threejs, then you can’t do it here, the same rules apply

In the end, I went with useMemo in the component, as I’m loading a texture as well. Thank you so much for your help!

function Scene() {
  const material = useRef();

  let t = 0;
  useRender(
    () => (material.current.uniforms.u_time.value = t = (t + 0.01) % 1),
  );

  const [texture1991] = useMemo(() => {
    const loader = new TextureLoader();
    return [loader.load(texture1991Url)];
  }, [texture1991Url]);

  const uniforms = useMemo(() => {
    return {
      u_time: {type: 'f', value: 0},
      u_texture: {
        type: 't',
        value: texture1991,
      },
    };
  }, [texture1991]);

  return (
    <mesh>
      <planeBufferGeometry attach="geometry" args={[4, 4]} />
      <shaderMaterial
        attach="material"
        ref={material}
        uniforms={uniforms}
        vertexShader={vertexShader}
        fragmentShader={fragmentShader}
      />
    </mesh>
  );
}

[drcmda]

tbh i don’t understand how three-js treats uniforms. it is a little odd. i know i’ve been struggling with it before. they seem to cache it on first run, once a uniform is set it looks to me like it can’t be exchanged again, only properties can be mutated.