locked
Creating high performance animations in WPF RRS feed

  • Question

  • Hi All,

    I'm in a situation that requires many animations with effects like transparency to be applied but when there are about 10 of them running, my application slows down to a grinding halt! :(

    I also, tried implementing a particle like effect using a frame by frame manual animation using the CompositionTarget.Rendering event, which changed an Image's Source property at a given framerate. Again, this works fine for the first few instances of the particles on the screen, but when more and more get added I need it to stay performance wise, which is always a tough ask for any application

    I was wondering if anyone has any experience using pixel shaders in WPF for animations, or perhaps custom writeablebitmap's for animations?

    I basically need to palm off most of the animation processing to the GPU if possible...

    Thanks for any help you can give!

    Cheers, Mark

    Wednesday, November 4, 2009 6:27 AM

Answers

  • It's hard to speculate on your problem any further without actually profiling it.  WPF primitive rendering unfortunately doesn't scale too well yet, but people usually hit issues with on the order of hundreds or thousands of animating shapes, not dozens.  Some things to try out - if all your Ellipses are using the same fill, try sharing the GradientBrush (and freezing it if you aren't animating the brush properties).  You could also try animating the brush opacity and not animating opacity per Ellipse (obviously this would only work if they are unstroked).

    Looking back at your original post, I'm not sure I understand it.  You said something about manual animation - are you doing this frame by frame because of the randomness you want to introduce?  Why are you changing ImageSource per frame - if this is causing you to load and decode new images that could be part of the performance issue, you should check into the bitmap's cache options? 
    Friday, November 6, 2009 11:56 PM

All replies

  • "Animation processing" does not occur on the GPU in WPF - ticking the clocks and propagating animation values throughout the property system is all done on the CPU.  Rendering the animating content is done on the GPU.  Are you pegging the CPU at 100% usage, or just getting a poor frame rate?  It would help if you explained your scenario in a bit more detail - what type of content are you drawing, what sort of effects are you applying (Opacity?  ShaderEffects?), what's animating, and how many objects/animations/effects are we talking about?
    Wednesday, November 4, 2009 9:36 PM
  • Sorry, I should be more specific, currently, we are getting a maxed out CPU, which leads to a poor overall experience (obviously).

    When certain events happen (up to a max of about 20), we are trying to insert many ellipses with gradient fills, when we insert them, we fire-off a custom event which triggers animations to "fade-in" using opacity, and then the ellipse will zoom around the screen, and after a random time, another animation will occur which fades it out, again using opacity.

    I hope that explains in more detail for you, if you need more info, please let me know :)

    thanks
    Mark
    Thursday, November 5, 2009 4:08 AM
  • How many ellipses are we talking about?  What tier is your system reporting to WPF?  If you're rendering in software I could imagine the CPU pegging 100% when doing complex rendering, it might be worth verifying that that isn't the case.  The easiest way to be 100% sure you aren't rendering in software is to download the WPF Performance Suite, in one of the visual perf tools you'll find a checkbox that draws all content being rendered in software with a different tint.
    Thursday, November 5, 2009 10:33 PM
  • We arent talking about that many actually, perhaps 10 - 20 at a time, each having its own begin and end animation, which fade it in and out.

    I have just installed the WPF Performance Suite and none of it is drawn in software! I was expecting some of it at least... I guess I could remove the animations to see if thats the issue.
    Friday, November 6, 2009 6:17 AM
  • It's hard to speculate on your problem any further without actually profiling it.  WPF primitive rendering unfortunately doesn't scale too well yet, but people usually hit issues with on the order of hundreds or thousands of animating shapes, not dozens.  Some things to try out - if all your Ellipses are using the same fill, try sharing the GradientBrush (and freezing it if you aren't animating the brush properties).  You could also try animating the brush opacity and not animating opacity per Ellipse (obviously this would only work if they are unstroked).

    Looking back at your original post, I'm not sure I understand it.  You said something about manual animation - are you doing this frame by frame because of the randomness you want to introduce?  Why are you changing ImageSource per frame - if this is causing you to load and decode new images that could be part of the performance issue, you should check into the bitmap's cache options? 
    Friday, November 6, 2009 11:56 PM
  • Thanks for the help, Ill give those a shot and let you know.

    Sorry about the confusing questions, I got a bit muddled trying to fix multiple problems at the same time :) but your info will help me out for now...

    Ill look into the caching options!

    Thanks
    Saturday, November 7, 2009 7:28 AM