2019-06-14 17:51:09 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2020-06-19 15:11:03 +00:00
|
|
|
<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>
|
2019-06-14 17:51:09 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<main>
|
2019-06-24 18:47:25 +00:00
|
|
|
<canvas id=anim width=1000 height=1000 style="height: 1000px; width: 1000px;"></canvas>
|
2019-06-14 17:51:09 +00:00
|
|
|
</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,
|
2020-05-21 14:51:35 +00:00
|
|
|
}).then((CanvasKit) => {
|
2019-06-14 17:51:09 +00:00
|
|
|
CK = CanvasKit;
|
|
|
|
|
Bench(CK, lottieJSON);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
fetch(PATH).then((resp) => {
|
|
|
|
|
resp.text().then((json) => {
|
|
|
|
|
lottieJSON = json;
|
|
|
|
|
Bench(CK, lottieJSON);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
})();
|
|
|
|
|
|
2019-07-11 17:48:41 +00:00
|
|
|
const maxFrames = 25;
|
2019-08-15 13:11:30 +00:00
|
|
|
const maxLoops = 5;
|
2019-06-14 17:51:09 +00:00
|
|
|
|
|
|
|
|
function Bench(CK, json) {
|
|
|
|
|
if (!CK || !json) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const animation = CK.MakeManagedAnimation(json, null);
|
|
|
|
|
if (!animation) {
|
2019-12-03 17:56:40 +00:00
|
|
|
window._error = 'Could not process JSON';
|
2019-06-14 17:51:09 +00:00
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
2019-12-03 17:56:40 +00:00
|
|
|
let surface = null;
|
|
|
|
|
if (window.location.hash.indexOf('gpu') !== -1) {
|
|
|
|
|
surface = CK.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 = CK.MakeSWCanvasSurface('anim');
|
|
|
|
|
if (!surface) {
|
|
|
|
|
window._error = 'Could not make CPU surface';
|
|
|
|
|
return;
|
|
|
|
|
}
|
2019-06-14 17:51:09 +00:00
|
|
|
}
|
|
|
|
|
const canvas = surface.getCanvas();
|
|
|
|
|
|
2019-07-11 17:48:41 +00:00
|
|
|
const t_rate = 1.0 / (maxFrames-1);
|
2019-06-14 17:51:09 +00:00
|
|
|
let seek = 0;
|
|
|
|
|
let frame = 0;
|
2019-07-11 17:48:41 +00:00
|
|
|
let loop = 0;
|
2019-06-14 17:51:09 +00:00
|
|
|
const drawFrame = () => {
|
2019-07-11 17:48:41 +00:00
|
|
|
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;
|
2019-06-14 17:51:09 +00:00
|
|
|
}
|
2019-06-24 18:47:25 +00:00
|
|
|
|
2019-07-22 18:56:39 +00:00
|
|
|
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();
|
|
|
|
|
}
|
2019-12-03 17:56:40 +00:00
|
|
|
console.log(`Used seek: ${seek}`);
|
2019-06-14 17:51:09 +00:00
|
|
|
seek += t_rate;
|
|
|
|
|
frame++;
|
|
|
|
|
window.requestAnimationFrame(drawFrame);
|
|
|
|
|
};
|
|
|
|
|
window.requestAnimationFrame(drawFrame);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
