1498291 - CSS blur effects are highly inefficient and very slow in canvas filters (Sister bug of Chrome bug #726143).

Status: RESOLVED DUPLICATE of bug 1912897

(Core :: Graphics: Canvas2D, defect, P4)

Description

[Patrick Martin]

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:60.0) Gecko/20100101 Firefox/60.0

Steps to reproduce:

I have been developing a Advanced Substation Alpha subtitle renderer and have run into a bug with both Firefox and chrome in all versions that work with canvas filters.

A complex example can be found at:
http://ec2-54-193-19-209.us-west-1.compute.amazonaws.com/demo/

Some of the chrome devs produced a test case that causes chrome to replicate the slowness via a different method than the complex version but it's not guaranteed to do the same in firefox:
https://jsfiddle.net/0vLruL2x/1/

Here's one with an FPS counter:
https://jsfiddle.net/mroqd18a/


Actual results:

Css blurring in canvas filters causes extreme rendering lag, firefox is not as bad at this as chrome but it's still bad enough to cause 5-10 fps even on the highest end computers. Chrome produces 1-5 fps.


Expected results:

A reasonable framerate should be expected.

It shouldn't really lag at all, it might make sense to take a look at the gaussian blur algorithm in the libass open source subtitle renderer as it's been heavily optimized for performing high-speed gaussian blurs on the CPU, but really this should be performed on the gpu.

Comment 1

[Patrick Martin]

Note that if you have canvas filters turned off this bug will not appear.

Comment 2

[Alice0775 White]

Edge is quite smooth.

Comment 3

[Patrick Martin]

This is running an older build of my code, but the new version still triggers this bug.

Comment 4

[Sotaro Ikeda [:sotaro]]

:lsalzman, can you comment to the bug?

Comment 5

[Patrick Martin]

I have a more extreme demo that I can upload instead

Comment 6

[Patrick Martin]

*a more extreme example of this issue

Comment 7

[Patrick Martin]

Here is a video that is a better test case of this as it's specifically designed to stress the blurring functions:
http://ec2-54-193-19-209.us-west-1.compute.amazonaws.com/test_blur/

Comment 8

[Mayank Bansal]

(In reply to Patrick Martin from comment #7)
> Here is a video that is a better test case of this as it's specifically
> designed to stress the blurring functions:
> http://ec2-54-193-19-209.us-west-1.compute.amazonaws.com/test_blur/

profile: https://perfht.ml/2J2j1xX

Comment 9

[Sotaro Ikeda [:sotaro]]

(In reply to Mayank Bansal from comment #8)
> (In reply to Patrick Martin from comment #7)
> > Here is a video that is a better test case of this as it's specifically
> > designed to stress the blurring functions:
> > http://ec2-54-193-19-209.us-west-1.compute.amazonaws.com/test_blur/
> 
> profile: https://perfht.ml/2J2j1xX

From profile, WebGL and Canvas2D(D2D backend) were used. And VideoDecoderManagerChild::Readback() appeared in the profile, since MP4 video is normally decoded in GPU process.

Comment 10

[Patrick Martin]

Yeah, the player uses webgl for compositing of subtitles and canvas 2d for rendering text.

Comment 11

[chrisc]

I also am noticing an extreme performance degradation when using CSS filters. It doesn't matter if the filter is applied in the Javascript canvas context or in CSS directly.

See a very simple example here: https://codepen.io/anon/pen/NoJwJR

Comment 12

[chrisc]

(In reply to chrisc from comment #11)

I also am noticing an extreme performance degradation when using CSS filters. It doesn't matter if the filter is applied in the Javascript canvas context or in CSS directly.

See a very simple example here: https://codepen.io/anon/pen/NoJwJR

Profile: https://perfht.ml/2V264sA

Comment 13

[Patrick Martin]

Any updates on this? Here's an updated link to a more extreme case: https://about.ilovepie.dev/test_blur/

Comment 14

[Patrick Martin]

it does seem that performance has improved somewhat since i last checked though.

Comment 15

[Wayne Mery (:wsmwk)]

(In reply to Patrick Martin from comment #14)

it does seem that performance has improved somewhat since i last checked though.

Good enough to close?

Comment 16

[Patrick Martin]

I haven't tested this in a while, as far as I know though, the algorithms used in gaussian blurring for CSS filters are still very slow compared with some other implementations out there (for example the Gaussian blur implementation in libass) and force the canvas to use software rendering. I've had to work around it using a WebGL shader that implements Gaussian blur. What i would suggest is a simple test case with 4 or five spinning rectangles that are drawn in canvas 2D using the Gaussian blur filter with a large sigma (> 80) that overlap each other. That should demonstrate the issue. I'll fix the link i posted in comment 13 and re link it in a bit.

Comment 17

[Patrick Martin]

This could be fixed by using SIMD when not using the GPU. It's been a while since I have checked CSS bluring's performance as I have since switched to using WebGL for my blur needs so someone might want to reverify this.

Comment 19

[Mayank Bansal]

I will dupe it over to bug 1912897