UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-06 15:24:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mario Zechner 2024-07-08 17:40:51 +02:00
parent 8c6e82581d
commit 8c69162e2f
3 changed files with 76 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spine-ts/index.html
View File

@ -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>

72
spine-ts/spine-canvaskit/example/micro-benchmark.html Normal file
View File

@ -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>

4
spine-ts/spine-canvaskit/src/index.ts
View File

@ -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);