blob: 2d53a7388f68c1f06f4115900f1c1b0a004ce0d5 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<title>Skottie-WASM Perf</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=egde,chrome=1">
<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">
(function() {
const PATH = '/res/lottie.json';
let lottieJSON = null;
let CK = null;
CanvasKitInit({
locateFile: (file) => '/res/'+file,
}).ready().then((CanvasKit) => {
CK = CanvasKit;
Bench(CK, lottieJSON);
});
fetch(PATH).then((resp) => {
resp.text().then((json) => {
lottieJSON = json;
Bench(CK, lottieJSON);
});
});
})();
const maxFrames = 25;
const maxLoops = 5;
function Bench(CK, json) {
if (!CK || !json) {
return;
}
const animation = CK.MakeManagedAnimation(json, null);
if (!animation) {
console.error('Could not process JSON');
return
}
const surface = CK.MakeCanvasSurface("anim");
if (!surface) {
console.error('Could not make surface');
return;
}
const canvas = surface.getCanvas();
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.
window._gpu = CK.gpu && !c.classList.contains('ck-replaced');
const t_rate = 1.0 / (maxFrames-1);
let seek = 0;
let frame = 0;
let loop = 0;
const drawFrame = () => {
if (frame >= maxFrames) {
// Reached the end of one loop.
loop++;
if (loop == maxLoops) {
// These are global variables to talk with puppeteer.
window._skottieDone = true;
return;
}
// Reset frame and seek to restart the loop.
frame = 0;
seek = 0;
}
let damage = animation.seek(seek);
if (damage.fRight > damage.fLeft && damage.fBottom > damage.fTop) {
animation.render(canvas, {
fLeft: 0,
fTop: 0,
fRight: 1000,
fBottom: 1000
});
surface.flush();
}
console.log("Used seek: " + seek);
seek += t_rate;
frame++;
window.requestAnimationFrame(drawFrame);
};
window.requestAnimationFrame(drawFrame);
}
</script>
</body>
</html>