Poor performance when tweening many objects

[omnider 2 Likes (Newbie)]

Hi,

 

I've been doing this wee thing that is suppose to simulate a falling snow and I've run into some performance issues along the way.

 

I've made this pen to demonstrate what I'm trying to do: 

See the Pen hLkyJ by omnider (@omnider) on CodePen

 

Basically all it does is create a fix number of <divs> and then tweening their x,y,scale,rotationX,rotationY,rotationZ .. I used force3D with no effect one way or the other.

 

Does anybody have any suggestion that could make the things fall a bit smoother? (10 fps on my machine right now)

 

Cheers.

[Michael71 59 Likes (Contributor)]

I would suggest to try canvas for this, if you use KineticJS (or any other framework) you should be able to tween individual "flakes" as you are doing now, and it will not be much of a code change from what I saw.

 

In general I have come to accept that animating large number of DOM elements (over 600 or so) has a huge impact on performance. As it has been stated before in these forums its not the javascript part that overhauls the CPU but the html rendering part.

 

In my opinion people where fast to abolish Adobe Flash but as it turns out HTML wasn't fully up to the task of maintaining performance on large scale animations or computations. It is getting there but "Browser" seems to be losing its meaning.

-end of rant- 

 

If you find something that makes your animations run better let us know.

[omnider 2 Likes (Newbie)]

Hey,

 

Thanks for the suggestion. I was kinda hoping I wouldn't be forced to use canvas (probably as much as I was always hoping not to use stage3D in Flash when I could ) .. But it might be my only option...

 

Unless someone has some magic tricks up their sleeve on this one?

[Jonathan 5,324 Likes (Superhero)]

have you seen this codepen by GreenSock? It animates particles numbers, maybe it will give you some ideas?

 

See the Pen zrmiG by GreenSock (@GreenSock) on CodePen

 

also if you view this GreenSock speed test:

 

http://www.greensock.com/js/speed.html

 

you could try adding a border and outline transparent to remove the jaggy edges from your flakes in Firefox, and maybe have a transform property in your style sheet on that .flake rule:

.flake {
    position:absolute; 
    width:100px; 
    height:100px; 
    background:#fff;

    transform: scale(1) rotate(0deg) translate3d(0,0,0.1px);  
    border:1px solid transparent;
    outline:1px solid transparent;
}

But when i view the flakes in the browser inspector i see the flakes have the transform matrix3d being applied .. so force3D is working.. its just there are too many DOM elements being animated at the same time.

 

For example in Firefox the amount of flakes you have set for snowAmount is 400.. When i make that 200 it smooths out but still is slow. Whereas Chrome renders the flakes at 400 better than Firefox.

 

Im sure there is a way to optimize your code to take into account the different browsers.

 

But  the fact remains that animating DOM elements are very expensive performance wise on the CPU, as stated above, and in other forum posts... so maybe some other people in the community can offer some better advise than me

[Michael71 59 Likes (Contributor)]

Another thought would be to increase the speed at which flakes fall, and as soon as they reach the end of the screen they get recycled before more appear, so that will give you a stable amount of flakes at any given moment. Also it might be a good idea to perform removal and insertion of new "flakes" asynchronously with TweenMax.delayedCall.

 

I hope it helps.

[djanes376 6 Likes (Newbie)]

I played with your codepen a bit and things smooth out a decent amount changing the snowAmount to 300, gravity to 1000, removing the alpha which doesn't affect aesthetics much but improves performance. As others have said, its just the nature of animating a lot of objects in the dom that causes performance issues. Canvas would certainly render this without issue, but then you get into browser support problems. It's just a trade-off you need to make for your use. Also, it looks more snow-like when you decrease 'flake size' and add  border-radius:50%;

  box-shadow:0px 0px 30px 20px white;

 

good luck.

[Rodrigo 3,567 Likes (Superhero)]

Hi,

 

First thing would be particle size, your snow flakes are far too big and are causing a lot of stress on the browser. Also since your particles are absolutely positioned they don't affect document flow, so try tweening top/left instead of x/y, you're also leaning too much on the GPU by using transforms, for the same reason instead of scaling the snow flakes down, try setting their height and with with a Math.random() function.

 

Take a look at this reply by Jack in order to see why this could improve performance.

 

Rodrigo.

[omnider 2 Likes (Newbie)]

Another thought would be to increase the speed at which flakes fall, and as soon as they reach the end of the screen they get recycled before more appear, so that will give you a stable amount of flakes at any given moment. Also it might be a good idea to perform removal and insertion of new "flakes" asynchronously with TweenMax.delayedCall.

 

I hope it helps.

The flakes are actually being reused when they get off the screen (they just get new x and y), so this should be causing any performance issues.

 

djanes376: The squares are just to show what's going on, in the end there should be bitmaps replacing them (which I assume won't help much with the performance issue either...)

The way it is set now is kinda what it needs to look like (number of flakes and size wise), so can't really temper with that neither. Gonna go ahead and try it on canvas ... I'll post a pen with the result once I have it

[omnider 2 Likes (Newbie)]

Rodrigo:  Thanks, I actually tried animating left/top and keeping the scale to 1 but I still had the force3D turned on so the result wasn't any good...I'll give it a go with matrix3d completely switched off.

 

EDIT: Well, due to the lack of subpixel rendering it now looks weird as the flakes are jumping up and down between pixels .. Canvas it is then I suppose...

Edited November 21, 2013 by omnider

[Rodrigo 3,567 Likes (Superhero)]

Yep,

 

Since you're going to add bitmaps canvas is the best way to go.

 

I'd recommend you using the KineticsJS plugin, because it updates every layer independently of the rest, so it should give you a better performance, also you should try to get your hands into some snow flakes canvas paths instead of using images, that also should improve performance.

 

Rodrigo.