Ability to target ShaderMaterial uniforms via animations about three.js HOT 7 CLOSED

If you want to control the ShaderMaterial uniforms via a specific animation, all you need is a simple function based on animation.time and clip.duration.
Example: https://necromanthus.com/Test/html5/Lara_shader_controlled.html
In this case:

		function animate() {
			uniforms1.time.value = 5 * mixer1.clipAction( clip1 ).time / clip1.duration;

In you case it will be something like
uniforms.res.value = 0.1 - 0.05 * mixer.clipAction( clip ).time / clip.duration;
That's all and nothing more.

from three.js.

If you think a PR for #25028 would be approved, we can close this as duplicate and I'll throw some effort to that battle.

A solution for #25028 would be welcome. We need it anyway if we want to support the glTF extension with core features.

from three.js.

Dug into parseTrackName, bind, and findNode which is where most of the things break magic happens.

I think it's possible, may try to draft something when I get a chance.

from three.js.

I believe this issue is a duplicate of #25028. It is also related to KHR_animation_pointer, see #24108.

from three.js.

Tried to target arbitrary THREE.ShaderMaterial uniform value with an animation, doesn't work.

Did you try this approach?
https://necromanthus.com/Test/html5/Lara_shader.html

		let uniforms1 = {
			time: { type: "f", value: 1.0 },
			resolution: { type: "v2", value: new THREE.Vector2() }
		};
// ...
		function animate() {
			let delta = clock.getDelta();
			uniforms1.time.value += delta * 5;

from three.js.

Thanks Mugen!

I believe this issue is a duplicate of #25028. It is also related to KHR_animation_pointer, see #24108.

Yea #25028 would address this. Looking at the code I had lost some of my ambition for fixing every nested property case since it seems easier to address just the case of uniforms.name.value as a one off. That said I think addressing this as a one-off pushes the can further down the road and could possibly impede future refactors similar to #24108.

If you think a PR for #25028 would be approved, we can close this as duplicate and I'll throw some effort to that battle.

from three.js.

If you want to control the ShaderMaterial uniforms via a specific animation, all you need is a simple function based on animation.time and clip.duration. Example: https://necromanthus.com/Test/html5/Lara_shader_controlled.html In this case:

		function animate() {
			uniforms1.time.value = 5 * mixer1.clipAction( clip1 ).time / clip1.duration;

In you case it will be something like uniforms.res.value = 0.1 - 0.05 * mixer.clipAction( clip ).time / clip.duration; That's all and nothing more.

Thanks so much @RemusMar that's a really cool approach. Honestly it'd be easiest for me to just use TWEEN and call it a day (more flexibility to cycle through non-linear arbitrary values).

from three.js.