2020-06-10 19:10:16 +00:00
|
|
|
<!-- This benchmark aims to accurately measure the time it takes for CanvasKit to render
|
|
|
|
|
an SKP from our test corpus. It is very careful to measure the time between frames. This form
|
|
|
|
|
of measurement makes sure we are capturing the GPU draw time. CanvasKit.flush() returns after
|
|
|
|
|
it has sent all the instructions to the GPU, but we don't know the GPU is done until the next
|
|
|
|
|
frame is requested. Thus, we need to keep track of the time between frames in order to
|
|
|
|
|
accurately calculate draw time. Keeping track of the drawPicture and drawPicture+flush is still
|
|
|
|
|
useful for telling us how much time we are spending in WASM land and if our drawing is CPU
|
|
|
|
|
bound or GPU bound. If total_frame_ms is close to with_flush_ms, we are CPU bound; if
|
|
|
|
|
total_frame_ms >> with_flush_ms, we are GPU bound.
|
|
|
|
|
-->
|
|
|
|
|
<!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>
|
2020-07-07 21:13:31 +00:00
|
|
|
<script src="/static/benchmark.js" type="text/javascript" charset="utf-8"></script>
|
2020-06-10 19:10:16 +00:00
|
|
|
<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=1000 height=1000 style="height: 1000px; width: 1000px;"></canvas>
|
|
|
|
|
</main>
|
|
|
|
|
<script type="text/javascript" charset="utf-8">
|
|
|
|
|
const WIDTH = 1000;
|
|
|
|
|
const HEIGHT = 1000;
|
|
|
|
|
const WARM_UP_FRAMES = 10;
|
|
|
|
|
const MAX_FRAMES = 201; // This should be sufficient to have low noise.
|
|
|
|
|
const SKP_PATH = '/static/test.skp';
|
2020-07-07 21:13:31 +00:00
|
|
|
|
2020-06-10 19:10:16 +00:00
|
|
|
(function() {
|
|
|
|
|
|
|
|
|
|
const loadKit = CanvasKitInit({
|
|
|
|
|
locateFile: (file) => '/static/' + file,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const loadSKP = fetch(SKP_PATH).then((resp) => {
|
|
|
|
|
return resp.arrayBuffer();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
Promise.all([loadKit, loadSKP]).then((values) => {
|
|
|
|
|
const [CanvasKit, skpBytes] = values;
|
|
|
|
|
const loadStart = performance.now();
|
|
|
|
|
const skp = CanvasKit.MakeSkPicture(skpBytes);
|
|
|
|
|
const loadTime = performance.now() - loadStart;
|
2020-07-07 21:13:31 +00:00
|
|
|
window._perfData = {
|
|
|
|
|
skp_load_ms: loadTime,
|
|
|
|
|
};
|
2020-06-10 19:10:16 +00:00
|
|
|
console.log('loaded skp', skp, loadTime);
|
|
|
|
|
if (!skp) {
|
|
|
|
|
window._error = 'could not read skp';
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2020-07-17 19:20:44 +00:00
|
|
|
const urlSearchParams = new URLSearchParams(window.location.search);
|
|
|
|
|
let glversion = 2;
|
|
|
|
|
if (urlSearchParams.has('webgl1')) {
|
|
|
|
|
glversion = 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const surface = getSurface(CanvasKit, glversion);
|
2020-06-10 19:10:16 +00:00
|
|
|
if (!surface) {
|
|
|
|
|
console.error('Could not make surface', window._error);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const canvas = surface.getCanvas();
|
|
|
|
|
|
|
|
|
|
document.getElementById('start_bench').addEventListener('click', () => {
|
|
|
|
|
const clearColor = CanvasKit.WHITE;
|
|
|
|
|
|
2020-07-07 21:13:31 +00:00
|
|
|
function draw() {
|
2020-06-10 19:10:16 +00:00
|
|
|
canvas.clear(clearColor);
|
|
|
|
|
canvas.drawPicture(skp);
|
|
|
|
|
}
|
2020-07-07 21:13:31 +00:00
|
|
|
|
|
|
|
|
startTimingFrames(draw, surface, WARM_UP_FRAMES, MAX_FRAMES);
|
2020-06-10 19:10:16 +00:00
|
|
|
});
|
|
|
|
|
console.log('Perf is ready');
|
|
|
|
|
window._perfReady = true;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
)();
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
