Open Bug 1493466 Opened 6 years ago Updated 2 years ago

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

Categories

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

Product:
Core
Component:
Graphics: WebRender
Type:
defect

Tracking

()

Tracking Flags:
Tracking Status
firefox64 --- affected

People

(Reporter: mstange, Assigned: jrmuizel)

References

(Blocks 2 open bugs)

Details

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.
Flags: needinfo?(jmuizelaar)
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.
Blocks: stage-wr-trains, wr-perf
Priority: -- → P2
Depends on: blob-recoord
Flags: needinfo?(jmuizelaar)
Priority: P2 → P3
Priority: P3 → P2
Assignee: nobody → jmuizelaar

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

Blocks: stage-wr-next
No longer blocks: stage-wr-trains

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.

Blocks: blob-perf
No longer blocks: stage-wr-next, wr-perf
Priority: P2 → P3
Blocks: 1782834
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.