2020-07-29 15:01:55 +00:00
|
|
|
<!-- This benchmark run a lot of small benchmarks that are defined with a karma-like sytax
|
|
|
|
|
in canvas_perf.js
|
|
|
|
|
-->
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>CanvasKit SKP Perf</title>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<script src="/static/canvaskit.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<script src="/static/benchmark.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<script src="/static/canvas_perf.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<style type="text/css" media="screen">
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<main>
|
|
|
|
|
<button id="start_bench">Start Benchmark</button>
|
|
|
|
|
<br>
|
|
|
|
|
<canvas id=anim width=600 height=600 style="height: 600px; width: 600px;"></canvas>
|
|
|
|
|
</main>
|
|
|
|
|
<script type="text/javascript" charset="utf-8">
|
|
|
|
|
const WIDTH = 600;
|
|
|
|
|
const HEIGHT = 600;
|
|
|
|
|
const WARM_UP_FRAMES = 5;
|
|
|
|
|
// Keeping this a little lower because this test runs many smaller tests,
|
|
|
|
|
// each for this many frames, which could add up to a long time.
|
|
|
|
|
const MAX_FRAMES = 51;
|
|
|
|
|
|
2020-08-06 19:27:47 +00:00
|
|
|
// Any external files needed by tests in canvas_perf.js must be listed here.
|
|
|
|
|
// And checked in under canvas_perf_assets/
|
|
|
|
|
// tests may then fetch them from ctx.files['filename']
|
|
|
|
|
const testDataFiles = [
|
|
|
|
|
'test_64x64.png',
|
|
|
|
|
'test_512x512.png',
|
|
|
|
|
'test_1500x959.jpg',
|
2020-08-10 14:49:02 +00:00
|
|
|
'Roboto-Regular.ttf',
|
2021-06-21 19:19:58 +00:00
|
|
|
'Roboto-Regular.woff',
|
|
|
|
|
'Roboto-Regular.woff2',
|
2020-08-06 19:27:47 +00:00
|
|
|
];
|
|
|
|
|
|
2020-07-29 15:01:55 +00:00
|
|
|
(function() {
|
2020-08-06 19:27:47 +00:00
|
|
|
const filePromises = [];
|
|
|
|
|
for (const filename of testDataFiles) {
|
|
|
|
|
filePromises.push(fetch('/static/assets/'+filename).then((resp) => {
|
|
|
|
|
return resp.arrayBuffer(); // this is also a promise.
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
const externals = Promise.all(filePromises).then((results) => {
|
|
|
|
|
const files = {};
|
|
|
|
|
let i=0;
|
|
|
|
|
for (const bytes of results) {
|
|
|
|
|
// store them by name
|
|
|
|
|
files[testDataFiles[i]] = bytes;
|
|
|
|
|
i++;
|
|
|
|
|
}
|
|
|
|
|
return files;
|
|
|
|
|
});
|
2020-07-29 15:01:55 +00:00
|
|
|
|
|
|
|
|
const loadCanvasKit = CanvasKitInit({
|
|
|
|
|
locateFile: (file) => '/static/' + file,
|
|
|
|
|
});
|
|
|
|
|
|
2020-08-06 19:27:47 +00:00
|
|
|
Promise.all([loadCanvasKit, externals]).then(([CanvasKit, externalFiles]) => {
|
2020-07-29 15:01:55 +00:00
|
|
|
const urlSearchParams = new URLSearchParams(window.location.search);
|
|
|
|
|
let glversion = 2;
|
|
|
|
|
if (urlSearchParams.has('webgl1')) {
|
|
|
|
|
glversion = 1;
|
|
|
|
|
}
|
2020-08-10 14:49:02 +00:00
|
|
|
let surface = getSurface(CanvasKit, glversion);
|
2020-07-29 15:01:55 +00:00
|
|
|
if (!surface) {
|
|
|
|
|
console.error('Could not make surface', window._error);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
document.getElementById('start_bench').addEventListener('click', async () => {
|
|
|
|
|
window._perfData = {};
|
|
|
|
|
|
2020-09-03 12:31:52 +00:00
|
|
|
// canvas_perf.js should have defined an array called tests whose objects have:
|
2020-07-29 15:01:55 +00:00
|
|
|
// setup: A function called once before testing begins, it is expected to make its
|
|
|
|
|
// own canvas and put it in ctx.
|
|
|
|
|
// test: A function called to draw one frame
|
|
|
|
|
// teardown: A function called after testing finishes
|
|
|
|
|
// description: A human readable description
|
|
|
|
|
// perfkey: A key used to save the results in perf.skia.org.
|
2020-09-03 12:31:52 +00:00
|
|
|
//
|
|
|
|
|
// For quick local bench testing, there is also an array called onlytests. This way
|
|
|
|
|
// a developer can replace tests.push with onlytests.push to just run one or two
|
|
|
|
|
// performance benchmarks they care about.
|
|
|
|
|
let testsToRun = tests;
|
|
|
|
|
if (onlytests.length) {
|
|
|
|
|
testsToRun = onlytests;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (const t of testsToRun) {
|
2020-07-29 15:01:55 +00:00
|
|
|
let ctx = {
|
|
|
|
|
'surface': surface,
|
2020-08-06 19:27:47 +00:00
|
|
|
'files': externalFiles,
|
2020-07-29 15:01:55 +00:00
|
|
|
};
|
|
|
|
|
console.log('Benchmarking "' + t.description + '"');
|
|
|
|
|
t.setup(CanvasKit, ctx);
|
|
|
|
|
function draw() {
|
|
|
|
|
t.test(CanvasKit, ctx);
|
|
|
|
|
}
|
|
|
|
|
// TODO(nifong): is it ok to keep re-using the surface?
|
|
|
|
|
results = await startTimingFrames(draw, surface, WARM_UP_FRAMES, MAX_FRAMES);
|
|
|
|
|
t.teardown(CanvasKit, ctx);
|
|
|
|
|
window._perfData[t.perfKey] = results;
|
|
|
|
|
|
2020-08-10 14:49:02 +00:00
|
|
|
// Delete and re-create surface between tests, to prevent the possibility of
|
|
|
|
|
// interference between them through the state of surface, the gl context, or things
|
|
|
|
|
// that are keyed by the surface's gen id.
|
|
|
|
|
surface.delete();
|
|
|
|
|
surface = getSurface(CanvasKit, glversion);
|
|
|
|
|
|
|
|
|
|
// TODO(nifong): provide a function similar to startTimingFrames for timing
|
|
|
|
|
// non-visual tests.
|
2020-07-29 15:01:55 +00:00
|
|
|
}
|
|
|
|
|
surface.delete();
|
|
|
|
|
window._perfDone = true;
|
|
|
|
|
});
|
|
|
|
|
console.log('Perf is ready');
|
|
|
|
|
window._perfReady = true;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
)();
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
