Parametric Vertex Controls of MorphTargets

Questions
, , ,
1

Hi Everyone.
I’m using gsap to tween between morphtargets but thats not the tricky bit.

I would like to control how to morph between 2 targets. I can get some quite nice animated transitions by using custom easing and tweens, however the way that morphtargets are implemented it seems like the only parametric iterface between ThreeJS and each morphTarget is simply a value between 0 and 1.

This means I can really easily get GPU based vertex morph controls which is awesome but I was wondering if anyone knew how to control the actual transition so that for example I could use a sinewave to spiral on the x or y axis during the transition.

Its very complex to explain so I drew some lines to represent the tweeing/motion paths between the vertex points, based on the custom easing function of 2 morphed states here:
https://bit.ly/3H9NwzZ

(sorry that its dist code CSB and Codepen borked and required unreasonable amounts of setup to get this running)

now look here where all I have done is added a sine function to the “z” property of the line, which ideally would be how the animation path would be if I could have parametric transform controls:

https://bit.ly/3zwVBx7

note the curved lines which were done by uncommenting line 681 here MorphTargetMoptionPaths2 - Replit

This is a long setup for the simple question of;
is it possible to have granular control over x/y/z of morphtarget transitions (without doing it on the CPU) or is it simply limited to 0.0-1.0 of the total morph transition?

Thanks very much

2

AFAIK morphTarget only take a clamped float between 0 and 1, it use a builtin shader in the background.

If you want granular control over your vertices (without doing it on the CPU), you probably need to create your own custom ShaderMaterial or RawShaderMaterial.

3

ah I thought so, I was hoping that wouldn’t be the case :smile: :laughing:

1 Like