1190398 - BLCK4777 1kb js site is very janky with my triangles on screen

Status: RESOLVED DUPLICATE of bug 1789268

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

Description

[Ben Kelly [:bkelly, not reviewing]]

Check out this impressive 1kb js demo:

  http://www.p01.org/releases/BLCK4777/BLCK4777_safe.htm

When all the triangles start exploding nightly starts slowing to a crawl.  Even browser chrome interactions are delayed.

I'm just taking a guess that this is webgl related.

Comment 1

[Mathieu 'p01' Henri]

Hello,

No WEBGL there, BLCK4777 is pure 2D Canvas.
The thing was that puts Firefox to a crawl are the shadowBlur.

BLCK4777 renders just a 1000+ triangles with shadowBlur to make them "glow".
Blink & Webkit have no problem with that.

Mind you the safe version that you linked to uses requestAnimation frame to play "nice" to the browsers while the compressed version uses a brutal/compact setInterval("/* tons of code */", 13)



Thanks a lot for filling this bug report, I got caught with the deadline and personal activities.

Let me know how I can help improve the situation about shadowBlur in 2D canvas in Firefox.


-- p01 author of BLCK4777

Comment 2

[Ben Kelly [:bkelly, not reviewing]]

Thanks Mathieu.  Markus, do you have any thoughts on this?  (James suggested you for canvas 2d stuff.)

Comment 3

[Timothy Nikkel (:tnikkel)]

On mac a profile shows us spending most of the time doing a drop shadow for a canvas fill call in skia. If I switch the canvas backend to cairo then it speeds up a lot.

Comment 5

[Mathieu 'p01' Henri]

Any update on the Canvas renderer / backend ?

ShadowBlur is still orders of magnitude slower in Firefox than Blink :'(

Comment 6

[Mathieu 'p01' Henri]

Can I help in any way ?
Maybe a simpler test case or do you have some performance tests that cover shadowBlur ?

Would love to see optimized shadowBlur in Firefox.

Comment 7

[maggus.staab]

This bug was mentioned again in a recent blog post because it renders a technical demo useless on firefox.
Just wanted to let you know

http://www.p01.org/MONOSPACE/

Comment 8

[Michal Čaplygin [:myf]]

Aforementioned demo, article and this bugreport received attention in HN discussion with several reports confirming subpar performance and even audio playback of "zombie tabs" reported as bug 1671968.

Comment 9

[Jeff Muizelaar [:jrmuizel]]

Is performance bad on Windows?

Comment 10

[Mathieu 'p01' Henri]

Abys(In reply to Jeff Muizelaar [:jrmuizel] from comment #9)

Is performance bad on Windows?

It's abysmal in Firefox due to the shadowBlur :(

Comment 11

[Jeff Muizelaar [:jrmuizel]]

(In reply to Mathieu 'p01' Henri from comment #10)

Abys(In reply to Jeff Muizelaar [:jrmuizel] from comment #9)

Is performance bad on Windows?

It's abysmal in Firefox due to the shadowBlur :(

Does it also perform badly in pre-chromium Edge?

Comment 12

[Mathieu 'p01' Henri]

:\ Sorry all my machines have upgraded from Edge legacy to the Chromium based one.

MONOSPACE* renders 1024 filled arcs ( circles ) with different shadowBlur to make them look blurry / out of focus.
The arcs are outside of the visible viewport, and the shadowOffestY brings the "shadow" into the visible viewport.

*: http://www.p01.org/MONOSPACE/

Comment 13

[Michal Čaplygin [:myf]]

(In reply to Jeff Muizelaar [:jrmuizel] from comment #11)

Does it also perform badly in pre-chromium Edge?

Not on my machine: tried http://www.p01.org/MONOSPACE/monospace-compatible.htm on Edge from 2017 (not even the last pre-chromium version: Microsoft Edge 41.16299.1480.0 with EdgeHTML 16.16299) and demo runs comparatively equally well as in today's Google Chrome Canary, even with sound and TTS. It just scales text differently (or uses different font) and has more prominent gradient banding (like it used shallower colour depth), but overall runs smoothly and with similar CPU and GPU footprint. (Intel I5-8250U, Intel UHD 620 GPU.)

Comment 14

[Markus Stange [:mstange]]

There have been some improvements to canvas shadow performance in bug 1789268.