Jump to content

Issue with animations ?


Recommended Posts



The repro case is here : http://www.babylonjs-playground.com/#21MQCX


Two boxes are created with 1 seconds delay, and I want each box to follow a path of 4 points.

An animation is created for each box to follow the path from point 1, to point 2, from point 2 to point 3, and from point 3 to point 4.


The problem is, my second box don't move at all, and I don't understand why.

If I create 4 boxes, results are more surprising : only the first and last box are moving...  http://www.babylonjs-playground.com/#21MQCX#1


Can you help me please ?


Thanks :)

Link to comment
Share on other sites

I'm gettin' close.  http://www.babylonjs-playground.com/#21MQCX#5  Still running 6 boxes...  but...  according to my console log, box 0 uses 16 animations to get to finish.  Box1 does just ONE animation... and then stops.  This means that something is wrong with if (nextTile)  for boxes 1, 3 and 5.  And that's what the symptoms show, too.  Boxes 1 3 5 are doing only one animation step... moving only one tile.


I smell it.  I smell the bug, but I bet someone else will need to take it across the finish line.  :)

Link to comment
Share on other sites

Hi. I'm pretty new with babylon, but I tried to analyze your repo, and I thing the problem is that you overwrite animation of an object (first, third, ect object), because:

we have a delay of 1000. Now if count of length animations of one box(animaiton 1 +animaiton2+animation3 >1000) is greater then delay (true), then when you create the second box, you still create animations for the first box. Animations will end, you create the third, works fine, you will create the forth box, but the third didn't finish yet, and you create again animations for box 3.

If you change delay value to 3000, or greater, you will see that all will work fine with much more boxes, but with 4 points for path, because length of all animation of one box is >= delay.

I you change numbers of points for path, you have to change delay value with number of (points-1)*1000.


For this http://www.babylonjs-playground.com/#21MQCX#5, if change delay value to number of (point-1)*1000 (8000) it works fine


I tried to solve it with a for loop, its very close, but it drink a lot of fps.



It's just an opinion,

when I needed, you helped me, now i'm trying to do the same :))

Link to comment
Share on other sites

The problem seems to be that animatables are still "playing" when animatable#onAnimationEnd() fires. So when you create a new animation in that event handler, BJS sees there's already an active animation, and stops it, which fires another recursive onAnimationEnd event. Then BJS winds up assigning two animations to the same target, which other methods assume doesn't happen, and things go nuts.


The extra event firing sounds like a bug to me, but if you just want to work around it, avoid making a new animation from inside the end event handler:

   animatable.onAnimationEnd = function() {      obj.currentTile = currentTile+1      // moveObj(obj)      setTimeout(function() { moveObj(obj) }, 1)   }
Link to comment
Share on other sites

Oh we're not done harvesting the fun out of this topic quite yet, Mister T.  :)  You throw a nipple like this... out into forum land... and we're going to suck that puppy dry, ya know?  heh


Here's my latest version.  Changed lots... but not so much.  Just one box... but that box is never getting to pos[2] (10, 0, 10).  Watch your console.  It skips over step 2 and goes directly to step 3.  The other steps work fine.


I use an indexer called curPosIndex and I sent it as param #2 to the initial and recursive call to moveObj().


I brutally reset obj.animations to [], sometimes.  I delete Animatable sometimes.  I've lubicated every darned byte-bearing I can find.  I'm thinkin' it's haunted.


Just a fun pile of debris!  I love it when my shop is messy like this. And it's way cool that we are all drilling and sawing on Temechon's broken alarm clock... at the same time.  :)

Link to comment
Share on other sites

If you are not picky about how to achieve this, you could use POV.  It handles multiple objects well.  Delays, pausing all, or individual meshes, repeats are all handled.


It also deals with incremental rotation and acceleration.


Here is a sample which moves 50 meshes thru 20 loops, with acceleration and shrinking.  They should all end up in the exact same place, but since POV is an incremental process, small timing changes between frames causes error.  The # of frames to do 20 loops exaggerates the error.  Smaller moves with few meshes give pretty acceptable results.



Link to comment
Share on other sites

JC, your extension is very impressive !

However, I want to do that with Babylon.js only. For my future projects I will definitely think about it.


I think I found the problem (after a lot of coffee and a lot of "WTF!!!")  : Bulisor and Fenomas were right :) (Thank you guys !)

The animation is created before the old one is removed from the array scene._activeAnimatable


My fix : the old animation should be removed and then the onAnimationEnd is called.

I will check everything and do a PR for this. 


Thank you again !

Link to comment
Share on other sites

Thanks T.  (you forgot the 's' as well, btw).  :)

Temechon, would you prefer that further experimenters go to a different thread?  Can do... just holler.

Meantime, new version... http://playground.babylonjs.com/#RFXDF

I failed again, but Temechon's ideas proved... interesting, at least.

In this version, I made a fresh func on the created animatable... called unSceneMe() [line 172].  I call it first-thing in onEnd [line 185].

I cannot get the box to travel to it's 2nd location and beyond, but I surely have something else wrong.  UnSceneMe() seems to find the single box's animatables in scene._activeAnimatables, and removes it with the splice. 

Good Wingy-broken fun. 

Again, Temechon, I (and I'm sure others who are still camping this issue) ... will gladly go to a different thread, if you wish.  Just say so... no probs.  I hope I didn't contaminate this thread with all my social yap and lack of advanced prog skills.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...