728453 - Rendering a radial gradient is slow

Status: NEW

(Core :: Graphics: Canvas2D, defect)

Description

[Jeff Balogh (:jbalogh)]

The IE team released this cute Valentine's Day demo: http://ie.microsoft.com/testdrive/performance/loveisintheair/

It's really slow in Firefox (and Chrome). I get 12-15 FPS on my Macbook pro in both browsers.

stephend tested on his Dell Optiplex; he gets 60 FPS in IE and around 45 FPS in Firefox.

The reason it's slow is that they're creating a new radial gradient as the background image on every frame.  The renderFrame function in http://people.mozilla.com/~jbalogh/ie.microsoft.com/testdrive/performance/loveisintheair/js/gradient.js gets called within a requestAnimationFrame. The gradient renders into its own canvas, and all the hearts are rendered onto another canvas.

I made the site go fast by skipping the gradient: http://people.mozilla.com/~jbalogh/ie.microsoft.com/testdrive/performance/loveisintheair/index.html. It was taking around 38ms to render the gradient according to the console timers I added.

diff --git a/ie.microsoft.com/testdrive/performance/loveisintheair/js/default.js b/ie.microsoft.com/testdrive/performance/loveisintheair/js/default.js
--- a/ie.microsoft.com/testdrive/performance/loveisintheair/js/default.js
+++ b/ie.microsoft.com/testdrive/performance/loveisintheair/js/default.js
@@ -186,7 +186,7 @@ var App = (function () {
         // falling particles
         Animation.addFrameRenderer(Particles.render, particlesContext);
         // background gradient
-        Animation.addFrameRenderer(Gradient.render, backgroundGradientContext);
+        // Animation.addFrameRenderer(Gradient.render, backgroundGradientContext);
         // add secret lights
         Animation.addFrameRenderer(Lights.render, lightContext);
         // reminder we can add context-less animations (e.g. not using canvas), and those should go the last

I was hoping I could optimize their code and make it render faster, but it turned out that Firefox is the bottleneck. :(

Comment 1

[Christoph Bratschi]

I have the same problem with Firefox and Seamonkey: radial gradients seem to produce a lot of garbage while rendering to a Canvas 2D context. At the beginning the animations runs at normal speed but gets slower and slower until the whole UI is slowly reacting.

My code is available at:

http://www.bratschi.net/webmds/MDS.html

Comment 2

[Christoph Bratschi]

Another addition: radial gradients look different than in other browsers. The gradient is not smooth, there is a jump in the middle.

Comment 3

[Guilherme Lima]

Win 7 with HWA
Nightly 27 and IE10 have the same performance. With 4000 hearts erasing a part of the big heart, I get 40fps. Chrome is faster, it hits 53fps.