tools/perf-canvaskit-puppeteer/path-transform.html - skia - Git at Google

 <!-- This benchmark aims to measure performance degredation related to
 moving a complex path. May be related to caching an alpha mask of the path at
 subpixel coordinates i.e. (25.234, 43.119) instead of (25, 43).
 As a consequence the cache may get full very quickly. Effect of paint opacity
 and rotation transformations on performance can also be tested using the query param options.

 Available query param options:
  - snap: Round all path translations to the nearest integer. This means subpixel coordinate.
     translations will not be used. Only has an effect when the translating option is used.
  - opacity: Use a transparent color to fill the path. If this option is
     not included then opaque black is used.
  - translate: The path will be randomly translated every frame.
  - rotate: The path will be randomly rotated every frame.
 -->
 <!DOCTYPE html>
 <html>
 <head>
   <title>Complex Path translation 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>
   <style type="text/css" media="screen">
     body {
       margin: 0;
       padding: 0;
     }
     #test-svg {
       height: 0;
       width: 0;
     }
     #complex-path {
       height: 1000px;
       width: 1000px;
     }
   </style>
 </head>
 <body>
   <!-- Arbitrary svg for testing. Source: https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/gallardo.svg-->
   <object type="image/svg+xml" data="/static/assets/car.svg" id="test-svg">
     Car image
   </object>

   <main>
     <button id="start_bench">Start Benchmark</button>
     <br>
     <canvas id=complex-path width=1000 height=1000></canvas>
   </main>
   <script type="text/javascript" charset="utf-8">
   const urlSearchParams = new URLSearchParams(window.location.search);

   // We sample MAX_FRAMES or until MAX_SAMPLE_SECONDS has elapsed.
   const MAX_FRAMES = 60 * 30; // ~30s at 60fps
   const MAX_SAMPLE_MS = 30 * 1000; // in case something takes a while, stop after 30 seconds.
   const TRANSPARENT_PINK = new Float32Array([1,0,1,0.1]);

   const svgObjectElement = document.getElementById('test-svg');
   svgObjectElement.addEventListener('load', () => {
     CanvasKitInit({
       locateFile: (file) => '/static/' + file,
     }).then(run);
   });

   function run(CanvasKit) {

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

     document.getElementById('start_bench').addEventListener('click', () => {
       // Initialize drawing related objects
       const svgElement = svgObjectElement.contentDocument;
       const svgPathAndFillColorPairs = svgToPathAndFillColorPairs(svgElement, CanvasKit);

       const paint = new CanvasKit.Paint();
       paint.setAntiAlias(true);
       paint.setStyle(CanvasKit.PaintStyle.Fill);
       let paintColor = CanvasKit.BLACK;

       // Path is large, scale canvas so entire path is visible
       skcanvas.scale(0.5, 0.5);

       // Initialize perf data
       let currentFrameNumber = 0;
       const frameTimesMs = new Float32Array(MAX_FRAMES);
       let startTimeMs = performance.now();
       let previousFrameTimeMs = performance.now();

       const resourceCacheUsageBytes = new Float32Array(MAX_FRAMES);
       const usedJSHeapSizesBytes = new Float32Array(MAX_FRAMES);

       function drawFrame() {
         // Draw complex path with random translations and rotations.
         let randomHorizontalTranslation = 0;
         let randomVerticalTranslation = 0;
         let randomRotation = 0;

         if (urlSearchParams.has('translate')) {
           randomHorizontalTranslation = Math.random() * 50 - 25;
           randomVerticalTranslation = Math.random() * 50 - 25;
         }
         if (urlSearchParams.has('snap')) {
           randomHorizontalTranslation = Math.round(randomHorizontalTranslation);
           randomVerticalTranslation = Math.round(randomVerticalTranslation);
         }
         if (urlSearchParams.has('opacity')) {
           paintColor = TRANSPARENT_PINK;
         }
         if (urlSearchParams.has('rotate')) {
           randomRotation = (Math.random() - 0.5) / 20;
         }

         skcanvas.clear(CanvasKit.WHITE);
         for (const [path, color] of svgPathAndFillColorPairs) {
           path.transform([Math.cos(randomRotation), -Math.sin(randomRotation), randomHorizontalTranslation,
                           Math.sin(randomRotation), Math.cos(randomRotation), randomVerticalTranslation,
                           0, 0, 1 ]);
           paint.setColor(paintColor);
           skcanvas.drawPath(path, paint);
         }
         surface.flush();

         // Record perf data: measure frame times, memory usage
         const currentFrameTimeMs = performance.now();
         frameTimesMs[currentFrameNumber] = currentFrameTimeMs - previousFrameTimeMs;
         previousFrameTimeMs = currentFrameTimeMs;

         resourceCacheUsageBytes[currentFrameNumber] = grContext.getResourceCacheUsageBytes();
         usedJSHeapSizesBytes[currentFrameNumber] = window.performance.memory.totalJSHeapSize;
         currentFrameNumber++;

         const timeSinceStart = performance.now() - startTimeMs;
         if (currentFrameNumber >= MAX_FRAMES || timeSinceStart >= MAX_SAMPLE_MS) {
           window._perfData = {
             frames_ms: Array.from(frameTimesMs).slice(0, currentFrameNumber),
             resourceCacheUsage_bytes: Array.from(resourceCacheUsageBytes).slice(0, currentFrameNumber),
             usedJSHeapSizes_bytes: Array.from(usedJSHeapSizesBytes).slice(0, currentFrameNumber),
           };
           window._perfDone = true;
           return;
         }
         window.requestAnimationFrame(drawFrame);
       }
       window.requestAnimationFrame(drawFrame);
     });

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

   function svgToPathAndFillColorPairs(svgElement, CanvasKit) {
     const pathElements = Array.from(svgElement.getElementsByTagName('path'));
     return pathElements.map((path) => [
       CanvasKit.MakePathFromSVGString(path.getAttribute("d")),
       CanvasKit.parseColorString(path.getAttribute("fill")??'#000000')
     ]);
   }

   function getSurface(CanvasKit) {
     let surface;
     if (window.location.hash.indexOf('gpu') !== -1) {
       surface = CanvasKit.MakeWebGLCanvasSurface('complex-path');
       if (!surface) {
         window._error = 'Could not make GPU surface';
         return null;
       }
       let c = document.getElementById('complex-path');
       // 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 null;
       }
     } else {
       surface = CanvasKit.MakeSWCanvasSurface('complex-path');
       if (!surface) {
         window._error = 'Could not make CPU surface';
         return null;
       }
     }
     return surface;
   }
   </script>
 </body>
 </html>
	<!-- This benchmark aims to measure performance degredation related to
	moving a complex path. May be related to caching an alpha mask of the path at
	subpixel coordinates i.e. (25.234, 43.119) instead of (25, 43).
	As a consequence the cache may get full very quickly. Effect of paint opacity
	and rotation transformations on performance can also be tested using the query param options.

	Available query param options:
	- snap: Round all path translations to the nearest integer. This means subpixel coordinate.
	translations will not be used. Only has an effect when the translating option is used.
	- opacity: Use a transparent color to fill the path. If this option is
	not included then opaque black is used.
	- translate: The path will be randomly translated every frame.
	- rotate: The path will be randomly rotated every frame.
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<title>Complex Path translation 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>
	<style type="text/css" media="screen">
	body {
	margin: 0;
	padding: 0;
	}
	#test-svg {
	height: 0;
	width: 0;
	}
	#complex-path {
	height: 1000px;
	width: 1000px;
	}
	</style>
	</head>
	<body>
	<!-- Arbitrary svg for testing. Source: https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/gallardo.svg-->
	<object type="image/svg+xml" data="/static/assets/car.svg" id="test-svg">
	Car image
	</object>

	<main>
	<button id="start_bench">Start Benchmark</button>
	<br>
	<canvas id=complex-path width=1000 height=1000></canvas>
	</main>
	<script type="text/javascript" charset="utf-8">
	const urlSearchParams = new URLSearchParams(window.location.search);

	// We sample MAX_FRAMES or until MAX_SAMPLE_SECONDS has elapsed.
	const MAX_FRAMES = 60 * 30; // ~30s at 60fps
	const MAX_SAMPLE_MS = 30 * 1000; // in case something takes a while, stop after 30 seconds.
	const TRANSPARENT_PINK = new Float32Array([1,0,1,0.1]);

	const svgObjectElement = document.getElementById('test-svg');
	svgObjectElement.addEventListener('load', () => {
	CanvasKitInit({
	locateFile: (file) => '/static/' + file,
	}).then(run);
	});

	function run(CanvasKit) {

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

	document.getElementById('start_bench').addEventListener('click', () => {
	// Initialize drawing related objects
	const svgElement = svgObjectElement.contentDocument;
	const svgPathAndFillColorPairs = svgToPathAndFillColorPairs(svgElement, CanvasKit);

	const paint = new CanvasKit.Paint();
	paint.setAntiAlias(true);
	paint.setStyle(CanvasKit.PaintStyle.Fill);
	let paintColor = CanvasKit.BLACK;

	// Path is large, scale canvas so entire path is visible
	skcanvas.scale(0.5, 0.5);

	// Initialize perf data
	let currentFrameNumber = 0;
	const frameTimesMs = new Float32Array(MAX_FRAMES);
	let startTimeMs = performance.now();
	let previousFrameTimeMs = performance.now();

	const resourceCacheUsageBytes = new Float32Array(MAX_FRAMES);
	const usedJSHeapSizesBytes = new Float32Array(MAX_FRAMES);

	function drawFrame() {
	// Draw complex path with random translations and rotations.
	let randomHorizontalTranslation = 0;
	let randomVerticalTranslation = 0;
	let randomRotation = 0;

	if (urlSearchParams.has('translate')) {
	randomHorizontalTranslation = Math.random() * 50 - 25;
	randomVerticalTranslation = Math.random() * 50 - 25;
	}
	if (urlSearchParams.has('snap')) {
	randomHorizontalTranslation = Math.round(randomHorizontalTranslation);
	randomVerticalTranslation = Math.round(randomVerticalTranslation);
	}
	if (urlSearchParams.has('opacity')) {
	paintColor = TRANSPARENT_PINK;
	}
	if (urlSearchParams.has('rotate')) {
	randomRotation = (Math.random() - 0.5) / 20;
	}

	skcanvas.clear(CanvasKit.WHITE);
	for (const [path, color] of svgPathAndFillColorPairs) {
	path.transform([Math.cos(randomRotation), -Math.sin(randomRotation), randomHorizontalTranslation,
	Math.sin(randomRotation), Math.cos(randomRotation), randomVerticalTranslation,
	0, 0, 1 ]);
	paint.setColor(paintColor);
	skcanvas.drawPath(path, paint);
	}
	surface.flush();

	// Record perf data: measure frame times, memory usage
	const currentFrameTimeMs = performance.now();
	frameTimesMs[currentFrameNumber] = currentFrameTimeMs - previousFrameTimeMs;
	previousFrameTimeMs = currentFrameTimeMs;

	resourceCacheUsageBytes[currentFrameNumber] = grContext.getResourceCacheUsageBytes();
	usedJSHeapSizesBytes[currentFrameNumber] = window.performance.memory.totalJSHeapSize;
	currentFrameNumber++;

	const timeSinceStart = performance.now() - startTimeMs;
	if (currentFrameNumber >= MAX_FRAMES \|\| timeSinceStart >= MAX_SAMPLE_MS) {
	window._perfData = {
	frames_ms: Array.from(frameTimesMs).slice(0, currentFrameNumber),
	resourceCacheUsage_bytes: Array.from(resourceCacheUsageBytes).slice(0, currentFrameNumber),
	usedJSHeapSizes_bytes: Array.from(usedJSHeapSizesBytes).slice(0, currentFrameNumber),
	};
	window._perfDone = true;
	return;
	}
	window.requestAnimationFrame(drawFrame);
	}
	window.requestAnimationFrame(drawFrame);
	});

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

	function svgToPathAndFillColorPairs(svgElement, CanvasKit) {
	const pathElements = Array.from(svgElement.getElementsByTagName('path'));
	return pathElements.map((path) => [
	CanvasKit.MakePathFromSVGString(path.getAttribute("d")),
	CanvasKit.parseColorString(path.getAttribute("fill")??'#000000')
	]);
	}

	function getSurface(CanvasKit) {
	let surface;
	if (window.location.hash.indexOf('gpu') !== -1) {
	surface = CanvasKit.MakeWebGLCanvasSurface('complex-path');
	if (!surface) {
	window._error = 'Could not make GPU surface';
	return null;
	}
	let c = document.getElementById('complex-path');
	// 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 null;
	}
	} else {
	surface = CanvasKit.MakeSWCanvasSurface('complex-path');
	if (!surface) {
	window._error = 'Could not make CPU surface';
	return null;
	}
	}
	return surface;
	}
	</script>
	</body>
	</html>