2 Tracks for same property in different times

Hello, I am working on a streaming animation application. In there I am creating the animation KeyframeTrack based on what I get from the stream, with that I create the clip and give it to the Mixer which create the Action. Because I cannot modify the tracks I have to create always a new track with the same times and values of the previous track plus some new values and times that I get from the stream. I noticed that if my times and values are a very big array, the process of creating the new track consumes more and more time (probably due to the conversion between Array and Float32Array that happens inside the KeyframeTrack). To avoid this, I decided to create multiple tracks instead of just one. However, the behaviour is strange when playing the animation.

Please take a look at the following example:
https://jsfiddle.net/c5wy9d70/1/

In line 94 create the AnimationClip with track1. Run it.
Then change track1 to track2. Run it.
Then add both [track1, track2], I expect this to be the combination between track1 and track2, but it seems not.

Any ideas on how to overcome this issue?
Thank you.

Well, there is actually a combination. Both tracks are evaluated in a weighted fashion. So they both influence the transformation of the final object during the entire duration of the clip.

I think you need to find a way to playback animation clips in a sequence. The following might be helpful in this context:

Thanks, I will check it out!

I changed the example to have 2 clips, 2 actions and play one after the other one finishes
https://jsfiddle.net/b1zcnd7o/

However, I see 2 small problems with this approach:

  1. when one action ends. Even if the action1 end position is the action2 beginning position, when the action1 ends the object is moved to its initial position. It makes an ungly jump then to action2 start position.
  2. In my streaming aplication you can jump back in time or forward. This is easily done by resetting the mixer and play it again from the desired time. However, with this new logic it is quite complex as you don’t really know a priori which action should be play given a certain time.

This is something that can be fixed in AnimationMixer. The problem is that the second action is not processed in the frame where the previous action ends. So there is one frame where no action has an influence on the animated object.

Unfortunately, I can only think of one alternative approach: Making the typed arrays of the keyframe tracks large enough so they can hold all upcoming data of your stream. However, I’ve never done something like that and don’t know the respective ramifications.

1 Like

Thank you Mugen87 for the help, I will keep in mind your suggestions.
Creating multiple AnimationMixers is also a possibility:
https://jsfiddle.net/wv91hL73/