tools/skottie-wasm-perf/skottie-wasm-perf.html - skia - Git at Google

 <!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">
     (function() {
       const PATH = '/res/lottie.json';

       let lottieJSON = null;
       let CK = null;

      CanvasKitInit({
         locateFile: (file) => '/res/'+file,
     }).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 = 5;

   function Bench(CK, json) {
     if (!CK || !json) {
       return;
     }

     const animation = CK.MakeManagedAnimation(json, null);
     if (!animation) {
       window._error = 'Could not process JSON';
       return
     }

     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;
       }
     }
     const canvas = surface.getCanvas();

     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>
	<!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">
	(function() {
	const PATH = '/res/lottie.json';

	let lottieJSON = null;
	let CK = null;

	CanvasKitInit({
	locateFile: (file) => '/res/'+file,
	}).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 = 5;

	function Bench(CK, json) {
	if (!CK \|\| !json) {
	return;
	}

	const animation = CK.MakeManagedAnimation(json, null);
	if (!animation) {
	window._error = 'Could not process JSON';
	return
	}

	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;
	}
	}
	const canvas = surface.getCanvas();

	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>