1493466 - Circle animation on radio website is janky (too much texture upload because SVG blob clip is ignored)

Status: NEW

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

Description

[Markus Stange [:mstange]]

STR:
 1. Enable the WebRender profiler.
 2. Go to https://www.gty.org/broadcasts/radio/schedule and wait for the page to load.
 3. Observe the expanding circle animation and see that it janks heavily towards the end of the animation.

There are numbers as high as 163MB in the "Texture data" section of the profiler.
163MB is too much.

The site has an <svg><g><circle /></g></svg> with the following dimensions:
 svg: 1440x739
 circle: 3237x3237

The svg is overflow:hidden (the default).

(3237 * 2) * (3237 * 2) * 4 bytes == 167MB
(1440 * 2) * (739 * 2) * 4 bytes == 17MB

So we're rasterizing and uploading 10x as much as we need to.

Comment 1

[Markus Stange [:mstange]]

So they way I'd expect this to work is:
 (1) The size of the blob image should be 3237x3237
 (2) The size of the blob's visible area should be 1440x739
 (3) Rasterization and texture upload should be constrained to the visible area

I think (3) is the part that we're not doing right yet. Maybe (2) as well.

Comment 2

[Jeff Muizelaar [:jrmuizel]]

This isn't great, but I think it's probably good enough to ship the MVP.

Comment 3

[Nicolas Silva [:nical]]

It looks like the amount of texture data was fixed but the animation is still rather janky (intel 4k screen). I think that it's unlikely we'll get 60 fps while uploading a screenful of blobs to the GPU.

One thing particularly frustrating about this page is that we could render that circle with a display item (a rounded rect) rather than rendring hundreds of blobs that are filled with opaque white.
Or we could add an optimization to the blob code that detects when a tile is a single color. That would actually help a lot of web pages and the inspector in the devtools.