question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animations mixing bones that aren't part of their keyframes; can't play two distinct animations at same time

See original GitHub issue

Describe the bug

Mixer cannot play two animations at the same time without mixing weights, even for bones/vertices that are not part of the animation. In my situation, I cannot play an attack animation or wave animation or any upper-body-only animation while the legs are moving without some amount of mixing occurring.

To Reproduce

Steps to reproduce the behavior (using Blender, and gltf export):

  1. Using a model in blender, add an animation that moves only the legs. Call the animation “Run”
  2. Add another animation that moves only the arms. Call the animation “Attack”
  3. Import the object using gltf
  4. Play the “Run” and “Attack” animations at the same time (see code and gif)

What you’ll see is that the “Run” animation is distorted during the “Attack” animation and vice-versa, even though the attack animation does not have any bones or vertices in common with the run animation. They’re essentially being mixed with the a transform of zero for duration of the other animation.

I do not know if this the intended behavior, though if it is the intended behavior then the presumable solution is to use multiple mixers which produces some flickering effects at the end of non-looping animations (I can report this separately, if this is in fact the intended solution and just a separate bug).

If this is not a bug, then some improvements to the documentation and examples may be helpful. I volunteer to help with this if needed.

Code

// import a gltf with animations then...
const attack = mixer.clipAction(AnimationClip.findByName(animations, 'Attack'))
const run = mixer.clipAction(AnimationClip.findByName(animations, 'Run'))

attack.play() // animation clip using only arms
run.play() // animation clip using only legs

Live example

I have no included a live example, though if someone tells me that this is not intended behavior I can attempt to construct one.

Expected behavior

The expected behavior would be that the “attack” animation moves only the arms, and the “run” animation moves only the legs, and that these two animations can be played/started/stopped/reset without affecting each other.

Screenshots This gif shows a run animation being played with the legs swinging in a large stride. After a second I trigger the attack animation to begin playing, and then the legs only swing half as far (this is the mixing). The actual attack animation is also quite distorted. The second gif shows how the animation should look. 2021-03-24_23-15-40

The second gif shows something closer to the expected behavior which is that the arm and leg animations are not being mixed together. This was accomplished with multiple mixer instances (and has another bug where the run flickers when the attack animation finishes, though this not shown here). 2021-03-24_21-26-02

Platform:

  • Device: Desktop
  • OS: Windows
  • Browser: Chrome
  • Three.js version: 0.125.2

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:13 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
Mugen87commented, Mar 25, 2021

The soldier asset from webgl_animation_skinning_blending is a good example for this. The body and the visor are actually two separate skinned meshes.

1reaction
RemusMarcommented, Mar 25, 2021

The expected behavior would be that the “attack” animation moves only the arms, and the “run” animation moves only the legs

In fact the expected behaviour is to blend both animations (mixed weights). And that’s the current behaviour.

I do not vote to add even more features to it unless many user request them.

+1

Read more comments on GitHub >

github_iconTop Results From Across the Web

2 Animation at same time - Spine
The first argument of setAnimation is the track index. If you play two animations in two different tracks, they will play at the...
Read more >
BASICS OF ANIMATION - Blender 2.8 - Part 3 - YouTube
Grant's Character Course discount link: https://www.gamedev.tv/p/blender-character-creator-2/?coupon_code=GRABBITT&affcode=45216_9b6dqwx2 ...
Read more >
Keyframes - Blender 2.80 Fundamentals - YouTube
Blender is Free and Open Source SoftwareDownload: https://blender.org/downloadSupport core Blender development ...
Read more >
Skeletal Animation - LearnOpenGL
This array of contains all bones and their keyframes which are going to be engaged in an animation. An aiNodeAnim contains name of...
Read more >
Play multiple CSS animations at the same time - Stack Overflow
You can specify multiple animations--each with their own properties--with a comma. ... Both keyframes applies on the same property transform.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found