f8823b5726
This is a reland of bdc214a50e
The CPU version of SkottieWasm is timing out for reasons unknown,
but the GPU version is happy. I think we can get rid of the CPU
version of the job since it has been more or less superseded by
the SkottieFrames one (and the latter is more stable).
Original change's description:
> [canvaskit] Change SkRects to be arrays, not objects.
>
> This changes several APIs, so there are lots of breaking
> notes in the Changelog.
>
> This made the "draw 100 colored regions" benchmark about
> 20% faster (1ms -> .8ms).
>
> In theory, rendering should stay the same.
>
> Change-Id: Ib80b15e2d980ad5d568fff4460d2b529766c1b36
> Reviewed-on: https://skia-review.googlesource.com/c/skia/+/312491
> Reviewed-by: Nathaniel Nifong <nifong@google.com>
Change-Id: I674aba85ecfb30b72e94cbaf89b2d97bfae3b7a4
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/315142
Reviewed-by: Nathaniel Nifong <nifong@google.com>
111 lines
3.4 KiB
HTML
111 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Skottie-WASM Perf</title>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="res/canvaskit.js" type="text/javascript" charset="utf-8"></script>
|
|
<style type="text/css" media="screen">
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<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 LOTTIE_JSON_PATH = '/res/lottie.json';
|
|
const MAX_FRAMES = 25;
|
|
const MAX_LOOPS = 25;
|
|
const MAX_SAMPLE_MS = 60*1000; // in case something takes a while, stop after 60 seconds.
|
|
(function() {
|
|
const loadKit = CanvasKitInit({
|
|
locateFile: (file) => '/res/' + file,
|
|
});
|
|
|
|
const loadLottie = fetch(LOTTIE_JSON_PATH).then((resp) => {
|
|
return resp.text();
|
|
});
|
|
|
|
Promise.all([loadKit, loadLottie]).then((values) => {
|
|
const [CanvasKit, json] = values;
|
|
|
|
const animation = CanvasKit.MakeManagedAnimation(json, null);
|
|
if (!animation) {
|
|
window._error = 'Could not process JSON';
|
|
return
|
|
}
|
|
|
|
let surface = null;
|
|
if (window.location.hash.indexOf('gpu') !== -1) {
|
|
surface = CanvasKit.MakeWebGLCanvasSurface('anim');
|
|
if (!surface) {
|
|
window._error = 'Could not make GPU surface';
|
|
return;
|
|
}
|
|
let c = document.getElementById('anim');
|
|
// If CanvasKit was unable to instantiate a WebGL context, it will fallback
|
|
// to CPU and add a ck-replaced class to the canvas element.
|
|
if (c.classList.contains('ck-replaced')) {
|
|
window._error = 'fell back to CPU';
|
|
return;
|
|
}
|
|
} else {
|
|
surface = CanvasKit.MakeSWCanvasSurface('anim');
|
|
if (!surface) {
|
|
window._error = 'Could not make CPU surface';
|
|
return;
|
|
}
|
|
}
|
|
const canvas = surface.getCanvas();
|
|
|
|
const t_rate = 1.0 / (MAX_FRAMES-1);
|
|
let seek = 0;
|
|
let frame = 0;
|
|
let loop = 0;
|
|
const damageRect = Float32Array.of(0, 0, 0, 0);
|
|
const bounds = CanvasKit.LTRBRect(0, 0, WIDTH, HEIGHT);
|
|
const start = performance.now();
|
|
|
|
const drawFrame = () => {
|
|
if ((performance.now() - start) > MAX_SAMPLE_MS) {
|
|
// This global variable signals we are done.
|
|
window._skottieDone = true;
|
|
return;
|
|
}
|
|
if (frame >= MAX_FRAMES) {
|
|
// Reached the end of one loop.
|
|
loop++;
|
|
if (loop == MAX_LOOPS) {
|
|
// This global variable signals we are done.
|
|
window._skottieDone = true;
|
|
return;
|
|
}
|
|
// Reset frame and seek to restart the loop.
|
|
frame = 0;
|
|
seek = 0;
|
|
}
|
|
|
|
let damage = animation.seek(seek, damageRect);
|
|
if (damage[2] > damage[0] && damage[3] > damage[1]) {
|
|
animation.render(canvas, bounds);
|
|
surface.flush();
|
|
}
|
|
console.log(`Used seek: ${seek}`);
|
|
seek += t_rate;
|
|
frame++;
|
|
window.requestAnimationFrame(drawFrame);
|
|
};
|
|
window.requestAnimationFrame(drawFrame);
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|