From 8c69162e2fb5e2d8ba707e6ba101e2e88ee19975 Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Mon, 8 Jul 2024 17:40:51 +0200
Subject: [PATCH] [canvaskit] Add micro benchmark, delete Skia vertices after
 drawVertices

---
 spine-ts/index.html                           |  1 +
 .../example/micro-benchmark.html              | 72 +++++++++++++++++++
 spine-ts/spine-canvaskit/src/index.ts         |  4 +-
 3 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 spine-ts/spine-canvaskit/example/micro-benchmark.html
diff --git a/spine-ts/index.html b/spine-ts/index.html
index 96ec01a2d..9af3d4ba6 100644
--- a/spine-ts/index.html
+++ b/spine-ts/index.html
@@ -26,6 +26,7 @@
         <li><a href="/spine-canvaskit/example/animation-state-events.html">Animation State Events</a></li>
         <li><a href="/spine-canvaskit/example/mix-and-match.html">Skins Mix &amp; Match</a></li>
         <li><a href="/spine-canvaskit/example/ik-following.html">IK Following</a></li>
+        <li><a href="/spine-canvaskit/example/micro-benchmark.html">Micro Benchmark</a></li>
       </ul>
       <li>Pixi</li>
       <ul>
diff --git a/spine-ts/spine-canvaskit/example/micro-benchmark.html b/spine-ts/spine-canvaskit/example/micro-benchmark.html
new file mode 100644
index 000000000..87b53e516
--- /dev/null
+++ b/spine-ts/spine-canvaskit/example/micro-benchmark.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../index.css">
+    <script src="https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.js"></script>
+    <script src="../dist/iife/spine-canvaskit.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+
+<body class="p-4 flex flex-col items-center">
+    <h1>Micro Benchmark</h1>
+    <div id="timing"></div>
+    <canvas id=foo width=600 height=400 style="margin: 0 auto;"></canvas>
+</body>
+
+<script type="module">
+    async function readFile(path) {
+        const response = await fetch(path);
+        if (!response.ok) throw new Error("Could not load file " + path);
+        return await response.arrayBuffer();
+    }
+
+    const ck = await CanvasKitInit();
+    const surface = ck.MakeCanvasSurface('foo');
+
+    const atlas = await spine.loadTextureAtlas(ck, "assets/spineboy.atlas", readFile);
+    const skeletonData = await spine.loadSkeletonData("assets/spineboy-pro.skel", atlas, readFile);
+
+    // Instantiate 100 skeletons, randomly placed and scaled.
+    const drawables = [];
+    for (let i = 0; i < 100; i++) {
+        const drawable = new spine.SkeletonDrawable(skeletonData);
+        drawable.skeleton.scaleX = drawable.skeleton.scaleY = 0.1 + Math.random() * 0.4;
+        drawable.skeleton.x = Math.random() * 600;
+        drawable.skeleton.y = Math.random() * 400;
+        drawable.animationState.setAnimation(0, "walk", true);
+
+        drawables.push(drawable);
+    }
+
+    const timingElement = document.querySelector("#timing");
+    const renderer = new spine.SkeletonRenderer(ck);
+    let lastTime = performance.now();
+    function drawFrame(canvas) {
+        canvas.clear(ck.Color(52, 52, 54, 1));
+
+        const now = performance.now();
+        const deltaTime = (now - lastTime) / 1000;
+        lastTime = now;
+
+        // Render all drawables
+        for (let i = 0; i < drawables.length; i++) {
+            const drawable = drawables[i];
+            drawable.update(deltaTime);
+            renderer.render(canvas, drawable);
+        }
+
+        surface.requestAnimationFrame(drawFrame);
+        timingElement.textContent = (deltaTime * 1000).toFixed(0) + "ms/frame";
+    }
+    surface.requestAnimationFrame(drawFrame);
+</script>
+
+</html>
\ No newline at end of file
diff --git a/spine-ts/spine-canvaskit/src/index.ts b/spine-ts/spine-canvaskit/src/index.ts
index 988facf85..c020ad52b 100644
--- a/spine-ts/spine-canvaskit/src/index.ts
+++ b/spine-ts/spine-canvaskit/src/index.ts
@@ -137,6 +137,7 @@ export class SkeletonRenderer {
     private static QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
     private scratchPositions = Utils.newFloatArray(100);
     private scratchColors = Utils.newFloatArray(100);
+    private scratchUVs = Utils.newFloatArray(100);
 
     /**
      * Creates a new skeleton renderer.
@@ -220,7 +221,7 @@ export class SkeletonRenderer {
                     colors[i + 3] = finalColor.a;
                 }
 
-                const scaledUvs = new Array<number>(uvs.length);
+                const scaledUvs = this.scratchUVs.length < uvs.length ? Utils.newFloatArray(uvs.length) : this.scratchUVs;
                 const width = texture.getImage().image.width();
                 const height = texture.getImage().image.height();
                 for (let i = 0; i < uvs.length; i+=2) {
@@ -231,6 +232,7 @@ export class SkeletonRenderer {
                 const blendMode = slot.data.blendMode;
                 const vertices = this.ck.MakeVertices(this.ck.VertexMode.Triangles, positions, scaledUvs, colors, triangles, false);
                 canvas.drawVertices(vertices, this.ck.BlendMode.Modulate, texture.getImage().paintPerBlendMode.get(blendMode)!);
+                vertices.delete();
 			}
 
 			clipper.clipEndWithSlot(slot);
