Skip to content

GitLab

T
tangled
Commit 9d8df62a authored by Teresa Kang's avatar Teresa Kang Committed by Commit Bot
Browse files
Options

Move getImageData test to Rendering Benchmark 

- Move getImageData-cpu perf test to rendering benchmark
- Remove repeated-draw and repeated-getImageData tests
- Replace usages of Math.random with a counter to force different fill
color for each frame, to keep the tests simple and reduce dependency

Bug: 1077148
Change-Id: Ib7caed70f6a86122c74cee6045179162b3448874
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2316454Reviewed-by: default avatarJohn Chen <johnchen@chromium.org>
Reviewed-by: default avatarJuanmi Huertas <juanmihd@chromium.org>
Reviewed-by: default avatarYi Xu <yiyix@chromium.org>
Reviewed-by: default avatarFernando Serboncini <fserb@chromium.org>
Commit-Queue: Teresa Kang <teresakang@google.com>
Cr-Commit-Position: refs/heads/master@{#792791}
parent f7438c7b
Hide whitespace changes
Inline Side-by-side
Showing with 69 additions and 232 deletions
third_party/blink/perf_tests/canvas/getImageData-cpu.html deleted 100644 → 0
View file @ f7438c7b
<!DOCTYPE html>
<html>
<body>
<script src="../resources/runner.js"></script>
<script>
var canvas2D = document.createElement("canvas");
var ctx2D = canvas2D.getContext("2d", { willReadFrequently: true });
function setSize(width, height) {
canvas2D.width = width;
canvas2D.height = height;
}
function rand(range) {
return Math.floor(Math.random() * range);
}
function fillCanvas(ctx2d, canvas2d) {
ctx2d.fillStyle = "rgba(" + rand(256) + "," + rand(256) + "," + rand(256) +
"," + rand(256) + ")";
ctx2d.fillRect(0, 0, canvas2d.width, canvas2d.height);
}
function getImageDataFromCanvas2D() {
ctx2D.getImageData(0, 0, canvas2D.width, canvas2D.height);
}
setSize(1024, 1024);
fillCanvas(ctx2D, canvas2D);
PerfTestRunner.measureRunsPerSecond({
run: getImageDataFromCanvas2D,
description: "This bench test checks the speed on getting ImageData from " +
"Canvas2D(1024x1024)."
});
</script>
</body>
</html>
third_party/blink/perf_tests/canvas/repeated-draw-cpu.html deleted 100644 → 0
View file @ f7438c7b
<!DOCTYPE html>
<html>
<body>
<script src="../resources/runner.js"></script>
<script>
const canvas2D = document.createElement("canvas");
var ctx2D = canvas2D.getContext("2d", { willReadFrequently: true });
function setSize(width, height) {
canvas2D.width = width;
canvas2D.height = height;
}
function fillCanvas(ctx2d) {
ctx2d.fillStyle = "green";
ctx2d.fillRect(0, 0, ctx2d.canvas.width, ctx2d.canvas.height);
}
function repeatedDrawAndGetImageDataFromCanvas2D() {
for (let i = 0; i < 10; ++i)
fillCanvas(ctx2D);
ctx2D.getImageData(0, 0, canvas2D.width, canvas2D.height);
}
setSize(1024, 1024);
PerfTestRunner.measureRunsPerSecond({
run: repeatedDrawAndGetImageDataFromCanvas2D,
description: "This bench test checks the speed on repeated draw and" +
" getImageData once from Canvas2D(1024x1024) if rendered by CPU."
});
</script>
</body>
</html>
third_party/blink/perf_tests/canvas/repeated-draw-gpu.html deleted 100644 → 0
View file @ f7438c7b
<!DOCTYPE html>
<html>
<body>
<script src="../resources/runner.js"></script>
<script>
const canvas2D = document.createElement("canvas");
var ctx2D = canvas2D.getContext("2d", { willReadFrequently: false });
function setSize(width, height) {
canvas2D.width = width;
canvas2D.height = height;
}
function fillCanvas(ctx2d) {
ctx2d.fillStyle = "green";
ctx2d.fillRect(0, 0, ctx2d.canvas.width, ctx2d.canvas.height);
}
function repeatedDrawAndGetImageDataFromCanvas2D() {
for (let i = 0; i < 10; ++i)
fillCanvas(ctx2D);
ctx2D.getImageData(0, 0, canvas2D.width, canvas2D.height);
}
setSize(1024, 1024);
PerfTestRunner.measureRunsPerSecond({
run: repeatedDrawAndGetImageDataFromCanvas2D,
description: "This bench test checks the speed on repeated draw and" +
" getImageData once from Canvas2D(1024x1024) if rendered by GPU."
});
</script>
</body>
</html>
third_party/blink/perf_tests/canvas/repeated-getImageData-cpu.html deleted 100644 → 0
View file @ f7438c7b
<!DOCTYPE html>
<html>
<body>
<script src="../resources/runner.js"></script>
<script>
const canvas2D = document.createElement("canvas");
var ctx2D = canvas2D.getContext("2d", { willReadFrequently: true });
function setSize(width, height) {
canvas2D.width = width;
canvas2D.height = height;
}
function fillCanvas(ctx2d) {
ctx2d.fillStyle = "green";
ctx2d.fillRect(0, 0, ctx2d.canvas.width, ctx2d.canvas.height);
}
function drawAndRepeatedGetImageDataFromCanvas2D() {
fillCanvas(ctx2D);
for (let i = 0; i < 10; ++i)
ctx2D.getImageData(0, 0, canvas2D.width, canvas2D.height);
}
setSize(1024, 1024);
PerfTestRunner.measureRunsPerSecond({
run: drawAndRepeatedGetImageDataFromCanvas2D,
description: "This bench test checks the speed on a draw operation followed" +
" by repeatedly calling getImageData from Canvas2D(1024x1024) if rendered" +
" by CPU."
});
</script>
</body>
</html>
third_party/blink/perf_tests/canvas/repeated-getImageData-gpu.html deleted 100644 → 0
View file @ f7438c7b
<!DOCTYPE html>
<html>
<body>
<script src="../resources/runner.js"></script>
<script>
const canvas2D = document.createElement("canvas");
var ctx2D = canvas2D.getContext("2d", { willReadFrequently: false });
function setSize(width, height) {
canvas2D.width = width;
canvas2D.height = height;
}
function fillCanvas(ctx2d) {
ctx2d.fillStyle = "green";
ctx2d.fillRect(0, 0, ctx2d.canvas.width, ctx2d.canvas.height);
}
function drawAndRepeatedGetImageDataFromCanvas2D() {
fillCanvas(ctx2D);
for (let i = 0; i < 10; ++i)
ctx2D.getImageData(0, 0, canvas2D.width, canvas2D.height);
}
setSize(1024, 1024);
PerfTestRunner.measureRunsPerSecond({
run: drawAndRepeatedGetImageDataFromCanvas2D,
description: "This bench test checks the speed on a draw operation followed" +
" by repeatedly calling getImageData from Canvas2D(1024x1024) if rendered" +
" by GPU."
});
</script>
</body>
</html>
tools/perf/core/test_data/benchmarks_to_shard.json
View file @ 9d8df62a
......@@ -52,11 +52,6 @@
"draw-video-to-hw-accelerated-canvas-2d.html",
"drawimage-not-pixelaligned.html",
"drawimage.html",
"getImageData-cpu.html",
"repeated-draw-cpu.html",
"repeated-draw-gpu.html",
"repeated-getImageData-cpu.html",
"repeated-getImageData-gpu.html",
"toBlob_duration.html",
"toBlob-small-canvas-in-worker.html",
"upload-video-to-sub-texture.html",
......
tools/perf/page_sets/rendering/simple_canvas_cases.py
View file @ 9d8df62a
......@@ -72,9 +72,14 @@ class FillClearRect(SimpleCanvasPage):
URL = 'file://../simple_canvas/fill_clear_rect.html'
class GetImageData(SimpleCanvasPage):
BASE_NAME = 'get_image_data.html'
URL = 'file://../simple_canvas/get_image_data.html'
class GetImageDataOnCPU(SimpleCanvasPage):
BASE_NAME = 'get_image_data_cpu.html'
URL = 'file://../simple_canvas/get_image_data_cpu.html'
class GetImageDataOnGPU(SimpleCanvasPage):
BASE_NAME = 'get_image_data_gpu.html'
URL = 'file://../simple_canvas/get_image_data_gpu.html'
class GpuBoundShader(SimpleCanvasPage):
......
tools/perf/page_sets/simple_canvas/canvas_to_canvas_draw.html
View file @ 9d8df62a
......@@ -10,6 +10,7 @@
// We're more likely to see regressions with large canvases
const size = 1024;
var colourCounter = 0;
const targetCanvas = document.createElement("canvas");
targetCanvas.width = targetCanvas.height = size;
......@@ -20,16 +21,9 @@ const intermediateCanvas = document.createElement("canvas");
intermediateCanvas.width = intermediateCanvas.height = size;
const intermediateCtx = intermediateCanvas.getContext("2d");
function rand(range) {
return Math.floor(Math.random() * range);
}
function randomColor() {
return "rgba(" + rand(256) + "," + rand(256) + "," + rand(256) + "," + rand(256) + ")";
}
function makeAndFillCanvasWithRandomColor(i) {
intermediateCtx.fillStyle = randomColor();
function makeAndFillCanvasWithDifferentColor(i) {
intermediateCtx.fillStyle = "rgba(0, 0, " + colourCounter + ", 1)";
colourCounter = (colourCounter + 1) % 256;
intermediateCtx.fillRect(0, 0, intermediateCanvas.width, intermediateCanvas.height);
targetCtx.drawImage(intermediateCanvas, 0, 0);
......@@ -38,7 +32,7 @@ function makeAndFillCanvasWithRandomColor(i) {
function doRun() {
// Make and fill many canvases
for (let i = 0; i < 50; i++) {
makeAndFillCanvasWithRandomColor(i);
makeAndFillCanvasWithDifferentColor(i);
}
requestAnimationFrame(doRun);
}
......
tools/perf/page_sets/simple_canvas/dynamic_canvas_to_hw_accelerated_canvas.html
View file @ 9d8df62a
......@@ -2,6 +2,8 @@
<html>
<body>
<script>
var colourCounter = 0;
var sourceCanvas2D = document.createElement("canvas");
var sourceCtx2D = sourceCanvas2D.getContext("2d");
var destCanvas2D = document.createElement("canvas");
......@@ -20,12 +22,9 @@ function setSize(sourceWidth, sourceHeight, destWidth, destHeight) {
dummyCanvas2D.height = destHeight;
}
function rand(range) {
return Math.floor(Math.random() * range);
}
function fillCanvas(ctx2d, canvas2d) {
ctx2d.fillStyle = "rgba(" + rand(256) + "," + rand(256) + "," + rand(256) + "," + rand(256) + ")";
ctx2d.fillStyle = "rgba(0, 0, " + colourCounter + ", 1)";
colourCounter = (colourCounter + 1) % 256;
ctx2d.fillRect(0, 0, canvas2d.width, canvas2d.height);
}
......
tools/perf/page_sets/simple_canvas/get_image_data.html → tools/perf/page_sets/simple_canvas/get_image_data_cpu.html
View file @ 9d8df62a
......@@ -3,8 +3,9 @@
<body>
<script>
var colourCounter = 0;
var canvas2D = document.createElement("canvas");
var ctx2D = canvas2D.getContext("2d");
var ctx2D = canvas2D.getContext("2d", { willReadFrequently: true });
document.body.appendChild(canvas2D);
function setSize(width, height) {
......@@ -12,24 +13,21 @@ function setSize(width, height) {
canvas2D.height = height;
}
function rand(range) {
return Math.floor(Math.random() * range);
}
function fillCanvas(ctx2d, canvas2d) {
ctx2d.fillStyle = "rgba(" + rand(256) + "," + rand(256) + "," + rand(256) + "," + rand(256) + ")";
ctx2d.fillStyle = "rgba(0, 0, " + colourCounter + ", 1)";
colourCounter = (colourCounter + 1) % 256;
ctx2d.fillRect(0, 0, canvas2d.width, canvas2d.height);
}
function getImageDataFromCanvas2D() {
function getImageDataOnCPUFromCanvas2D() {
fillCanvas(ctx2D, canvas2D);
ctx2D.getImageData(0, 0, canvas2D.width, canvas2D.height);
requestAnimationFrame(getImageDataFromCanvas2D);
requestAnimationFrame(getImageDataOnCPUFromCanvas2D);
}
window.onload = function() {
setSize(1024, 1024);
getImageDataFromCanvas2D();
getImageDataOnCPUFromCanvas2D();
}
</script>
......
tools/perf/page_sets/simple_canvas/get_image_data_gpu.html 0 → 100644
View file @ 9d8df62a
<!DOCTYPE html>
<html>
<body>
<script>
var colourCounter = 0;
var canvas2D = document.createElement("canvas");
var ctx2D = canvas2D.getContext("2d", { willReadFrequently: false });
document.body.appendChild(canvas2D);
function setSize(width, height) {
canvas2D.width = width;
canvas2D.height = height;
}
function fillCanvas(ctx2d, canvas2d) {
ctx2d.fillStyle = "rgba(0, 0, " + colourCounter + ", 1)";
colourCounter = (colourCounter + 1) % 256;
ctx2d.fillRect(0, 0, canvas2d.width, canvas2d.height);
}
function getImageDataOnGPUFromCanvas2D() {
fillCanvas(ctx2D, canvas2D);
ctx2D.getImageData(0, 0, canvas2D.width, canvas2D.height);
requestAnimationFrame(getImageDataOnGPUFromCanvas2D);
}
window.onload = function() {
setSize(1024, 1024);
getImageDataOnGPUFromCanvas2D();
}
</script>
</body>
</html>
tools/perf/page_sets/simple_canvas/hw_accelerated_canvas_to_sw_canvas.html
View file @ 9d8df62a
......@@ -2,6 +2,8 @@
<html>
<body>
<script>
var colourCounter = 0;
var sourceCanvas2D = document.createElement("canvas");
var sourceCtx2D = sourceCanvas2D.getContext("2d");
var destCanvas2D = document.createElement("canvas");
......@@ -20,12 +22,9 @@ function setSize(sourceWidth, sourceHeight, destWidth, destHeight) {
dummyCanvas2D.height = destHeight;
}
function rand(range) {
return Math.floor(Math.random() * range);
}
function fillCanvas(ctx2d, canvas2d) {
ctx2d.fillStyle = "rgba(" + rand(255) + "," + rand(255) + "," + rand(255) + "," + rand(255) + ")";
ctx2d.fillStyle = "rgba(0, 0, " + colourCounter + ", 1)";
colourCounter = (colourCounter + 1) % 256;
ctx2d.fillRect(0, 0, canvas2d.width, canvas2d.height);
}
......
tools/perf/page_sets/simple_canvas/put_and_create_imageBitmap_from_imageData.html
View file @ 9d8df62a
......@@ -12,7 +12,7 @@ var image = context.createImageData(imgWidth, imgHeight);
document.body.appendChild(canvas);
function rand(range) {
return Math.floor(Math.random() * range);
return Math.floor(Math.random() * range);
}
function initializeImageData() {
......@@ -37,7 +37,6 @@ function doRun() {
}
window.onload = function () {
initializeImageData();
doRun();
}
......
tools/perf/page_sets/simple_canvas/put_image_data.html
View file @ 9d8df62a
......@@ -9,7 +9,7 @@ var imageData = new ImageData(canvas2D.width, canvas2D.height);
document.body.appendChild(canvas2D);
function rand(range) {
return Math.floor(Math.random() * range);
return Math.floor(Math.random() * range);
}
function initializeImageData() {
......
tools/perf/page_sets/simple_canvas/static_canvas_to_hw_accelerated_canvas.html
View file @ 9d8df62a
......@@ -2,6 +2,8 @@
<html>
<body>
<script>
var colourCounter = 0;
var sourceCanvas2D = document.createElement("canvas");
var sourceCtx2D = sourceCanvas2D.getContext("2d");
var destCanvas2D = document.createElement("canvas");
......@@ -20,12 +22,9 @@ function setSize(sourceWidth, sourceHeight, destWidth, destHeight) {
dummyCanvas2D.height = destHeight;
}
function rand(range) {
return Math.floor(Math.random() * range);
}
function fillCanvas(ctx2d, canvas2d) {
ctx2d.fillStyle = "rgba(" + rand(255) + "," + rand(255) + "," + rand(255) + "," + rand(255) + ")";
ctx2d.fillStyle = "rgba(0, 0, " + colourCounter + ", 1)";
colourCounter = (colourCounter + 1) % 256;
ctx2d.fillRect(0, 0, canvas2d.width, canvas2d.height);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment