From c3a40ed9b8e278e7674958c7479f88ceae1ae88f Mon Sep 17 00:00:00 2001 From: Mat Groves Date: Thu, 1 Aug 2024 16:20:59 +0100 Subject: [PATCH 1/2] fix empty vertex issue --- examples/basic.html | 4 ++-- src/Spine.ts | 9 +++++++-- src/SpinePipe.ts | 27 ++++++++++++++++----------- 3 files changed, 25 insertions(+), 15 deletions(-) diff --git a/examples/basic.html b/examples/basic.html index f1b9866..41094c5 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -25,7 +25,7 @@ // Pre-load the skeleton data and atlas. You can also load .json skeleton data. PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel"}); - PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/spineboy-pma.atlas"}); + PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/spineboy.atlas"}); await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]); // Create the spine display object @@ -42,7 +42,7 @@ spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2; // Set animation "run" on track 0, looped. - spineboy.state.setAnimation(0, "run", true); + spineboy.state.setAnimation(0, "portal", true); // Add the display object to the stage. app.stage.addChild(spineboy); diff --git a/src/Spine.ts b/src/Spine.ts index 809f269..0573215 100644 --- a/src/Spine.ts +++ b/src/Spine.ts @@ -101,6 +101,7 @@ export interface AttachmentCacheData uvs: Float32Array; indices: number[]; color: Color; + skipRender: boolean; clippedData?: { vertices: Float32Array; uvs: Float32Array; @@ -431,7 +432,7 @@ export class Spine extends Container implements View skeletonColor.a * slotColor.a * attachmentColor.a, ); - cacheData.clipped = false; + cacheData.skipRender = cacheData.clipped = false; if (clipper.isClipping()) { @@ -489,7 +490,9 @@ export class Spine extends Container implements View const sizeChange = clippedData.vertexCount !== verticesCount || indicesCount !== clippedData.indicesCount; - if (sizeChange) + cacheData.skipRender = verticesCount === 0; + + if (sizeChange && !cacheData.skipRender) { this.spineAttachmentsDirty = true; @@ -583,6 +586,7 @@ export class Spine extends Container implements View indices: [0, 1, 2, 0, 2, 3], uvs: attachment.uvs as Float32Array, color: new Color(1, 1, 1, 1), + skipRender: false, }; } else @@ -596,6 +600,7 @@ export class Spine extends Container implements View indices: attachment.triangles, uvs: attachment.uvs as Float32Array, color: new Color(1, 1, 1, 1), + skipRender: false, }; } diff --git a/src/SpinePipe.ts b/src/SpinePipe.ts index d72825f..b9c4e6f 100644 --- a/src/SpinePipe.ts +++ b/src/SpinePipe.ts @@ -101,16 +101,16 @@ export class SpinePipe implements RenderPipe const cacheData = spine._getCachedData(slot, attachment); const batchableSpineSlot = gpuSpine.slotBatches[cacheData.id] ||= new BatchableSpineSlot(); - if (!cacheData.clipped || (cacheData.clipped && cacheData.clippedData.vertices.length > 0)) + batchableSpineSlot.setData( + spine, + cacheData, + (attachment.region?.texture.texture) || Texture.EMPTY, + blendMode, + roundPixels + ); + + if (!cacheData.skipRender) { - batchableSpineSlot.setData( - spine, - cacheData, - (attachment.region?.texture.texture) || Texture.EMPTY, - blendMode, - roundPixels - ); - batcher.addToBatch(batchableSpineSlot); } } @@ -146,9 +146,14 @@ export class SpinePipe implements RenderPipe if (attachment instanceof RegionAttachment || attachment instanceof MeshAttachment) { - const batchableSpineSlot = gpuSpine.slotBatches[spine._getCachedData(slot, attachment).id]; + const cacheData = spine._getCachedData(slot, attachment); - batchableSpineSlot.batcher?.updateElement(batchableSpineSlot); + if (!cacheData.skipRender) + { + const batchableSpineSlot = gpuSpine.slotBatches[spine._getCachedData(slot, attachment).id]; + + batchableSpineSlot.batcher?.updateElement(batchableSpineSlot); + } } } } From 5921d1d7d278b6f3b63bfc85c99b50d4975b8385 Mon Sep 17 00:00:00 2001 From: Mat Groves Date: Thu, 1 Aug 2024 16:31:59 +0100 Subject: [PATCH 2/2] undo example changes --- examples/basic.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/basic.html b/examples/basic.html index 41094c5..f1b9866 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -25,7 +25,7 @@ // Pre-load the skeleton data and atlas. You can also load .json skeleton data. PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel"}); - PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/spineboy.atlas"}); + PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/spineboy-pma.atlas"}); await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]); // Create the spine display object @@ -42,7 +42,7 @@ spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2; // Set animation "run" on track 0, looped. - spineboy.state.setAnimation(0, "portal", true); + spineboy.state.setAnimation(0, "run", true); // Add the display object to the stage. app.stage.addChild(spineboy);