New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 606687 link

Starred by 3 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug



Sign in to add a comment

Investigate performance problems for 'Canvas suite > Fill shapes' benchmark

Project Member Reported by dk...@chromium.org, Apr 26 2016

Issue description

All benchmarks are under pr.gg/animometer/developer.html

- Set "Ramp" mode for benchmarking.
- Set "Keep at a fixed complexity" for profiling.  Set an appropriate [high] complexity next to each test's name.

File any performance bugs found as blocking this issue.
 

Comment 1 by dk...@chromium.org, Apr 27 2016

Owner: esprehn@chromium.org
Status: Assigned (was: Untriaged)
On my MBP, w/ Ganesh, on a low DPI monitor:

Chromium 52 28c0dd4fc82d8834c0508492fc693204da39e21b
Ramp Score = 220

Safari 9.1 (11601.5.17.1)
Ramp Score = 920

So Safari is ~4x faster.
Cc: kbr@chromium.org junov@chromium.org
Components: Blink>Canvas
Here's a trace with Complexity set to 235, we spend nearly all of the time in the frame blocked on an IPC to the GPU process.
main-thread.png
36.9 KB View Download
gpu-thread.png
22.7 KB View Download

Comment 4 by kbr@chromium.org, May 9 2016

Cc: vmi...@chromium.org
Components: Internals>GPU>Canvas2D

Comment 5 by kbr@chromium.org, May 9 2016

Cc: -kbr@chromium.org
Cc: senorblanco@chromium.org
I see my trace didn't get attached, woops. I'll attach that tonight.

junov@ What's going on here with rendering in canvas? Both software and ganesh are much slower than Safari.
On every requestAnimationFrame this benchmark is doing:

1) Clear the canvas

// Clear the canvas
context.clearRect(0, 0, this.size.x, this.size.y);

2) Loop through a set of Shape objects calling draw(). The benchmarks use a predictable pseudo random generator to pick the set. Any given complexity will have the same set of shapes.

The draw commands for the 4 different shape types in this benchmark are:

  // CanvasArcSegmentFill:
  context.fillStyle = this._color;
  context.beginPath();
  context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
  context.fill();

  // CanvasEllipseFill:
  context.fillStyle = this._color;
  context.beginPath();
  context.ellipse(this._center.x, this._center.y, this._radius.width, this._radius.height, this._rotation, this._startAngle, this._endAngle, this._anticlockwise);
  context.fill();

  // CanvasRectFill:
  context.fillStyle = this._color;
  context.beginPath();
  context.rect(this._point.x, this._point.y, this._width, this._height);
  context.fill();

  // CanvasArcToSegmentFill:
  context.fillStyle = this._color;
  context.beginPath();
  context.moveTo(this._point1.x, this._point1.y);
  context.arcTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._radius);
  context.fill();

trace_trace-fill-shapes-canary.json.gz
11.7 MB Download
Cc: esprehn@chromium.org ccameron@chromium.org
Owner: junov@chromium.org
I traced this on Linux and Chrome OS, and those don't have the huge WaitForToken() sync IPC slice. I'm not sure what's different on mac.

As you might suspect, much of this is bound on path rendering, which in Canvas does not use MSAA currently, so doesn't use the tessellating path renderer.

You can experiment with MSAA for canvas with --canvas-msaa-sample-count=X. Try 4 for hidpi, 8 for lodpi, which is what we're using currently in GPU rasterization. On my Retina MBP (discrete GPU), this takes results from ~220 to ~550.

This may be a viable solution for GPUs with decent MSAA (i.e., non-Intel). However, we have to decide if we want to trade the extra VRAM required for MSAA for improved performance.

I also have a screenspace-AA version of the tessellating path renderer, which doesn't require MSAA. It's still a WIP, but gives a 20-40% boost. Not as dramatic as the above, but works on Intel and doesn't cost extra VRAM.
Do we know what Safari/Core Graphics is doing here to be 4x faster?
I'm not seeing 4X faster. On Intel, with "maintain target FPS", I see a score of 506 on Safari, and 251 on today's Chrome Canary. (Note that these are different score ranges than above -- Justin pointed out that the "maintain target FPS" option yields much more consistent results than "Ramp".)

Comment 13 by junov@chromium.org, May 16 2016

Owner: sebastienlc@google.com
Cc: dk...@chromium.org
I just noticed that with --force-display-list-2d-canvas, the GPU veto was not noticing the paths in this test (or other canvas tests). This is because the canvas commands are inside an SkPictureImageFilter which the GPU veto does not see.

I wrote up a quick Skia patch here which fixes it: https://codereview.chromium.org/2036783005/.

It now vetos to MSAA, but strangely, the performance is worse than with --canvas-msaa-sample-count set.
Project Member

Comment 16 by bugdroid1@chromium.org, Jun 9 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/c0a7ab42ca62bf097d879cc298ee1e97121463eb

commit c0a7ab42ca62bf097d879cc298ee1e97121463eb
Author: sebastienlc <sebastienlc@google.com>
Date: Thu Jun 09 22:36:19 2016

Added telemetry pages for the canvas element.

BUG=606687,606686,606685

Review-Url: https://codereview.chromium.org/2047773002
Cr-Commit-Position: refs/heads/master@{#399039}

[modify] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases.py
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/bouncing_clipped_rectangles.html
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/bouncing_clipped_rectangles.js
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/bouncing_gradient_circles.html
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/bouncing_gradient_circles.js
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/bouncing_png_images.html
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/bouncing_png_images.js
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/bouncing_svg_images.html
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/bouncing_svg_images.js
[modify] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/canvas_arcs.js
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/canvas_lines.html
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/canvas_lines.js
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/canvas_tough_cases_lib.js
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/fill_shapes.html
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/fill_shapes.js
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/images/Chromium_11_Logo.svg
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/put_get_image_data.html
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/put_get_image_data.js
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/stroke_shapes.html
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/stroke_shapes.js

Project Member

Comment 17 by bugdroid1@chromium.org, Jun 15 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/c0a7ab42ca62bf097d879cc298ee1e97121463eb

commit c0a7ab42ca62bf097d879cc298ee1e97121463eb
Author: sebastienlc <sebastienlc@google.com>
Date: Thu Jun 09 22:36:19 2016

Added telemetry pages for the canvas element.

BUG=606687,606686,606685

Review-Url: https://codereview.chromium.org/2047773002
Cr-Commit-Position: refs/heads/master@{#399039}

[modify] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases.py
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/bouncing_clipped_rectangles.html
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/bouncing_clipped_rectangles.js
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/bouncing_gradient_circles.html
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/bouncing_gradient_circles.js
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/bouncing_png_images.html
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/bouncing_png_images.js
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/bouncing_svg_images.html
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/bouncing_svg_images.js
[modify] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/canvas_arcs.js
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/canvas_lines.html
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/canvas_lines.js
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/canvas_tough_cases_lib.js
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/fill_shapes.html
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/fill_shapes.js
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/images/Chromium_11_Logo.svg
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/put_get_image_data.html
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/put_get_image_data.js
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/stroke_shapes.html
[add] https://crrev.com/c0a7ab42ca62bf097d879cc298ee1e97121463eb/tools/perf/page_sets/tough_canvas_cases/rendering_throughput/stroke_shapes.js

Comment 18 by junov@chromium.org, Jun 20 2016

Labels: -Pri-1 Pri-2
Project Member

Comment 19 by bugdroid1@chromium.org, Jul 20 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/98739b054a5b28cc607d688b2e9e582456bbb20e

commit 98739b054a5b28cc607d688b2e9e582456bbb20e
Author: sebastienlc <sebastienlc@google.com>
Date: Wed Jul 20 16:48:12 2016

Improving canvas 2D performance by switching graphics rendering pipeline.

1. Functionality to switch from the accelerated (GPU) graphics pipeline
to the recording graphics pipeline.
2. Simple heuristic to determine when the pipeline switch would increase
performance based on how the canvas was used previously.
3. Automatically switch pipeline to increase performance based on the
heuristic if the enable-canvas-2d-dynamic-pipeline-mode-switching flag is enabled.

BUG=606687, 606686, 606685
TBR=grt@chromium.org

Review-Url: https://codereview.chromium.org/2141793002
Cr-Commit-Position: refs/heads/master@{#406585}

[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/chrome/app/generated_resources.grd
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/chrome/browser/about_flags.cc
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/chrome/browser/chromeos/login/chrome_restart_request.cc
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/content/browser/renderer_host/render_process_host_impl.cc
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/content/child/runtime_features.cc
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/content/public/common/content_switches.cc
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/content/public/common/content_switches.h
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/third_party/WebKit/Source/core/html/HTMLCanvasElement.cpp
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/third_party/WebKit/Source/core/html/HTMLCanvasElement.h
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/third_party/WebKit/Source/core/html/canvas/CanvasRenderingContext.h
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/third_party/WebKit/Source/modules/canvas2d/CanvasRenderingContext2D.cpp
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/third_party/WebKit/Source/modules/canvas2d/CanvasRenderingContext2D.h
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/third_party/WebKit/Source/modules/canvas2d/CanvasRenderingContext2DTest.cpp
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.in
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/third_party/WebKit/Source/platform/graphics/ExpensiveCanvasHeuristicParameters.h
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/third_party/WebKit/Source/platform/graphics/ImageBuffer.cpp
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/third_party/WebKit/Source/platform/graphics/ImageBuffer.h
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/third_party/WebKit/Source/web/WebRuntimeFeatures.cpp
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/third_party/WebKit/public/web/WebRuntimeFeatures.h
[modify] https://crrev.com/98739b054a5b28cc607d688b2e9e582456bbb20e/tools/metrics/histograms/histograms.xml

Project Member

Comment 20 by bugdroid1@chromium.org, Jul 29 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/4bc8c2ea186824137a5542b4fd98e226060f02df

commit 4bc8c2ea186824137a5542b4fd98e226060f02df
Author: sebastienlc <sebastienlc@google.com>
Date: Fri Jul 29 18:53:16 2016

Improving the description of the dynamic rendering mode switching flag.

BUG=606687, 606686, 606685
TBR=grt@chromium.org
NOTRY=true

Review-Url: https://codereview.chromium.org/2194963002
Cr-Commit-Position: refs/heads/master@{#408702}

[modify] https://crrev.com/4bc8c2ea186824137a5542b4fd98e226060f02df/chrome/app/generated_resources.grd

Cc: sunn...@chromium.org
re: "huge WaitForToken() sync IPC slice" in #9, that's from using GpuMemoryBuffers. Adding Sunny, who has been looking at issues with wait-token.
Cc: -junov@chromium.org
Owner: junov@chromium.org
assign to junov@
Owner: ----
Status: Available (was: Assigned)

Sign in to add a comment