1<!DOCTYPE html> 2<html> 3<head> 4 <title>Skottie-WASM Perf</title> 5 <meta charset="utf-8" /> 6 <meta http-equiv="X-UA-Compatible" content="IE=egde,chrome=1"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <script src="res/canvaskit.js" type="text/javascript" charset="utf-8"></script> 9 <style type="text/css" media="screen"> 10 body { 11 margin: 0; 12 padding: 0; 13 } 14 </style> 15</head> 16<body> 17 <main> 18 <canvas id=anim width=1000 height=1000 style="height: 1000px; width: 1000px;"></canvas> 19 </main> 20 <script type="text/javascript" charset="utf-8"> 21 (function() { 22 const PATH = '/res/lottie.json'; 23 24 let lottieJSON = null; 25 let CK = null; 26 27 CanvasKitInit({ 28 locateFile: (file) => '/res/'+file, 29 }).ready().then((CanvasKit) => { 30 CK = CanvasKit; 31 Bench(CK, lottieJSON); 32 }); 33 34 fetch(PATH).then((resp) => { 35 resp.text().then((json) => { 36 lottieJSON = json; 37 Bench(CK, lottieJSON); 38 }); 39 }); 40 })(); 41 42 const maxFrames = 25; 43 const maxLoops = 5; 44 45 function Bench(CK, json) { 46 if (!CK || !json) { 47 return; 48 } 49 50 const animation = CK.MakeManagedAnimation(json, null); 51 if (!animation) { 52 console.error('Could not process JSON'); 53 return 54 } 55 56 const surface = CK.MakeCanvasSurface("anim"); 57 if (!surface) { 58 console.error('Could not make surface'); 59 return; 60 } 61 const canvas = surface.getCanvas(); 62 63 let c = document.getElementById('anim'); 64 // If CanvasKit was unable to instantiate a WebGL context, it will fallback 65 // to CPU and add a ck-replaced class to the canvas element. 66 window._gpu = CK.gpu && !c.classList.contains('ck-replaced'); 67 68 const t_rate = 1.0 / (maxFrames-1); 69 let seek = 0; 70 let frame = 0; 71 let loop = 0; 72 const drawFrame = () => { 73 if (frame >= maxFrames) { 74 // Reached the end of one loop. 75 loop++; 76 if (loop == maxLoops) { 77 // These are global variables to talk with puppeteer. 78 window._skottieDone = true; 79 return; 80 } 81 // Reset frame and seek to restart the loop. 82 frame = 0; 83 seek = 0; 84 } 85 86 let damage = animation.seek(seek); 87 if (damage.fRight > damage.fLeft && damage.fBottom > damage.fTop) { 88 animation.render(canvas, { 89 fLeft: 0, 90 fTop: 0, 91 fRight: 1000, 92 fBottom: 1000 93 }); 94 surface.flush(); 95 } 96 console.log("Used seek: " + seek); 97 seek += t_rate; 98 frame++; 99 window.requestAnimationFrame(drawFrame); 100 }; 101 window.requestAnimationFrame(drawFrame); 102 } 103 </script> 104</body> 105</html> 106