1cb93a386Sopenharmony_ci<!-- This benchmark aims to accurately measure the time it takes for CanvasKit to render 2cb93a386Sopenharmony_ci an SKP from our test corpus. It is very careful to measure the time between frames. This form 3cb93a386Sopenharmony_ci of measurement makes sure we are capturing the GPU draw time. CanvasKit.flush() returns after 4cb93a386Sopenharmony_ci it has sent all the instructions to the GPU, but we don't know the GPU is done until the next 5cb93a386Sopenharmony_ci frame is requested. Thus, we need to keep track of the time between frames in order to 6cb93a386Sopenharmony_ci accurately calculate draw time. Keeping track of the drawPicture and drawPicture+flush is still 7cb93a386Sopenharmony_ci useful for telling us how much time we are spending in WASM land and if our drawing is CPU 8cb93a386Sopenharmony_ci bound or GPU bound. If total_frame_ms is close to with_flush_ms, we are CPU bound; if 9cb93a386Sopenharmony_ci total_frame_ms >> with_flush_ms, we are GPU bound. 10cb93a386Sopenharmony_ci--> 11cb93a386Sopenharmony_ci<!DOCTYPE html> 12cb93a386Sopenharmony_ci<html> 13cb93a386Sopenharmony_ci<head> 14cb93a386Sopenharmony_ci <title>CanvasKit SKP Perf</title> 15cb93a386Sopenharmony_ci <meta charset="utf-8" /> 16cb93a386Sopenharmony_ci <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 17cb93a386Sopenharmony_ci <meta name="viewport" content="width=device-width, initial-scale=1.0"> 18cb93a386Sopenharmony_ci <script src="/static/canvaskit.js" type="text/javascript" charset="utf-8"></script> 19cb93a386Sopenharmony_ci <script src="/static/benchmark.js" type="text/javascript" charset="utf-8"></script> 20cb93a386Sopenharmony_ci <style type="text/css" media="screen"> 21cb93a386Sopenharmony_ci body { 22cb93a386Sopenharmony_ci margin: 0; 23cb93a386Sopenharmony_ci padding: 0; 24cb93a386Sopenharmony_ci } 25cb93a386Sopenharmony_ci </style> 26cb93a386Sopenharmony_ci</head> 27cb93a386Sopenharmony_ci<body> 28cb93a386Sopenharmony_ci <main> 29cb93a386Sopenharmony_ci <button id="start_bench">Start Benchmark</button> 30cb93a386Sopenharmony_ci <br> 31cb93a386Sopenharmony_ci <canvas id=anim width=1000 height=1000 style="height: 1000px; width: 1000px;"></canvas> 32cb93a386Sopenharmony_ci </main> 33cb93a386Sopenharmony_ci <script type="text/javascript" charset="utf-8"> 34cb93a386Sopenharmony_ci const WIDTH = 1000; 35cb93a386Sopenharmony_ci const HEIGHT = 1000; 36cb93a386Sopenharmony_ci const WARM_UP_FRAMES = 10; 37cb93a386Sopenharmony_ci const MAX_FRAMES = 201; // This should be sufficient to have low noise. 38cb93a386Sopenharmony_ci const SKP_PATH = '/static/test.skp'; 39cb93a386Sopenharmony_ci 40cb93a386Sopenharmony_ci (function() { 41cb93a386Sopenharmony_ci 42cb93a386Sopenharmony_ci const loadKit = CanvasKitInit({ 43cb93a386Sopenharmony_ci locateFile: (file) => '/static/' + file, 44cb93a386Sopenharmony_ci }); 45cb93a386Sopenharmony_ci 46cb93a386Sopenharmony_ci const loadSKP = fetch(SKP_PATH).then((resp) => { 47cb93a386Sopenharmony_ci return resp.arrayBuffer(); 48cb93a386Sopenharmony_ci }); 49cb93a386Sopenharmony_ci 50cb93a386Sopenharmony_ci Promise.all([loadKit, loadSKP]).then((values) => { 51cb93a386Sopenharmony_ci const [CanvasKit, skpBytes] = values; 52cb93a386Sopenharmony_ci const loadStart = performance.now(); 53cb93a386Sopenharmony_ci const skp = CanvasKit.MakePicture(skpBytes); 54cb93a386Sopenharmony_ci const loadTime = performance.now() - loadStart; 55cb93a386Sopenharmony_ci window._perfData = { 56cb93a386Sopenharmony_ci skp_load_ms: loadTime, 57cb93a386Sopenharmony_ci }; 58cb93a386Sopenharmony_ci console.log('loaded skp', skp, loadTime); 59cb93a386Sopenharmony_ci if (!skp) { 60cb93a386Sopenharmony_ci window._error = 'could not read skp'; 61cb93a386Sopenharmony_ci return; 62cb93a386Sopenharmony_ci } 63cb93a386Sopenharmony_ci 64cb93a386Sopenharmony_ci const urlSearchParams = new URLSearchParams(window.location.search); 65cb93a386Sopenharmony_ci let glversion = 2; 66cb93a386Sopenharmony_ci if (urlSearchParams.has('webgl1')) { 67cb93a386Sopenharmony_ci glversion = 1; 68cb93a386Sopenharmony_ci } 69cb93a386Sopenharmony_ci 70cb93a386Sopenharmony_ci const surface = getSurface(CanvasKit, glversion); 71cb93a386Sopenharmony_ci if (!surface) { 72cb93a386Sopenharmony_ci console.error('Could not make surface', window._error); 73cb93a386Sopenharmony_ci return; 74cb93a386Sopenharmony_ci } 75cb93a386Sopenharmony_ci const canvas = surface.getCanvas(); 76cb93a386Sopenharmony_ci 77cb93a386Sopenharmony_ci document.getElementById('start_bench').addEventListener('click', async () => { 78cb93a386Sopenharmony_ci const clearColor = CanvasKit.WHITE; 79cb93a386Sopenharmony_ci 80cb93a386Sopenharmony_ci function draw() { 81cb93a386Sopenharmony_ci canvas.clear(clearColor); 82cb93a386Sopenharmony_ci canvas.drawPicture(skp); 83cb93a386Sopenharmony_ci } 84cb93a386Sopenharmony_ci 85cb93a386Sopenharmony_ci const results = await startTimingFrames(draw, surface, WARM_UP_FRAMES, MAX_FRAMES); 86cb93a386Sopenharmony_ci Object.assign(window._perfData, results); 87cb93a386Sopenharmony_ci window._perfDone = true; 88cb93a386Sopenharmony_ci }); 89cb93a386Sopenharmony_ci console.log('Perf is ready'); 90cb93a386Sopenharmony_ci window._perfReady = true; 91cb93a386Sopenharmony_ci }); 92cb93a386Sopenharmony_ci } 93cb93a386Sopenharmony_ci )(); 94cb93a386Sopenharmony_ci 95cb93a386Sopenharmony_ci </script> 96cb93a386Sopenharmony_ci</body> 97cb93a386Sopenharmony_ci</html> 98