tools/perf-canvaskit-puppeteer/skottie-frames.html - skia - Git at Google

 <!-- This benchmark aims to accurately measure the time it takes for Skottie to load the JSON and
 turn it into an animation, as well as the times for the first hundred frames (and, as a subcomponent
 of that, the seek times of the first hundred frames). This is set to mimic how a real-world user
 would display the animation (e.g. using clock time to determine where to seek, not frame numbers).
 -->
 <!DOCTYPE html>
 <html>
 <head>
   <title>Skottie-WASM Perf</title>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="/static/canvaskit.js" type="text/javascript" charset="utf-8"></script>
   <script src="/static/benchmark.js" type="text/javascript" charset="utf-8"></script>
   <style type="text/css" media="screen">
     body {
       margin: 0;
       padding: 0;
     }
   </style>
 </head>
 <body>
   <main>
     <button id="start_bench">Start Benchmark</button>
     <br>
     <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 WARM_UP_FRAMES = 0; // No warmup, so that the jank of initial frames gets measured.
     // We sample MAX_FRAMES or until MAX_SAMPLE_SECONDS has elapsed.
     const MAX_FRAMES = 600; // ~10s at 60fps
     const MAX_SAMPLE_MS = 50 * 1000; // in case something takes a while, stop after 50 seconds.
     const LOTTIE_JSON_PATH = '/static/lottie.json';
     const ASSETS_PATH = '/static/assets/';
     (function() {

       const loadKit = CanvasKitInit({
         locateFile: (file) => '/static/' + file,
       });

       const loadLottie = fetch(LOTTIE_JSON_PATH).then((resp) => {
         return resp.text();
       });

       const loadFontsAndAssets = loadLottie.then((jsonStr) => {
         const lottie = JSON.parse(jsonStr);
         const promises = [];
         promises.push(...loadFonts(lottie.fonts));
         promises.push(...loadAssets(lottie.assets));
         return Promise.all(promises);
       });

       Promise.all([loadKit, loadLottie, loadFontsAndAssets]).then((values) => {
         const [CanvasKit, json, externalAssets] = values;
         console.log(externalAssets);
         const assets = {};
         for (const asset of externalAssets) {
           if (asset) {
             assets[asset.name] = asset.bytes;
           }
         }
         const loadStart = performance.now();
         const animation = CanvasKit.MakeManagedAnimation(json, assets);
         const loadTime = performance.now() - loadStart;

         window._perfData = {
           json_load_ms: loadTime,
         };

         const duration = animation.duration() * 1000;
         const bounds = CanvasKit.LTRBRect(0, 0, WIDTH, HEIGHT);

         const urlSearchParams = new URLSearchParams(window.location.search);
         let glversion = 2;
         if (urlSearchParams.has('webgl1')) {
           glversion = 1;
         }

         const surface = getSurface(CanvasKit, glversion);
         if (!surface) {
           console.error('Could not make surface', window._error);
           return;
         }
         const canvas = surface.getCanvas();

         document.getElementById('start_bench').addEventListener('click', async () => {
           const startTime = Date.now();
           const damageRect = Float32Array.of(0, 0, 0, 0);

           function draw() {
             const seek = ((Date.now() - startTime) / duration) % 1.0;
             const damage = animation.seek(seek, damageRect);

             if (damage[2] > damage[0] && damage[3] > damage[1]) {
               animation.render(canvas, bounds);
             }
           }

           startTimingFrames(draw, surface, WARM_UP_FRAMES, MAX_FRAMES, MAX_SAMPLE_MS).then((results) => {
             Object.assign(window._perfData, results);
             window._perfDone = true;
           }).catch((error) => {
             window._error = error;
           });

         });
         console.log('Perf is ready');
         window._perfReady = true;
       });
     })();

   function loadFonts(fonts) {
     const promises = [];
     if (!fonts || !fonts.list) {
       return promises;
     }
     for (const font of fonts.list) {
       if (font.fName) {
         promises.push(fetch(`${ASSETS_PATH}/${font.fName}.ttf`).then((resp) => {
             // fetch does not reject on 404
             if (!resp.ok) {
               console.error(`Could not load ${font.fName}.ttf: status ${resp.status}`);
               return null;
             }
             return resp.arrayBuffer().then((buffer) => {
               return {
                 'name': font.fName,
                 'bytes': buffer
               };
             });
           })
         );
       }
     }
     return promises;
   }

   function loadAssets(assets) {
     const promises = [];
     if (!assets) {
       return [];
     }
     for (const asset of assets) {
       // asset.p is the filename, if it's an image.
       // Don't try to load inline/dataURI images.
       const should_load = asset.p && asset.p.startsWith && !asset.p.startsWith('data:');
       if (should_load) {
         promises.push(fetch(`${ASSETS_PATH}/${asset.p}`)
           .then((resp) => {
             // fetch does not reject on 404
             if (!resp.ok) {
               console.error(`Could not load ${asset.p}: status ${resp.status}`);
               return null;
             }
             return resp.arrayBuffer().then((buffer) => {
               return {
                 'name': asset.p,
                 'bytes': buffer
               };
             });
           })
         );
       }
     }
     return promises;
   }
   </script>
 </body>
 </html>
	<!-- This benchmark aims to accurately measure the time it takes for Skottie to load the JSON and
	turn it into an animation, as well as the times for the first hundred frames (and, as a subcomponent
	of that, the seek times of the first hundred frames). This is set to mimic how a real-world user
	would display the animation (e.g. using clock time to determine where to seek, not frame numbers).
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<title>Skottie-WASM Perf</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="/static/canvaskit.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/benchmark.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css" media="screen">
	body {
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>
	<main>
	<button id="start_bench">Start Benchmark</button>
	<br>
	<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 WARM_UP_FRAMES = 0; // No warmup, so that the jank of initial frames gets measured.
	// We sample MAX_FRAMES or until MAX_SAMPLE_SECONDS has elapsed.
	const MAX_FRAMES = 600; // ~10s at 60fps
	const MAX_SAMPLE_MS = 50 * 1000; // in case something takes a while, stop after 50 seconds.
	const LOTTIE_JSON_PATH = '/static/lottie.json';
	const ASSETS_PATH = '/static/assets/';
	(function() {

	const loadKit = CanvasKitInit({
	locateFile: (file) => '/static/' + file,
	});

	const loadLottie = fetch(LOTTIE_JSON_PATH).then((resp) => {
	return resp.text();
	});

	const loadFontsAndAssets = loadLottie.then((jsonStr) => {
	const lottie = JSON.parse(jsonStr);
	const promises = [];
	promises.push(...loadFonts(lottie.fonts));
	promises.push(...loadAssets(lottie.assets));
	return Promise.all(promises);
	});

	Promise.all([loadKit, loadLottie, loadFontsAndAssets]).then((values) => {
	const [CanvasKit, json, externalAssets] = values;
	console.log(externalAssets);
	const assets = {};
	for (const asset of externalAssets) {
	if (asset) {
	assets[asset.name] = asset.bytes;
	}
	}
	const loadStart = performance.now();
	const animation = CanvasKit.MakeManagedAnimation(json, assets);
	const loadTime = performance.now() - loadStart;

	window._perfData = {
	json_load_ms: loadTime,
	};

	const duration = animation.duration() * 1000;
	const bounds = CanvasKit.LTRBRect(0, 0, WIDTH, HEIGHT);

	const urlSearchParams = new URLSearchParams(window.location.search);
	let glversion = 2;
	if (urlSearchParams.has('webgl1')) {
	glversion = 1;
	}

	const surface = getSurface(CanvasKit, glversion);
	if (!surface) {
	console.error('Could not make surface', window._error);
	return;
	}
	const canvas = surface.getCanvas();

	document.getElementById('start_bench').addEventListener('click', async () => {
	const startTime = Date.now();
	const damageRect = Float32Array.of(0, 0, 0, 0);

	function draw() {
	const seek = ((Date.now() - startTime) / duration) % 1.0;
	const damage = animation.seek(seek, damageRect);

	if (damage[2] > damage[0] && damage[3] > damage[1]) {
	animation.render(canvas, bounds);
	}
	}

	startTimingFrames(draw, surface, WARM_UP_FRAMES, MAX_FRAMES, MAX_SAMPLE_MS).then((results) => {
	Object.assign(window._perfData, results);
	window._perfDone = true;
	}).catch((error) => {
	window._error = error;
	});

	});
	console.log('Perf is ready');
	window._perfReady = true;
	});
	})();

	function loadFonts(fonts) {
	const promises = [];
	if (!fonts \|\| !fonts.list) {
	return promises;
	}
	for (const font of fonts.list) {
	if (font.fName) {
	promises.push(fetch(`${ASSETS_PATH}/${font.fName}.ttf`).then((resp) => {
	// fetch does not reject on 404
	if (!resp.ok) {
	console.error(`Could not load ${font.fName}.ttf: status ${resp.status}`);
	return null;
	}
	return resp.arrayBuffer().then((buffer) => {
	return {
	'name': font.fName,
	'bytes': buffer
	};
	});
	})
	);
	}
	}
	return promises;
	}

	function loadAssets(assets) {
	const promises = [];
	if (!assets) {
	return [];
	}
	for (const asset of assets) {
	// asset.p is the filename, if it's an image.
	// Don't try to load inline/dataURI images.
	const should_load = asset.p && asset.p.startsWith && !asset.p.startsWith('data:');
	if (should_load) {
	promises.push(fetch(`${ASSETS_PATH}/${asset.p}`)
	.then((resp) => {
	// fetch does not reject on 404
	if (!resp.ok) {
	console.error(`Could not load ${asset.p}: status ${resp.status}`);
	return null;
	}
	return resp.arrayBuffer().then((buffer) => {
	return {
	'name': asset.p,
	'bytes': buffer
	};
	});
	})
	);
	}
	}
	return promises;
	}
	</script>
	</body>
	</html>