Multiple animations: strange behavior (Canvas2D)

[Numa]

Hi guys, I don't know if I'm doing it completely wrong. I'm trying to fade in a Rectangle2D on click, but it looks like the animations get mixed up. I made this simple playground:

http://www.babylonjs-playground.com/#XP38Y#3

 

- If you click quickly on each box, you'll notice the animations go nuts, + the first one doesn't play at all.

- If you click really slowly (wait for the duration of the supposed animation) on each box, no animation plays at all.

 

Am I doing it wrong? 

 

Thanks

[Wingnut]

Hiya @numa.  Working on it.  http://www.babylonjs-playground.com/#XP38Y#6

Still works terrible.  I'm still testing/learning.

Something was wrong with the number of params in your CreateAndStartAnimation call (1 too few, I think), and I think I have repaired that, but that is not the whole problem.

Um, in lines 38-43, I try to remove the old label (if it exists) before making a new one.  I am having less-than good success with that.

In line 50, I changed the fill value from #ffffffff to #ffffff00 (start with a no-alpha fill color)

In lines 59-61, I am forcing and checking the fill color alpha... trying to make sure the starting value IS 0.1.  Limited success there, too.

Line 78, I have added a onAnimationEnd func called done().  It seems to act real nice.  About 1.7 secs after every click, it reports DONE, and that means the animations are running and their duration is correct.  50 frames at 30 fps is about 1.7 seconds... seems about right.

So... I'm back to the alpha problem.  Not sure yet, but when an animation FAILS, I think it is failing because fill color alpha is ALREADY at 1, even though I force it to be .01 in multiple places (in animation from and in line 60 forcer, and in line 50 #FFFFFF00).  I thought this might be because we have repeating labels with identical names.  But that would only be true for 2nd click on a mesh.  First click on a mesh should not have any chance of dual-label.  Yet, first click fails to animate... most of the time.

Intermittent stuff.  Boy, that's hard to troubleshoot.  I got so many reports going to console that it's just ridiculous.  We'll figure this out... maybe.  Cool idea... animating the alpha like this... to cause fade-in.  I like it.  I want to see it work correctly.  Sorry I have no solutions yet.  Still doing battle with it.  Help from other forum members quite welcomed.    Talk again soon.

[Numa]

Thanks @Wingnut I'll have a look at your playground when I wake up. Yeah I'd like to see it work too believe me  

Hopefully someone jumps in with a solution . 

[Wingnut]

http://www.babylonjs-playground.com/#XP38Y#10

SOME progress.  Added nocache caching strategy... still having problems removing old text2D prims.... but getting better.

Read notes in lines 74-77... tells of an anomaly seen.  A phenomena.  A weirdness. 

Also, in the makeLabel func... I tried to separate what was "ID" and what was "text", a bit.  Not sure why that was necessary, but I did it anyway.  It removed some confusion for me.  Renamed the var text to t2d.

One other oddness seen.  Click these boxes, rather quickly, left to right, and the last 4 work pretty well.  I would ALMOST say that the animations work best... if you start a new one before the previous one has finished.  Think about that.

Have ya thought about it?  In my previous versions, I noticed that trying to dispose ONE text2D prim... made ALL the text2D's go black.  Know what that makes me think about?  Instances.  Maybe when I killed the first Text2D, it was the mama... and so it's instances died too.  (sometimes black boxes inside rect2D's in PG version #6).  @Nockawa is a caching junkie, and if he had the chance to trim some weight/overhead, he probably used it.  Maybe we are seeing some fallout from that.  *shrug*

So, know what that makes me think about?  The "click next box before previous animation finishes" improved success... is happening WHY?  That's right.  The animation interpolator hasn't gotten the chance to set mama rect2D to fill alpha = 1... yet.  When we let an animation finish, it ends in fill alpha == 1, right?  Now the next animation comes along... and the animator is working perfectly, but it is animating alpha from value 1 to value 1, so we see no animating.  The caching system is giving us instances, not clones, or freshies. 

With me?  The animation is setting mama fill alpha to 1, and then all the instances are inheriting that... and that's why my forcing in line 75 is doing nothing.  Fill-alpha is being set to 1 AFTER that point, over-riding my forcing.  Canvas2D seems to be doing a "last minute spawn" of an instance, and the instance inherits a nasty, stale, fill-alpha value that the cat found under grandpa's bed.  heh

It's a theory.  But the indications... lean-towards this theory being truth, or in the general vicinity of truth.    I hope Noxxy visits... he's the God of Canvas 2d.

[Numa]

Thanks for investigating wingnut! Sounds like either a bug in canvas2d or in the babylon animation code then?

Nockawa is on holiday

Maybe @Deltakosh could confirm if it's a bug or if we're just missing something obvious?

 

Thanks so much guys.

[Nabroski]

Just a note,

i have no time to code, i would like, but it looks like you are just caching the result, when the user click on box1++ the values of previous results are pre -multiplied.

Canvas2D has also an Animation Node, did someone figured out, how it works, maybe this is already leads to bugs.

Best

EDIT:
okay you got me

this works for me

http://www.babylonjs-playground.com/#XP38Y#11

@Numa

 

[Numa]

@Nabroski yes the text works fine, it's the fill color on the rect2D i'm having problems with  

[Nockawa]

@Numa this is fixed or there's an issue still going on?

[Numa]

@Nockawa not fixed. the text animates fine : http://www.babylonjs-playground.com/#XP38Y#11

but the rectangle2D doesn't:  http://www.babylonjs-playground.com/#XP38Y#3

 

[Nockawa]

Just now, Numa said:

@Nockawa not fixed. the text animates fine : http://www.babylonjs-playground.com/#XP38Y#11

but the rectangle2D doesn't:  http://www.babylonjs-playground.com/#XP38Y#3

 

Ok got it, I've created a trello card for the bug

[Nockawa]

@Numa can you the same as this PG http://babylonjs-playground.com/#FFTQL#3 ? Look at line 17 I use the "animations" property which is the entry point to use the animation mechanism of bjs with Canvas2D.

Note that I've recently added an "opacity" property to ease what you're trying to achieve, here a quote of the main thread:

Quote

All primitives have now an opacity property to set its overall opacity factor (between 0 for totally invisible and 1 for totally opaque). The actualOpacity property is used to render each primitive, this is the accumulation of all the opacity through the parent tree. Which means you can create a Group2D, set its opacity to 0.5 (this is why the property is even present in non renderable primitives) and all its children will have an actualOpacity of 0.5 if their opacity has kept its default value (1).

Please let me know how it turns out.

[Numa]

@Nockawa Wow that's perfect! I've tested a bunch of tricky scenarios, seems to work perfectly!

How do I get the update?

[Nockawa]

Well, this has been shipped with the 2.4 already!
I didn't write a clear doc on this matter in the overview documentation, that's the reason you guys got hard times to find out, sorry. There's just a little PG referenced in the bottom of the main page but I admit it's hard to find in the middle of all the existing content already.

I've created a Trello Card to keep track of this thing to do.

[Numa]

Hi @Nockawa, does opacity work on lines too? I have the same problem with lines now. Even though the line is a child of the rectangle, it doesn't fade. and If I give it its own animation, on the first play it doesn't animate, then it works fine.

 

Try this playground, run it, click once, the line will not fade in, just appear. if you click again it will fade in properly. http://babylonjs-playground.com/#1SASV5#6

 

Any ideas? 

[Nockawa]

6 hours ago, Numa said:

Hi @Nockawa, does opacity work on lines too? I have the same problem with lines now. Even though the line is a child of the rectangle, it doesn't fade. and If I give it its own animation, on the first play it doesn't animate, then it works fine.

 

Try this playground, run it, click once, the line will not fade in, just appear. if you click again it will fade in properly. http://babylonjs-playground.com/#1SASV5#6

 

Any ideas? 

The opacity is handled in Lines2d the same way than in the other primitives. So if there's an issue I think it's not related to the primitive's type.

I don't have much time to take a look right now... After the moving in, I don't have the time to settle down that we leave tomorrow for holidays (which is not a bad thing, except for my contribution for babylon.js ).
I've quickly noticed that the first click's behavior is strange, but the second one seems more natural, do you agree?

[Numa]

No worries  

yes the first click is strange, after that it seems to fade properly. 

Also if the line is a child of the label, shouldn't it fade with it? The text fades automatically without me having to do anything, I assumed it was because it was a child of the rectangle. 

[Numa]

I did a few more tests, something is definitely broken here, has anyone got an idea?

If I plot the values during the animation I get the expected transition from 0 to 1, however it's not reflected in the rendering of the primitive, the line doesn't receive the updated opacity value each frame.

 

I'm thinking maybe because I update the points every frame it resets the opacity, maybe?

Thanks guys

[Nockawa]

8 hours ago, Numa said:

I did a few more tests, something is definitely broken here, has anyone got an idea?

If I plot the values during the animation I get the expected transition from 0 to 1, however it's not reflected in the rendering of the primitive, the line doesn't receive the updated opacity value each frame.

 

I'm thinking maybe because I update the points every frame it resets the opacity, maybe?

Thanks guys

I arrive tomorrow at my holidays' destination, I'll take a look as soon as I can.

[Numa]

Cool thanks

[Numa]

Hi there @Nockawa  Any news on this? (I haven't tried the new 2.5 version)

[Nockawa]

Please provide a PG that demonstrate the issue, I'll take a closer look.

thanks

[Numa]

http://babylonjs-playground.com/#1SASV5#10

 

Click anywhere once, the line's opacity doesn't tween, it just goes from 0 to 1 at the end of the animation. Click again and it all works fine.

 

Thanks

[Nockawa]

Ok, issue solved, let me tell you a bit more.

First you have a hierarchy of Canvas which contains a Rectangle2D (Label) and your Rect2D contains a Lines2D.

Considering this, what is enough (in theory) is to only animate the opacity of the Label, all the children's actualOpacity will be reflected with this animation. Now I said in theory because there was a bug that prevented to behave this way. There was also another little bug which made the behavior you had: it doesn't work the first time (because the Lines2D wasn't detecting it was switching from opaque to transparent) but it works after.

Anyway, I've made the first and update the official repo with it. now you have to wait that @Deltakosh updates the PG, get the next nightly build or get the sources from the official repo and recompile locally. 

I'm sorry that I took so long, to be honest, I forgot about it and didn't create a trello card to remind me. Next time ping me again sooner!

 

[Numa]

Thanks I'll try it soon! No problem, I was on holidays and I forgot about it too

[Numa]

@Nockawa has the pg been updated? I got the latest version of babylon and it ALMOST works, but most of the time it flickers when fading in. fading out is fine. Can't reproduce here since it looks like the pg is still running the old version?

 

http://babylonjs-playground.com/#1SASV5#10