Trouble updating shader uniform with gsap - R3F + GSAP

[serotoninene]

Hi ! 

I've been using react-thee-fiber to create a 3D scene and using custom glsl shaders in it. I want to animate the shaders on scroll with gsap but got no result. Did I miss anything ? 

 

Here is my 3D mesh, basically a sphere, that should get distorted with the modification of 'uDistortionFrequency'. 

  <mesh position={[0, 0, 0]} ref={meshRef}>
          <sphereBufferGeometry args={[2, 64, 64]} />
          <shaderMaterial
            ref={sphereShaderRef}
            args={[
              {
                uniforms: {
                  uCube: { value: texture },
                  uTime: { value: 0 },
                  uDistortionIntensity: { value: data.uDistortionIntensity },
                  uDistortionSpeed: { value: data.uDistortionSpeed },
                  uDistortionFrequency: {
                    value: 0.0,
                  },
                },
                vertexShader: vertex,
                fragmentShader: fragment,
              },
            ]}
            uniformsNeedUpdate={true}
            side={THREE.DoubleSide}
          />
        </mesh>

Here's my gsap animation, 

useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: "#MainContainer",
        id: "3D Timeline",
        start: "top top",
        end: "bottom bottom",
        scrub: true,
      },
    });

    tl.to(sphereShaderRef.current.uniforms.uDistortionFrequency, {
      value: 1.5,
      ease: Power3.easeIn,
      onUpdate: () => {
        console.log(
          sphereShaderRef.current.uniforms.uDistortionFrequency.value
        );
      },
    });
  }, []);

The results of the "console.logging" are always 0 : 

 

Maybe I've missed something, i don't know, when I change the uDistortionFrequency value manually, it affects the mesh. 

 

+ I've created an object "AnimatedValues" and plugging it into the uniforms, i manage to animate it with gsap but it still has no effects on the shader ... 

  let animatedValues = {
    uDistortionFrequency: 0.0,
  };

// in the useEffect function ... 
 	tl.to(animatedValues, {
      uDistortionFrequency: 1.5,
      ease: Power3.easeIn,
      onUpdate: () => {
        console.log(animatedValues.uDistortionFrequency);
      },
    });

 

Edited March 31, 2022 by serotoninene

[OSUblake]

Welcome to the forums @serotoninene

 

I haven't animated react three fiber before, but that looks correct. Whenever I think something might be a GSAP issue, I remove stuff from the equation for a sanity check. 

 

First, start by removing ScrollTrigger.

 

let tl = gsap.timeline();
tl.to(sphereShaderRef.current.uniforms.uDistortionFrequency, {
      value: 1.5,
      ease: Power3.easeIn,
      onUpdate: () => {
        console.log(
          sphereShaderRef.current.uniforms.uDistortionFrequency.value
        );
      },
    });

 

If that works, then there's something wrong with your ScrollTrigger.

 

If it doesn't work, try animating it without GSAP. 

animate()

function animate() {
  sphereShaderRef.current.uniforms.uDistortionFrequenc.value += 0.1;
  requestAnimationFrame(animate)
}

 

If that doesn't work, then there's some other issue completely unrelated to GSAP at play here.

 

[serotoninene]

Thank you for your help ! 

You were right, the problem wasn't from gsap, but from my custom shader that was restructuring itself on every renders 😬

I solved the issue by creating a separate class and updating only the uniforms inside of it.

Thanks again !