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