Skip to content

GitLab

T
tangled
Commit 96d7cc75 authored by Teresa Kang's avatar Teresa Kang Committed by Commit Bot
Browse files
Options

Add Particle Simulation benchmark test 

To better showcase the impact of willReadFrequently, a benchmark test
that simulates a real world use case of frequent reads from getImageData
is added.

Bug: 1090180
Change-Id: Ibee406e65698f4c5e23c53caf72853f037102721
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2285513Reviewed-by: default avatarAaron Krajeski <aaronhk@chromium.org>
Reviewed-by: default avatarFernando Serboncini <fserb@chromium.org>
Reviewed-by: default avatarJohn Chen <johnchen@chromium.org>
Reviewed-by: default avatarYi Xu <yiyix@chromium.org>
Reviewed-by: default avatarJuanmi Huertas <juanmihd@chromium.org>
Commit-Queue: Teresa Kang <teresakang@google.com>
Cr-Commit-Position: refs/heads/master@{#792805}
parent 6b89e322
Hide whitespace changes
Inline Side-by-side
Showing with 150 additions and 0 deletions
tools/perf/page_sets/rendering/simple_canvas_cases.py
View file @ 96d7cc75
......@@ -67,6 +67,16 @@ class DynamicWebglToHWAcceleratedCanvas(SimpleCanvasPage):
URL = 'file://../simple_canvas/dynamic_webgl_to_hw_accelerated_canvas.html'
class FallingParticleSimulationOnCPU(SimpleCanvasPage):
BASE_NAME = 'falling_particle_simulation_cpu.html'
URL = 'file://../simple_canvas/falling_particle_simulation_cpu.html'
class FallingParticleSimulationOnGPU(SimpleCanvasPage):
BASE_NAME = 'falling_particle_simulation_gpu.html'
URL = 'file://../simple_canvas/falling_particle_simulation_gpu.html'
class FillClearRect(SimpleCanvasPage):
BASE_NAME = 'fill_clear_rect.html'
URL = 'file://../simple_canvas/fill_clear_rect.html'
......
tools/perf/page_sets/simple_canvas/falling_particle_simulation_cpu.html 0 → 100644
View file @ 96d7cc75
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<script>
const sideLength = 10;
const numPixelsPerParticle = sideLength * sideLength;
// An unpainted particle has 10 x 10 pixels with rbga(0,0,0,0)
const unpaintedParticle = new Uint8ClampedArray(numPixelsPerParticle * 4);
var particles = [];
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d", {willReadFrequently: true});
document.body.appendChild(canvas);
canvas.width = 1024;
canvas.height = 1024;
function fallingParticleSimulationInCPU() {
draw();
for (var i = 0; i < 5; i++) {
particles.push({ x: Math.random() * canvas.width, y: 0 });
}
requestAnimationFrame(fallingParticleSimulationInCPU);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "white";
for (const particle of particles) {
// Check the pixels of the size of a particle below the current one,
// move the particle down if the pixels are unpainted,
// ie. all pixels have rgba(0,0,0,0).
if (particle.y < canvas.height - sideLength) {
var particleBelow = ctx.getImageData(
particle.x, particle.y + sideLength, sideLength, sideLength).data;
if (compareImageData(particleBelow, unpaintedParticle)) {
particle.y += sideLength;
}
} else {
particle.y = canvas.height - sideLength;
}
ctx.fillRect(particle.x, particle.y, sideLength, sideLength);
}
}
function compareImageData(imgData1, imgData2) {
if (imgData1.length != imgData2.length) return false;
for (var i = 0; i < imgData1.length; i++) {
if (imgData1[i] != imgData2[i]) {
return false;
}
}
return true;
}
window.onload = function () {
fallingParticleSimulationInCPU();
}
</script>
</body>
</html>
tools/perf/page_sets/simple_canvas/falling_particle_simulation_gpu.html 0 → 100644
View file @ 96d7cc75
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<script>
const sideLength = 10;
const numPixelsPerParticle = sideLength * sideLength;
// An unpainted particle has 10 x 10 pixels with rbga(0,0,0,0)
const unpaintedParticle = new Uint8ClampedArray(numPixelsPerParticle * 4);
var particles = [];
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d", {willReadFrequently: false});
document.body.appendChild(canvas);
canvas.width = 1024;
canvas.height = 1024;
function fallingParticleSimulationInGPU() {
draw();
for (var i = 0; i < 5; i++) {
particles.push({ x: Math.random() * canvas.width, y: 0 });
}
requestAnimationFrame(fallingParticleSimulationInGPU);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "white";
for (const particle of particles) {
// Check the pixels of the size of a particle below the current one,
// move the particle down if the pixels are unpainted,
// ie. all pixels have rgba(0,0,0,0).
if (particle.y < canvas.height - sideLength) {
var particleBelow = ctx.getImageData(
particle.x, particle.y + sideLength, sideLength, sideLength).data;
if (compareImageData(particleBelow, unpaintedParticle)) {
particle.y += sideLength;
}
} else {
particle.y = canvas.height - sideLength;
}
ctx.fillRect(particle.x, particle.y, sideLength, sideLength);
}
}
function compareImageData(imgData1, imgData2) {
if (imgData1.length != imgData2.length) return false;
for (var i = 0; i < imgData1.length; i++) {
if (imgData1[i] != imgData2[i]) {
return false;
}
}
return true;
}
window.onload = function () {
fallingParticleSimulationInGPU();
}
</script>
</body>
</html>
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