预览一致性修复

js/spine-canvas-clipping.js

@@ -80,7 +80,7 @@ function unpackVertices(vertices, count) {
 	return { positions, uvs };
 }
 
-function drawInterleaved(base, image, vertices, triangles) {
+function drawInterleaved(base, image, vertices, triangles, darkColor) {
 	for (let i = 0; i < triangles.length; i += 3) {
 		const a = triangles[i] * 8;
 		const b = triangles[i + 1] * 8;
@@ -88,7 +88,9 @@ function drawInterleaved(base, image, vertices, triangles) {
 		base.drawTriangle(image,
 			vertices[a], vertices[a + 1], vertices[a + 6], vertices[a + 7],
 			vertices[b], vertices[b + 1], vertices[b + 6], vertices[b + 7],
-			vertices[c], vertices[c + 1], vertices[c + 6], vertices[c + 7]);
+			vertices[c], vertices[c + 1], vertices[c + 6], vertices[c + 7],
+			[...vertices.slice(a+2,a+6), ...vertices.slice(b+2,b+6), ...vertices.slice(c+2,c+6)],
+			darkColor ? Array.from({length:3}, () => [darkColor.r,darkColor.g,darkColor.b,0]).flat() : undefined);
 	}
 }
 
@@ -124,18 +126,19 @@ function createLegacyRenderer(spine, context) {
 					let triangles;
 					let vertexCount;
 					if (attachment instanceof spine.RegionAttachment) {
-						vertices = base.computeRegionVertices(slot, attachment, pma);
+						vertices = base.computeRegionVertices(slot, attachment, false);
 						triangles = Renderer.QUAD_TRIANGLES || QUAD_TRIANGLES;
 						vertexCount = 4;
 					} else if (attachment instanceof spine.MeshAttachment) {
-						vertices = base.computeMeshVertices(slot, attachment, pma);
+						vertices = base.computeMeshVertices(slot, attachment, false);
 						triangles = attachment.triangles;
 						vertexCount = attachment.worldVerticesLength >> 1;
 					} else {
 						continue;
 					}
 
-					const image = imageForCanvas(imageFromAttachment(attachment), context, pma);
+					const sourceImage = imageFromAttachment(attachment);
+					const image = base.gpuDrawing ? sourceImage : imageForCanvas(sourceImage, context, pma);
 					if (!image) continue;
 					context.globalAlpha = base.tempColor.a;
 					context.globalCompositeOperation = BLEND_MODES[slot.data.blendMode] || 'source-over';
@@ -143,9 +146,9 @@ function createLegacyRenderer(spine, context) {
 						const unpacked = unpackVertices(vertices, vertexCount);
 						clipper.clipTriangles(unpacked.positions, unpacked.positions.length,
 							triangles, triangles.length, unpacked.uvs, base.tempColor, dark, false);
-						drawInterleaved(base, image, clipper.clippedVertices, clipper.clippedTriangles);
+						drawInterleaved(base, image, clipper.clippedVertices, clipper.clippedTriangles, slot.darkColor);
 					} else {
-						drawInterleaved(base, image, vertices, triangles);
+						drawInterleaved(base, image, vertices, triangles, slot.darkColor);
 					}
 				} finally {
 					clipper.clipEndWithSlot(slot);
@@ -173,7 +176,8 @@ function create34Renderer(spine, context) {
 				const attachment = slot.getAttachment();
 				if (!(attachment instanceof spine.RegionAttachment) && !(attachment instanceof spine.MeshAttachment)) continue;
 				const vertices = attachment.updateWorldVertices(slot, false);
-				const image = imageForCanvas(imageFromAttachment(attachment), context, base.premultipliedAlpha);
+				const sourceImage = imageFromAttachment(attachment);
+				const image = base.gpuDrawing ? sourceImage : imageForCanvas(sourceImage, context, base.premultipliedAlpha);
 				if (!image) continue;
 				context.globalAlpha = vertices[5];
 				context.globalCompositeOperation = BLEND_MODES[slot.data.blendMode] || 'source-over';
@@ -196,9 +200,9 @@ function create43Renderer(spine, context) {
 		const composite = context.globalCompositeOperation;
 		try {
 			const pma = !!base.premultipliedAlpha;
-			for (let command = core.render(skeleton, pma); command; command = command.next) {
+			for (let command = core.render(skeleton, false); command; command = command.next) {
 				const sourceImage = command.texture && command.texture.getImage && command.texture.getImage();
-				const image = imageForCanvas(sourceImage, context, pma);
+				const image = base.gpuDrawing ? sourceImage : imageForCanvas(sourceImage, context, pma);
 				if (!image) continue;
 				context.globalAlpha = ((command.colors[0] >>> 24) & 255) / 255;
 				context.globalCompositeOperation = BLEND_MODES[command.blendMode] || 'source-over';
@@ -209,10 +213,13 @@ function create43Renderer(spine, context) {
 					const a = indices[i] * 2;
 					const b = indices[i + 1] * 2;
 					const c = indices[i + 2] * 2;
+					const unpack = packed => [((packed>>>16)&255)/255,((packed>>>8)&255)/255,(packed&255)/255,((packed>>>24)&255)/255];
+					const colors = [a,b,c].flatMap(index => unpack(command.colors[index/2]));
+					const darkColors = [a,b,c].flatMap(index => unpack(command.darkColors[index/2]));
 					base.drawTriangle(image,
 						positions[a], positions[a + 1], uvs[a], uvs[a + 1],
 						positions[b], positions[b + 1], uvs[b], uvs[b + 1],
-						positions[c], positions[c + 1], uvs[c], uvs[c + 1]);
+						positions[c], positions[c + 1], uvs[c], uvs[c + 1], colors, darkColors);
 				}
 			}
 		} finally {