onAnimationGroupEndObservable triggers exponentially :(

Hello BJSForum,

i’m trying to buil a car-cannon :slight_smile: A (car)mesh moves along an animation, onAnimationGroupEndObservable i want to switch the mesh and rerun the animation. So far, so simple.
However, my onAnimationGroupEndObservable function get’s triggered exponentially with every new run (= 1,2,4,8,16,etc times) .

In the playground (https://playground.babylonjs.com/#7V0Y1I#4587) everything works as expected. In the Project however i encounter the problem. The only difference - as fare as i can tell - is, that in my project i use an animation created in Blender and imported via *.glb

The initialisation:

this.animations.world.cars.car1 = this.scene.getAnimationGroupByName("_carani1");
this.animations.world.cars.car2 = this.scene.getAnimationGroupByName("_carani2");
this.animations.world.cars.car3 = this.scene.getAnimationGroupByName("_carani3");

this.animations.world.cars.car1.normalize(0,2500);
this.animations.world.cars.car2.normalize(0,2500);
this.animations.world.cars.car3.normalize(0,2500);               

this.dreid.setup.animations.car(this.animations.world.cars.car1,true);             
this.dreid.setup.animations.car(this.animations.world.cars.car2,true);        
this.dreid.setup.animations.car(this.animations.world.cars.car3,true);                        
                                                                    

this.animations.world.cars.car1.onAnimationGroupEndObservable.add((el) => {
    console.log('end1');
    this.dreid.setup.animations.car(el);
});                       

this.animations.world.cars.car2.onAnimationGroupEndObservable.add((el) => {
    console.log('end2');
    this.dreid.setup.animations.car(el);
});                    

this.animations.world.cars.car3.onAnimationGroupEndObservable.add((el) => {
    console.log('end3');
    this.dreid.setup.animations.car(el);
});
                        

The setup(this.dreid.setup.animations.car):

car : (ani,start = false) => {
    console.log('startani --'+ani.name);
    ani.to = 0;
    ani.from = 2500;
                                                
    if(start){
        ani.from = this.helper.randnr(1000,250);
    }
                        
    ani.play();
}

Has anybody encountered somthing similar before, or can point me in the right direction? What am i missing/ doing wrong?

Thanks! :slight_smile:

Would you mind sharing the repro in the PG. It is tough to figure out without :frowning:

Dear @Deltakosh,

Thanks for your reply. I tryed that… –> https://playground.babylonjs.com/#7V0Y1I#4587 :slight_smile:

I reproduced all the functions i use in the project. In the playground it works… I thought maybe there is a known issu with onAnimationGroupEndObservable and imported animations or something… Or one of the elders of 3dinthebrowser has an idea what to try?:slight_smile:

I’m affraid, i can’t share the hole project in the playground, we’re at 12k lines right now…:slight_smile:

Here is a link, if that helps? –> ICT.factory (Please ignore the bussound, it is not yet finetuned…:wink:

(One can see the exponentially triggering function in the console)

Maybe it is coming from the object that you animate itself. Can you repro with only one of the object that showcases that problem?

1 Like

Dear @Deltakosh,

jup, this seams to be the problem. :slight_smile: Now the playground also missbehaves and triggers exponentially…

Does anybody have any idea what might cause this?

Thanks!

Here is the whole thing de-cluttered and with hotfix: https://playground.babylonjs.com/#7V0Y1I#4600

I think for further debugging unit testing might be easier.

Or avoid the callback within callback situation entirely: can you not just loop the animation, and then, onLoopEnd, adjust the frames this way?

1 Like

Dera @Joe_Kerr,

thanks for your reply. :slight_smile:

i would love to user onLoopEnd, however my “switchcar“ functionality doesn’t work then (and i also don’t understand why…)

The idea is that there is an animation (car driving through town) and after every run i switch the car. This animation i want to clone a couple of times to have several cars on the same road on different starting-positions (therefor the random ani.from value).

It works with onAnimationGroupEndObservable –> https://playground.babylonjs.com/#7V0Y1I#4618 however then there is the problem with the exponential triggers.

when i use onAnimationGroupLoopObservable –> https://playground.babylonjs.com/#7V0Y1I#4622 it stops the animation when switching the car-mesh. However, when i restart the animation onLoopEnd manually it seems to work and behaves like i would expect onEnd to work…?

why does onAnimationGroupEndObservable trigger exponentially and why does switching the mesh in onAnimationGroupLoopObservable break the loop, but when restarting it it doesn#t trigger exponentially?

I’m a bit confused… :slight_smile:

Also i realised, that when switching direction by setting ani.to and ani.from in reverse, onLoopEnd triggers constantly… –> https://playground.babylonjs.com/#7V0Y1I#4623

Cc @Evgeni_Popov (he is out until Monday so please be patient)

This does not work as expected because you are not allowed to play the same animation in an anim.onAnimationGroupEndObservable handler as the animation for which the handler is currently being called. You should delay calling play by using setTimeout:

Disposing a mesh will also dispose the current animatables linked to this mesh, that’s why it can do strange things in your code.

The best way to handle this case is to clone the animation and assign it to the new car:

You have to set a negative speed ratio when from is greater than to: