123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- <!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 = 3;
- 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>
|