Hi,
When blending between animation clips using the AnimationAction’s fadeIn, crossFadeTo, etc I noticed that Three.js blends linearly. In many cases this is unnoticeable - like in the skinning example the duration adjustment of the clips and the start frame synchronization covers most of the visual artifacts. Brilliant!
Let’s say we have two looping clips and for some reason they are not on the “same place” world position terms. For example a UFO ship is having a loop at one place of the scene and an other loop further away. The distance between the clips/loops will cause a lot more visible effect of linear blending.
I used this code to blend between the two loops: currentAction.crossFadeTo(toAction, duration, true).play();
It blends the clips nicely except I see the above mentioned linear transition between the two. I also set the warpBoolean parameter to true but it did not help.
So, Is there a way to have a smooth fade/crossFade?
I’m NOT trying to solve the “smooth blend between positions” issue … Tween, etc. My example is just very similar.
If you want more smoothness result, you can try to implement carmull-rom splines, it interpolate 4 point. Or some higher polynomial splines like B-splines. I am not sure what interpolation in Three.js, but if you notice difference seems that slope not smooth.
thanks for the prompt reactions and the ideas!
actually my current problem can be solved many ways I was just looking for the most isolated (animation vs code) one.
on the other hand as soon as i will have an example i will post it here.
there is one more way to explain it. you have two clips. you crossfade between them by dragging a slider from 0 to 1.
now the crossfader slider moves linearly from 0…1. what would be needed is an ease in/out applied to the crossfader’s movement. simple is that.
i hope this helps explaining it.
tween weight of animation A using your favourite tweening function, like ease-in
tween weight of animation B the same way.
If built-in cross-fade doesn’t cut it for you - just do it yourself. There is a ton of tweeling libraries out there, heck - you can even do it with three.js animation engine, animate the animation weights.
