blob: b160926e5ae3d1ebb67365db4572323d95720bd2 [file] [log] [blame]
<!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>