| <!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> |