Animations glitch

#1

This one is quite tricky to explain or show but I’ll try :slight_smile:

TL;DR:
When one animation finishes it can possibly make the next animation in the list skip a frame.

Steps to reproduce:
Imagine we have two meshes and we animate both of them at the same time. In this PG there are two boxes.
:warning: The first one is hidden outside of the viewport so that it won’t distract from observing the second box.
Both boxes are animated simultaneously. The first box animation takes 1 second, so it finishes in the middle of the second box animation which lasts 2 seconds.
At that very moment the 2nd box animation glitches a bit. This is hard to observe, but it’s possible after multiple tries, especially on ~30Hz monitors. The second box (the only one visible) skips one frame exactly in the middle of it’s animation.

Possible reason:
There’s a for-loop inside the Scene.prototype._animate method that goes through the list of this._activeAnimatables:

for (var index = 0; index < animatables.length; index++) {
    animatables[index]._animate(animationTime);
}

While inside the Animatable.prototype._animate method the list of active animatables is mutated when animatable needs to be disposed:

if (!running) {
    if (this.disposeOnEnd) {
        // Remove from active animatables
        index = this._scene._activeAnimatables.indexOf(this);
        this._scene._activeAnimatables.splice(index, 1);
// ...

That presumably makes the outer for-loop skip the next animatable, because the indexes of the array get messed up.

I can try to provide more details or try to make the glitch more obvious somehow if needed.
Thanks!

Tested on babylonjs@4.1.0-alpha0

1 Like
#2

Pinging @Deltakosh

@alvov can you think of a way to make your reproduction in the PG a bit more easy to understand? I’m not sure what I should be seeing :slight_smile:

#3

Yes I just need a repro in the PG to make sure I have the right fix :slight_smile:

#4

There is a 1 frame skip on the top box when the second box animation finishes. It’s hard to see, but if you are animating the camera for example, you get quite a noticeable jump.

Maybe this helps to see it better https://www.babylonjs-playground.com/#D850Y6#3

#5

That should be enough :slight_smile:
Thanks a lot!!

I’ll fix that for next nightly

2 Likes
#6

Awesome thanks