This one is quite tricky to explain or show but I’ll try
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.
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