Ability to target ShaderMaterial uniforms via animations

[Bug-Reaper]

Description

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

let starsTrack = new THREE.NumberKeyframeTrack(".material.uniforms.res.value", [0,1], [.1,.05]);
// Doesn't work :(

Or hacky work-around (also didn't work):

obj.value = obj.material.uniforms.res.value
let starsTrack = new THREE.NumberKeyframeTrack(".value", [0,1], [.1,.05]);
// obj.value changes but obj.material.uniforms.res.value does not change

Solution A

Upgrade THREE.PropertyBinding.parseTrackName() to support binds to material.uniforms.name.value. Can we just have a fallback that allows to target any property (no matter how deeply nested) as long as that property exists?

Solution B

Hoist a shared reference of all THREE.ShaderMaterial uniform values to the top-level of the material object. This would hoist a reference to uniform values high enough to be targeted by the current animation implementation.

Additional context

I'd imagine solution A is more desirable. Unclear to me if there's a limitation that prevents how deep the animation targeting can reach.

[Bug-Reaper]

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.

[Mugen87]

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

[RemusMar]

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;

[Bug-Reaper]

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.

[RemusMar]

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.

[Bug-Reaper]

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).

[Mugen87]

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.