5f11dd74ce
Change-Id: I7ce4d869565d57756b17587fcb612ccbfdbea9e2 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/220747 Reviewed-by: Ravi Mistry <rmistry@google.com> Reviewed-by: Joe Gregorio <jcgregorio@google.com>
124 lines
3.0 KiB
HTML
124 lines
3.0 KiB
HTML
<!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,
|
|
main,
|
|
#anim {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
width: 1000px;
|
|
height: 1000px;
|
|
flex-flow: row wrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<!-- This height and width was arbitrarily chosen -->
|
|
<canvas id=anim width=300 height=300></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);
|
|
});
|
|
});
|
|
})();
|
|
|
|
// Without flushing, nothing will show up on the screen, although
|
|
// everything else has been executed.
|
|
const shouldFlush = false;
|
|
|
|
const frames = 25;
|
|
const width = 300;
|
|
const height = 300;
|
|
|
|
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');
|
|
|
|
console.log("start")
|
|
const t_rate = 1.0 / (frames- 1);
|
|
let time = 0;
|
|
let max = -1;
|
|
let min = 1000000000;
|
|
let seek = 0;
|
|
let frame = 0;
|
|
const drawFrame = () => {
|
|
if (frame >= frames) {
|
|
console.log("On average, took "+ (time/frames) +" ms" );
|
|
// These are global variables to talk with puppeteer.
|
|
window._avgFrameTimeMs = time/frames;
|
|
window._minFrameTimeMs = min;
|
|
window._maxFrameTimeMs = max;
|
|
window._skottieDone = true;
|
|
return;
|
|
}
|
|
let start = Date.now();
|
|
animation.seek(seek);
|
|
animation.render(canvas);
|
|
if (shouldFlush) {
|
|
surface.flush();
|
|
}
|
|
const t = Date.now() - start;
|
|
|
|
time += t;
|
|
if (t < min) {
|
|
min = t;
|
|
}
|
|
if (t > max) {
|
|
max = t;
|
|
}
|
|
seek += t_rate;
|
|
frame++;
|
|
window.requestAnimationFrame(drawFrame);
|
|
};
|
|
window.requestAnimationFrame(drawFrame);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|