Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
archive
/
spine-runtimes
-ын хуулбар https://github.com/EsotericSoftware/spine-runtimes.git
2
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

[canvaskit] Add micro benchmark, delete Skia vertices after drawVertices

Mario Zechner 1 жил өмнө
parent
8c6e82581d
commit
8c69162e2f
3 өөрчлөгдсөн 76 нэмэгдсэн , 1 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 1 0
      spine-ts/index.html
  2. 72 0
      spine-ts/spine-canvaskit/example/micro-benchmark.html
  3. 3 1
      spine-ts/spine-canvaskit/src/index.ts

+ 1 - 0
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/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/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/ik-following.html">IK Following</a></li>
 
+        <li><a href="/spine-canvaskit/example/micro-benchmark.html">Micro Benchmark</a></li>
 
       </ul>
 
       </ul>
 
       <li>Pixi</li>
 
       <li>Pixi</li>
 
       <ul>
 
       <ul>

+ 72 - 0
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>

+ 3 - 1
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 static QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
 
     private scratchPositions = Utils.newFloatArray(100);
 
     private scratchPositions = Utils.newFloatArray(100);
 
     private scratchColors = Utils.newFloatArray(100);
 
     private scratchColors = Utils.newFloatArray(100);
 
+    private scratchUVs = Utils.newFloatArray(100);
 
 
 
     /**
 
     /**
 
      * Creates a new skeleton renderer.
 
      * Creates a new skeleton renderer.
 
@@ -220,7 +221,7 @@ export class SkeletonRenderer {
 
                     colors[i + 3] = finalColor.a;
 
                     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 width = texture.getImage().image.width();
 
                 const height = texture.getImage().image.height();
 
                 const height = texture.getImage().image.height();
 
                 for (let i = 0; i < uvs.length; i+=2) {
 
                 for (let i = 0; i < uvs.length; i+=2) {
 
@@ -231,6 +232,7 @@ export class SkeletonRenderer {
 
                 const blendMode = slot.data.blendMode;
 
                 const blendMode = slot.data.blendMode;
 
                 const vertices = this.ck.MakeVertices(this.ck.VertexMode.Triangles, positions, scaledUvs, colors, triangles, false);
 
                 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)!);
 
                 canvas.drawVertices(vertices, this.ck.BlendMode.Modulate, texture.getImage().paintPerBlendMode.get(blendMode)!);
 
+                vertices.delete();
 
 			}
 
 			}
 
 
 
 			clipper.clipEndWithSlot(slot);
 
 			clipper.clipEndWithSlot(slot);