EffectComposer - uniforms not updated

Questions
1

Hi.

I am setting up an EffectComposer with this code:

function addComposer() {
	//composer
	composer = new THREE.EffectComposer(renderer);

	//passes
	renderPass = new THREE.RenderPass(scene, camera);

	chromaticAberration = {
		uniforms: {
			tDiffuse: { type: "t", value: null },
			resolution: {
				value: new THREE.Vector2(
					window.innerWidth * window.devicePixelRatio,
					window.innerHeight * window.devicePixelRatio
				)
			},
			time: { value: 0.005 },
			power: { value: 0.5 }
		},

		vertexShader: `
    
			varying vec2 vUv;
		
			void main() {
		
			  vUv = uv;
			  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
		
			}
        `,

		fragmentShader: `
		
			uniform sampler2D tDiffuse;
			uniform vec2 resolution;
			uniform float time;

			void main() {
			// distance from center of image, used to adjust blur
			vec2 uv=(gl_FragCoord.xy/resolution.xy*.5)+.25;
			float d = length(uv - vec2(0.5,0.5));
			// float time = 0.004;
			
			// blur amount
			float blur = 0.0;	
			blur = (1.0 + sin(time * 6.0)) * 0.5;
			blur *= 1.0 + sin(time * 16.0) * 0.5;
			blur = pow(blur, 3.0);
			blur *= 0.05;
			// reduce blur towards center
			blur *= d;
			
			// final color
			vec3 col;
			col.r = texture2D( tDiffuse, vec2(uv.x+blur,uv.y) ).r;
			col.g = texture2D( tDiffuse, uv ).g;
			col.b = texture2D( tDiffuse, vec2(uv.x-blur,uv.y) ).b;
			
			// scanline
			// float scanline = sin(uv.y*800.0)*0.04;
			// col -= scanline;
			
			// vignette
			// col *= 1.0 - d * 0.5;
			
			gl_FragColor = vec4(col,1.0);
		}
      `
	};
	chromaticAberrationPass = new THREE.ShaderPass(chromaticAberration);

	bloomPass = new THREE.UnrealBloomPass(
		new THREE.Vector2(window.innerWidth, window.innerHeight),
		1.5,
		0.4,
		0.85
	);
	bloomPass.threshold = params.bloomThreshold;
	bloomPass.strength = params.bloomStrength;
	bloomPass.radius = params.bloomRadius;

	composer.addPass(renderPass);
	composer.addPass(bloomPass);
	composer.addPass(chromaticAberrationPass);
	// composer.addPass(filmPass);
	chromaticAberrationPass.renderToScreen = true;
}

The shader is loosely adapted from a shadertoy chromatic aberration.

In my animation loop, I update the “time” uniform like so:

function animate() {
	time = performance.now() * 0.0001;
	// mesh.rotation.x += 0.01;
	// mesh.rotation.y += 0.005;
	// mesh.rotation.z += 0.0025;

	chromaticAberration.uniforms["time"].value = time;
	requestAnimationFrame(animate);
	composer.render(time);
}

But it is not updated. If I update the resolution uniform on window resize, it is not updated either.

What could the issue possibly be?

2

Should it be time += delta, where delta is the time elapsed since the last frame?

You can use THREE.Clock to get the value of delta.

3

Actually, the problem was that I was updating uniforms on the shader, when I should have been updating them on the shader pass.

Thank you for your help.

1 Like