AnimationGroup stop very slow if there are a lot of Animatables

bastl.rooom · March 16, 2023, 4:37pm

Hi

I want to stop some AnimationGroup-Items at the same time.
I have some animated characters with a lot of animations which are going on at the same time. At some point I want to stop the animations of them.
This is very slow and my scene is frozen for some seconds.
There are ~100k - 200k animatables (scene._activeAnimatables.length) in my scene.

I have checked the code:

github.com

BabylonJS/Babylon.js/blob/master/packages/dev/core/src/Animations/animationGroup.ts#L478


      
           * Stop all animations

           * @returns the animation group

           */

          public stop(): AnimationGroup {

              if (!this._isStarted) {

                  return this;

              }

          

              const list = this._animatables.slice();

              for (let index = 0; index < list.length; index++) {

                  list[index].stop();

              }

          

              this._isStarted = false;

          

              return this;

          }

          

          /**

           * Set animation weight for all animatables

           * @param weight defines the weight to use

and this:

github.com

BabylonJS/Babylon.js/blob/master/packages/dev/core/src/Animations/animatable.ts#L353


      
          

                      if (runtimeAnimations.length == 0) {

                          this._scene._activeAnimatables.splice(idx, 1);

                          this._raiseOnAnimationEnd();

                      }

                  }

              } else {

                  const index = this._scene._activeAnimatables.indexOf(this);

          

                  if (index > -1) {

                      this._scene._activeAnimatables.splice(index, 1);

                      const runtimeAnimations = this._runtimeAnimations;

          

                      for (let index = 0; index < runtimeAnimations.length; index++) {

                          runtimeAnimations[index].dispose();

                      }

          

                      this._raiseOnAnimationEnd();

                  }

              }

          }

Turns out that calling this._scene._activeAnimatables.splice(index, 1); on every single instance of Animatable is very slow and causing the issue.

So my question:
Is there a better way of stopping animation groups without having such a freeze of the whole scene?

Thank you

sebavan · March 16, 2023, 7:38pm

Thanks for the report, there should definitely be…

Can you share a repro so that I ll fix it ASAP ?

carolhmj · March 16, 2023, 7:50pm

+1 on the repro, but as a general suggestion, if you don’t need blending, there’s Baked Animations which are way faster Baked Texture Animations | Babylon.js Documentation (babylonjs.com)

bastl.rooom · March 17, 2023, 7:17am

Thank you. I will provide you a Playground link as soon as I can.

bastl.rooom · March 20, 2023, 12:54pm

Here is a simple playground:

There are some characters loaded with a lot of animations (the animations are starting after loading).
It took 800ms on my system to stop the animations.
There is a little “gui” where you can see everything.

You can change the amount of items to add some more but it will take a while to load.
But I guess 10 items are enough for visualization

carolhmj · March 20, 2023, 2:40pm

Thanks for the repro! @sebavan will you take a look?

sebavan · March 20, 2023, 5:27pm

Deltakosh · March 20, 2023, 9:18pm

Here is the fix:)
Improve how we delete massive group of animatables from animationgroup by deltakosh · Pull Request #13641 · BabylonJS/Babylon.js (github.com)

moving from 659 to 39ms on my computer ;D

sebavan · March 20, 2023, 10:07pm

bastl.rooom · March 21, 2023, 6:43am

Cool! Thank you!