重命名
This commit is contained in:
tianmo committed
1 parent
c619bfbb1a
commit
8b0f97481a
35 files changed
No files matched your search
@@ -0,0 +1,17 @@
|
||||
'use strict';
|
||||
const path = require('path');
|
||||
|
||||
// Preserve name + '.' + ext exactly; only split the compound suffix correctly.
|
||||
// Return through Eagle's thumbnail callback so Eagle persists its own metadata.
|
||||
function normalizeItem(src, item) {
|
||||
const filename = path.basename(src);
|
||||
const match = filename.match(/^(.*)\.(atlas\.txt|skel\.bytes)$/i);
|
||||
if (!match || !item || !item.ext) return false;
|
||||
if (item.name + '.' + item.ext !== filename) return false;
|
||||
if (item.name === match[1] && item.ext === match[2]) return false;
|
||||
item.name = match[1]; item.ext = match[2];
|
||||
delete item.text;
|
||||
return true;
|
||||
}
|
||||
|
||||
module.exports = { normalizeItem };
|
||||
@@ -0,0 +1,25 @@
|
||||
'use strict';
|
||||
const patterns = new WeakMap();
|
||||
|
||||
// Called with the same world-to-canvas transform used to draw the skeleton.
|
||||
function drawCheckerboard(ctx, width, height) {
|
||||
let pattern = patterns.get(ctx);
|
||||
if (!pattern) {
|
||||
const tile = ctx.canvas.ownerDocument.createElement('canvas');
|
||||
tile.width = tile.height = 100;
|
||||
const paint = tile.getContext('2d');
|
||||
paint.fillStyle = '#505052'; paint.fillRect(0, 0, 100, 100);
|
||||
paint.fillStyle = '#5a5a5c'; paint.fillRect(0, 0, 50, 50); paint.fillRect(50, 50, 50, 50);
|
||||
pattern = ctx.createPattern(tile, 'repeat'); patterns.set(ctx, pattern);
|
||||
}
|
||||
const m = ctx.getTransform().inverse();
|
||||
const corners = [[0,0], [width,0], [width,height], [0,height]].map(([x,y]) => [m.a*x+m.c*y+m.e, m.b*x+m.d*y+m.f]);
|
||||
const xs = corners.map(p => p[0]), ys = corners.map(p => p[1]);
|
||||
const x = Math.min(...xs), y = Math.min(...ys);
|
||||
if (!Number.isFinite(x + y)) return;
|
||||
ctx.save();
|
||||
try { ctx.imageSmoothingEnabled = false; ctx.fillStyle = pattern; ctx.fillRect(x, y, Math.max(...xs)-x, Math.max(...ys)-y); }
|
||||
finally { ctx.restore(); }
|
||||
}
|
||||
|
||||
module.exports = { drawCheckerboard };
|
||||
@@ -0,0 +1,31 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const badgePath = path.join(__dirname, '..', 'assets', 'spine-badge.png');
|
||||
let cachedDataUrl = null;
|
||||
|
||||
function dataUrl() {
|
||||
if (!cachedDataUrl) {
|
||||
cachedDataUrl = 'data:image/png;base64,' + fs.readFileSync(badgePath).toString('base64');
|
||||
}
|
||||
return cachedDataUrl;
|
||||
}
|
||||
|
||||
function drawVersion(ctx, width, height, version) {
|
||||
version = String(version || '');
|
||||
if (version.length > 40 || !/^\d+\.\d+(?:\.\d+)?(?:[-+][a-z0-9][a-z0-9.-]*)?$/i.test(version)) return;
|
||||
const fontSize = Math.max(12, Math.round(Math.min(width, height) * 0.055));
|
||||
const margin = Math.max(10, Math.round(Math.min(width, height) * 0.03));
|
||||
ctx.save();
|
||||
try {
|
||||
ctx.font = '600 ' + fontSize + 'px sans-serif';
|
||||
ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
|
||||
const boxHeight = fontSize + 12;
|
||||
const y = height - margin - boxHeight;
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.65)';
|
||||
ctx.fillRect(margin, y, ctx.measureText(version).width + 16, boxHeight);
|
||||
ctx.fillStyle = '#ffffff'; ctx.fillText(version, margin + 8, y + boxHeight / 2);
|
||||
} finally { ctx.restore(); }
|
||||
}
|
||||
|
||||
module.exports = { path: badgePath, dataUrl, drawVersion };
|
||||
@@ -0,0 +1,243 @@
|
||||
'use strict';
|
||||
|
||||
// The official spine-canvas SkeletonRenderer does not process clipping
|
||||
// attachments. Keep its triangle rasterizer, but feed it geometry produced by
|
||||
// SkeletonClipping so the viewer matches Spine's draw order and clipping rules.
|
||||
|
||||
const QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
|
||||
const BLEND_MODES = ['source-over', 'lighter', 'multiply', 'screen'];
|
||||
const unpremultipliedImages = new WeakMap();
|
||||
|
||||
function rendererConstructor(spine) {
|
||||
return (spine.canvas && spine.canvas.SkeletonRenderer) || spine.SkeletonRenderer;
|
||||
}
|
||||
|
||||
function imageFromAttachment(attachment) {
|
||||
const region = attachment && attachment.region;
|
||||
// 4.0 stores the texture on the atlas page, while the other bundled
|
||||
// runtimes expose it directly on the attachment region.
|
||||
const renderRegion = region && region.renderObject;
|
||||
const texture = region && (region.texture
|
||||
|| (region.page && region.page.texture)
|
||||
|| (renderRegion && renderRegion.texture)
|
||||
|| (renderRegion && renderRegion.page && renderRegion.page.texture));
|
||||
return texture && typeof texture.getImage === 'function' ? texture.getImage() : null;
|
||||
}
|
||||
|
||||
// Canvas 2D always applies source-alpha blending. A Spine texture exported
|
||||
// with PMA already has RGB multiplied by alpha, so drawing it directly would
|
||||
// multiply translucent edge pixels a second time. Convert it once to straight
|
||||
// alpha and cache the result; Canvas can then blend it correctly.
|
||||
function imageForCanvas(image, context, premultipliedAlpha) {
|
||||
if (!premultipliedAlpha || !image || (typeof image !== 'object' && typeof image !== 'function')) return image;
|
||||
const cached = unpremultipliedImages.get(image);
|
||||
if (cached) return cached;
|
||||
try {
|
||||
const ownerDocument = context.canvas && context.canvas.ownerDocument;
|
||||
const doc = ownerDocument || (typeof document !== 'undefined' ? document : null);
|
||||
if (!image.width || !image.height) return image;
|
||||
let canvas;
|
||||
if (doc) canvas = doc.createElement('canvas');
|
||||
else {
|
||||
try { canvas = require('@napi-rs/canvas').createCanvas(image.width, image.height); }
|
||||
catch (e) { return image; }
|
||||
}
|
||||
canvas.width = image.width;
|
||||
canvas.height = image.height;
|
||||
const ctx = canvas.getContext('2d', { willReadFrequently: true });
|
||||
ctx.drawImage(image, 0, 0);
|
||||
const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
const data = pixels.data;
|
||||
for (let i = 0; i < data.length; i += 4) {
|
||||
const alpha = data[i + 3];
|
||||
if (alpha > 0 && alpha < 255) {
|
||||
const factor = 255 / alpha;
|
||||
data[i] = Math.min(255, Math.round(data[i] * factor));
|
||||
data[i + 1] = Math.min(255, Math.round(data[i + 1] * factor));
|
||||
data[i + 2] = Math.min(255, Math.round(data[i + 2] * factor));
|
||||
}
|
||||
}
|
||||
ctx.putImageData(pixels, 0, 0);
|
||||
unpremultipliedImages.set(image, canvas);
|
||||
return canvas;
|
||||
} catch (e) {
|
||||
// If pixel access is unavailable, retain the original texture so preview
|
||||
// remains usable instead of failing the whole frame.
|
||||
return image;
|
||||
}
|
||||
}
|
||||
|
||||
function unpackVertices(vertices, count) {
|
||||
const positions = new Array(count * 2);
|
||||
const uvs = new Array(count * 2);
|
||||
for (let i = 0, p = 0; i < count; i++, p += 2) {
|
||||
const source = i * 8;
|
||||
positions[p] = vertices[source];
|
||||
positions[p + 1] = vertices[source + 1];
|
||||
uvs[p] = vertices[source + 6];
|
||||
uvs[p + 1] = vertices[source + 7];
|
||||
}
|
||||
return { positions, uvs };
|
||||
}
|
||||
|
||||
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;
|
||||
const c = triangles[i + 2] * 8;
|
||||
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.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);
|
||||
}
|
||||
}
|
||||
|
||||
function createLegacyRenderer(spine, context) {
|
||||
const Renderer = rendererConstructor(spine);
|
||||
if (!Renderer || !spine.SkeletonClipping) throw new Error('Spine Canvas 渲染器不完整');
|
||||
const base = new Renderer(context);
|
||||
base.triangleRendering = true;
|
||||
base.premultipliedAlpha = false;
|
||||
const clipper = new spine.SkeletonClipping();
|
||||
const dark = new spine.Color(0, 0, 0, 0);
|
||||
|
||||
base.draw = function drawWithClipping(skeleton) {
|
||||
const composite = context.globalCompositeOperation;
|
||||
const drawOrder = skeleton.drawOrder;
|
||||
const pma = !!base.premultipliedAlpha;
|
||||
try {
|
||||
for (let i = 0; i < drawOrder.length; i++) {
|
||||
const slot = drawOrder[i];
|
||||
if (slot.bone && slot.bone.active === false) {
|
||||
clipper.clipEndWithSlot(slot);
|
||||
continue;
|
||||
}
|
||||
const attachment = slot.getAttachment();
|
||||
if (attachment instanceof spine.ClippingAttachment) {
|
||||
clipper.clipStart(slot, attachment);
|
||||
continue;
|
||||
}
|
||||
|
||||
try {
|
||||
if (!attachment) continue;
|
||||
let vertices;
|
||||
let triangles;
|
||||
let vertexCount;
|
||||
if (attachment instanceof spine.RegionAttachment) {
|
||||
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, false);
|
||||
triangles = attachment.triangles;
|
||||
vertexCount = attachment.worldVerticesLength >> 1;
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
|
||||
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';
|
||||
if (clipper.isClipping()) {
|
||||
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, slot.darkColor);
|
||||
} else {
|
||||
drawInterleaved(base, image, vertices, triangles, slot.darkColor);
|
||||
}
|
||||
} finally {
|
||||
clipper.clipEndWithSlot(slot);
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
clipper.clipEnd();
|
||||
context.globalAlpha = 1;
|
||||
context.globalCompositeOperation = composite;
|
||||
}
|
||||
};
|
||||
base.clipper = clipper;
|
||||
return base;
|
||||
}
|
||||
|
||||
// 3.4/3.5 predate clipping attachments and compute packed vertices on attachments.
|
||||
function create34Renderer(spine, context) {
|
||||
const base = new (rendererConstructor(spine))(context);
|
||||
base.triangleRendering = true;
|
||||
base.premultipliedAlpha = false;
|
||||
base.draw = skeleton => {
|
||||
const composite = context.globalCompositeOperation;
|
||||
try {
|
||||
for (const slot of skeleton.drawOrder) {
|
||||
const attachment = slot.getAttachment();
|
||||
if (!(attachment instanceof spine.RegionAttachment) && !(attachment instanceof spine.MeshAttachment)) continue;
|
||||
const vertices = attachment.updateWorldVertices(slot, false);
|
||||
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';
|
||||
drawInterleaved(base, image, vertices, attachment instanceof spine.MeshAttachment ? attachment.triangles : QUAD_TRIANGLES);
|
||||
}
|
||||
} finally { context.globalAlpha = 1; context.globalCompositeOperation = composite; }
|
||||
};
|
||||
return base;
|
||||
}
|
||||
|
||||
function create43Renderer(spine, context) {
|
||||
const Renderer = rendererConstructor(spine);
|
||||
if (!Renderer || !spine.SkeletonRendererCore) throw new Error('Spine 4.3 Canvas 渲染器不完整');
|
||||
const base = new Renderer(context);
|
||||
base.triangleRendering = true;
|
||||
base.premultipliedAlpha = false;
|
||||
const core = new spine.SkeletonRendererCore();
|
||||
|
||||
base.draw = function drawWithCoreClipping(skeleton) {
|
||||
const composite = context.globalCompositeOperation;
|
||||
try {
|
||||
const pma = !!base.premultipliedAlpha;
|
||||
for (let command = core.render(skeleton, false); command; command = command.next) {
|
||||
const sourceImage = command.texture && command.texture.getImage && command.texture.getImage();
|
||||
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';
|
||||
const positions = command.positions;
|
||||
const uvs = command.uvs;
|
||||
const indices = command.indices;
|
||||
for (let i = 0; i < command.numIndices; i += 3) {
|
||||
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], colors, darkColors);
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
context.globalAlpha = 1;
|
||||
context.globalCompositeOperation = composite;
|
||||
}
|
||||
};
|
||||
base.clipper = core.clipping;
|
||||
return base;
|
||||
}
|
||||
|
||||
function createRenderer(spine, context, runtimeDir) {
|
||||
const renderer = (runtimeDir === '3.4' || runtimeDir === '3.5') ? create34Renderer(spine, context) : runtimeDir === '4.3'
|
||||
? create43Renderer(spine, context)
|
||||
: createLegacyRenderer(spine, context);
|
||||
// Explicitly disable debug drawing in every supported runtime.
|
||||
renderer.debugRendering = false;
|
||||
return require('./spine-webgl-rasterizer.js').attach(renderer, context);
|
||||
}
|
||||
|
||||
module.exports = { createRenderer };
|
||||
@@ -0,0 +1,250 @@
|
||||
'use strict';
|
||||
|
||||
// Adapted from Esoteric Software's 3.4/3.5/3.6/3.7 spine-libgdx SkeletonBinary.java.
|
||||
// Copyright (c) 2013-2019, Esoteric Software. See
|
||||
// LICENSES/Spine-Legacy-Binary-License.txt for the original license notices.
|
||||
// 3.4 source and license: LICENSES/Spine-3.4-License.txt.
|
||||
// 3.5 source and license: LICENSES/Spine-3.5-License.txt.
|
||||
// Decode the versioned wire format to an in-memory SkeletonJson object. The
|
||||
// matching runtime builds attachments/timelines and applies loader.scale once.
|
||||
|
||||
const dict = () => Object.create(null);
|
||||
class Input {
|
||||
constructor(bytes) {
|
||||
if (!ArrayBuffer.isView(bytes)) throw new Error('骨骼二进制数据必须为字节数组');
|
||||
this.view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
|
||||
this.offset = 0;
|
||||
}
|
||||
fail(message) { throw new Error('Spine 二进制解析失败（字节 ' + this.offset + '）：' + message); }
|
||||
need(n) { if (n < 0 || n > this.view.byteLength - this.offset) this.fail('文件截断或长度无效'); }
|
||||
byte() { this.need(1); return this.view.getUint8(this.offset++); }
|
||||
bool() { const b = this.byte(); if (b > 1) this.fail('无效布尔值'); return b === 1; }
|
||||
float() { this.need(4); const v = this.view.getFloat32(this.offset); this.offset += 4; if (!Number.isFinite(v)) this.fail('无效浮点数'); return v; }
|
||||
int() { this.need(4); const v = this.view.getInt32(this.offset); this.offset += 4; return v; }
|
||||
varint(positive = true) {
|
||||
let value = 0;
|
||||
for (let shift = 0; shift <= 28; shift += 7) {
|
||||
const b = this.byte();
|
||||
if (shift === 28 && (b & 240)) this.fail('无效变长整数');
|
||||
value |= (b & 127) << shift;
|
||||
if (!(b & 128)) return positive ? value : ((value >>> 1) ^ -(value & 1));
|
||||
}
|
||||
this.fail('无效变长整数');
|
||||
}
|
||||
count() { const n = this.varint(); this.need(n); return n; }
|
||||
string() {
|
||||
const size = this.varint();
|
||||
if (size === 0) return null;
|
||||
this.need(size - 1);
|
||||
const end = this.offset + size - 1;
|
||||
let result = '';
|
||||
// Old Spine exports use Java's 1/2/3-byte UTF-8 encoding of UTF-16
|
||||
// code units (including surrogate pairs), rather than string references.
|
||||
while (this.offset < end) {
|
||||
const b = this.byte();
|
||||
if (b < 128) result += String.fromCharCode(b);
|
||||
else {
|
||||
const extra = (b & 224) === 192 ? 1 : (b & 240) === 224 ? 2 : -1;
|
||||
if (extra < 0 || this.offset + extra > end) this.fail('无效字符串');
|
||||
let code = b & (extra === 1 ? 31 : 15);
|
||||
for (let i = 0; i < extra; i++) { const c = this.byte(); if ((c & 192) !== 128) this.fail('无效 UTF-8'); code = (code << 6) | (c & 63); }
|
||||
result += String.fromCharCode(code);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
color() { return (this.int() >>> 0).toString(16).padStart(8, '0'); }
|
||||
floats(n) { this.need(n * 4); return Array.from({ length: n }, () => this.float()); }
|
||||
shorts() { const n = this.count(); this.need(n * 2); return Array.from({ length: n }, () => { const v = this.view.getUint16(this.offset); this.offset += 2; return v; }); }
|
||||
ref(list) { const i = this.varint(); if (i < 0 || i >= list.length) this.fail('索引越界：' + i); return list[i]; }
|
||||
}
|
||||
|
||||
function decode(bytes, runtimeDir) {
|
||||
const r = new Input(bytes);
|
||||
const skeleton = { hash: r.string(), spine: r.string() };
|
||||
if (!/^3\.[4567]\./.test(skeleton.spine || '')) r.fail('仅支持 Spine 3.4 / 3.5 / 3.6 / 3.7');
|
||||
const version = skeleton.spine.slice(0, 3);
|
||||
if (runtimeDir && version !== runtimeDir) r.fail('骨骼版本与运行时不一致');
|
||||
const v37 = version === '3.7';
|
||||
const v34 = version === '3.4';
|
||||
const before36 = v34 || version === '3.5';
|
||||
skeleton.width = r.float(); skeleton.height = r.float();
|
||||
const nonessential = r.bool();
|
||||
if (nonessential) { if (!v34) skeleton.fps = r.float(); skeleton.images = r.string(); if (v37) skeleton.audio = r.string(); }
|
||||
const root = { skeleton, bones: [], slots: [], ik: [], transform: [], path: [], skins: dict(), events: dict(), animations: dict() };
|
||||
const boneName = () => r.ref(root.bones).name;
|
||||
const slotName = () => r.ref(root.slots).name;
|
||||
const fields = (obj, names) => { for (const name of names.split(' ')) obj[name] = r.float(); return obj; };
|
||||
const boneList = () => Array.from({ length: r.count() }, boneName);
|
||||
for (let i = 0, n = r.count(); i < n; i++) {
|
||||
const b = { name: r.string() }; if (i) b.parent = boneName();
|
||||
fields(b, 'rotation x y scaleX scaleY shearX shearY length');
|
||||
if (v34) { b.inheritRotation = r.bool(); b.inheritScale = r.bool(); }
|
||||
else b.transform = r.ref(['normal', 'onlyTranslation', 'noRotationOrReflection', 'noScale', 'noScaleOrReflection']);
|
||||
if (nonessential) b.color = r.color(); root.bones.push(b);
|
||||
}
|
||||
for (let i = 0, n = r.count(); i < n; i++) {
|
||||
const s = { name: r.string(), bone: boneName(), color: r.color() };
|
||||
if (!before36) { const dark = r.color(); if (dark !== 'ffffffff') s.dark = dark.slice(2); }
|
||||
s.attachment = r.string(); s.blend = r.ref(['normal', 'additive', 'multiply', 'screen']); root.slots.push(s);
|
||||
}
|
||||
for (let i = 0, n = r.count(); i < n; i++) {
|
||||
const c = { name: r.string(), order: v34 ? 0 : r.varint(), bones: boneList(), target: boneName(), mix: r.float(), bendPositive: r.byte() === 1 };
|
||||
if (v37) { c.compress = r.bool(); c.stretch = r.bool(); c.uniform = r.bool(); } root.ik.push(c);
|
||||
}
|
||||
for (let i = 0, n = r.count(); i < n; i++) {
|
||||
const c = { name: r.string(), order: v34 ? 0 : r.varint(), bones: boneList(), target: boneName() };
|
||||
if (!before36) { c.local = r.bool(); c.relative = r.bool(); }
|
||||
fields(c, 'rotation x y scaleX scaleY shearY rotateMix translateMix scaleMix shearMix'); root.transform.push(c);
|
||||
}
|
||||
for (let i = 0, n = r.count(); i < n; i++) {
|
||||
const c = { name: r.string(), order: v34 ? 0 : r.varint(), bones: boneList(), target: slotName(),
|
||||
positionMode: r.ref(['fixed', 'percent']), spacingMode: r.ref(['length', 'fixed', 'percent']), rotateMode: r.ref(['tangent', 'chain', 'chainScale']) };
|
||||
fields(c, 'rotation position spacing rotateMix translateMix'); root.path.push(c);
|
||||
}
|
||||
function vertices(n) {
|
||||
if (!r.bool()) return r.floats(n * 2);
|
||||
const out = [];
|
||||
for (let i = 0; i < n; i++) {
|
||||
const count = r.count(); if (!count) r.fail('加权顶点没有骨骼'); out.push(count);
|
||||
for (let j = 0; j < count; j++) { const index = r.varint(); if (index < 0 || index >= root.bones.length) r.fail('顶点骨骼索引越界'); out.push(index, r.float(), r.float(), r.float()); }
|
||||
}
|
||||
return out;
|
||||
}
|
||||
function attachment(key) {
|
||||
const a = { name: r.string() || key };
|
||||
const type = r.byte();
|
||||
if (before36 && type > 4) r.fail(version + ' 不支持此附件类型：' + type);
|
||||
a.type = ['region', 'boundingbox', 'mesh', 'linkedmesh', 'path', 'point', 'clipping'][type];
|
||||
if (!a.type) r.fail('未知附件类型：' + type);
|
||||
if (type === 0) {
|
||||
a.path = r.string() || a.name; fields(a, 'rotation x y scaleX scaleY width height'); a.color = r.color();
|
||||
} else if (type === 2) {
|
||||
a.path = r.string() || a.name; a.color = r.color(); const count = r.count();
|
||||
a.uvs = r.floats(count * 2); a.triangles = r.shorts();
|
||||
if (a.triangles.some(i => i >= count)) r.fail('网格三角形索引越界');
|
||||
a.vertices = vertices(count); a.hull = r.varint();
|
||||
if (nonessential) { a.edges = r.shorts(); fields(a, 'width height'); }
|
||||
} else if (type === 3) {
|
||||
a.path = r.string() || a.name; a.color = r.color(); const skin = r.string(); if (skin !== null) a.skin = skin;
|
||||
a.parent = r.string(); a.deform = r.bool(); if (nonessential) fields(a, 'width height');
|
||||
} else if (type === 5) {
|
||||
fields(a, 'rotation x y'); if (nonessential) a.color = r.color();
|
||||
} else {
|
||||
if (type === 4) { a.closed = r.bool(); a.constantSpeed = r.bool(); }
|
||||
if (type === 6) a.end = slotName();
|
||||
a.vertexCount = r.count(); a.vertices = vertices(a.vertexCount);
|
||||
if (type === 4) a.lengths = r.floats(Math.floor(a.vertexCount / 3));
|
||||
if (nonessential) a.color = r.color();
|
||||
}
|
||||
return a;
|
||||
}
|
||||
const skinNames = [];
|
||||
function skin(name, isDefault = false) {
|
||||
const count = r.count(); if (!count && isDefault) return;
|
||||
const data = root.skins[name] = dict(); skinNames.push(name);
|
||||
for (let i = 0; i < count; i++) {
|
||||
const attachments = data[slotName()] = dict();
|
||||
for (let j = 0, n = r.count(); j < n; j++) { const key = r.string(); attachments[key] = attachment(key); }
|
||||
}
|
||||
}
|
||||
skin('default', true);
|
||||
for (let i = 0, n = r.count(); i < n; i++) skin(r.string());
|
||||
const eventNames = [];
|
||||
for (let i = 0, n = r.count(); i < n; i++) {
|
||||
const name = r.string(); eventNames.push(name);
|
||||
const e = root.events[name] = { int: r.varint(false), float: r.float(), string: r.string() };
|
||||
if (v37) { e.audio = r.string(); if (e.audio !== null) fields(e, 'volume balance'); }
|
||||
}
|
||||
function curve(frame) {
|
||||
const type = r.byte();
|
||||
if (type === 1) frame.curve = 'stepped';
|
||||
else if (type === 2) frame.curve = r.floats(4);
|
||||
else if (type !== 0) r.fail('未知曲线类型：' + type);
|
||||
}
|
||||
function frames(read, curved = true) {
|
||||
const count = r.count(); if (!count) r.fail('空时间线');
|
||||
return Array.from({ length: count }, (_, i) => { const frame = { time: r.float() }; read(frame); if (curved && i < count - 1) curve(frame); return frame; });
|
||||
}
|
||||
function animation() {
|
||||
const a = { slots: dict(), bones: dict(), ik: dict(), transform: dict(), paths: dict(), deform: dict() };
|
||||
for (let i = 0, n = r.count(); i < n; i++) {
|
||||
const timelines = a.slots[slotName()] = dict();
|
||||
for (let j = 0, m = r.count(); j < m; j++) {
|
||||
const type = r.byte();
|
||||
if (type === 0) timelines.attachment = frames(f => { f.name = r.string(); }, false);
|
||||
else if (type === 1) timelines.color = frames(f => { f.color = r.color(); });
|
||||
else if (type === 2 && !before36) timelines.twoColor = frames(f => { f.light = r.color(); f.dark = r.color().slice(2); });
|
||||
else r.fail('未知插槽时间线');
|
||||
}
|
||||
}
|
||||
for (let i = 0, n = r.count(); i < n; i++) {
|
||||
const timelines = a.bones[boneName()] = dict();
|
||||
for (let j = 0, m = r.count(); j < m; j++) {
|
||||
const type = r.byte(), name = ['rotate', 'translate', 'scale', 'shear'][type];
|
||||
if (!name) r.fail('未知骨骼时间线');
|
||||
timelines[name] = frames(f => fields(f, type === 0 ? 'angle' : 'x y'));
|
||||
}
|
||||
}
|
||||
for (let i = 0, n = r.count(); i < n; i++) {
|
||||
const name = r.ref(root.ik).name;
|
||||
a.ik[name] = frames(f => { f.mix = r.float(); f.bendPositive = r.byte() === 1; if (v37) { f.compress = r.bool(); f.stretch = r.bool(); } });
|
||||
}
|
||||
for (let i = 0, n = r.count(); i < n; i++) {
|
||||
const name = r.ref(root.transform).name; a.transform[name] = frames(f => fields(f, 'rotateMix translateMix scaleMix shearMix'));
|
||||
}
|
||||
for (let i = 0, n = r.count(); i < n; i++) {
|
||||
const timelines = a.paths[r.ref(root.path).name] = dict();
|
||||
for (let j = 0, m = r.count(); j < m; j++) {
|
||||
const type = r.byte(), name = ['position', 'spacing', 'mix'][type]; if (!name) r.fail('未知路径时间线');
|
||||
timelines[name] = frames(f => fields(f, type === 2 ? 'rotateMix translateMix' : name));
|
||||
}
|
||||
}
|
||||
for (let i = 0, n = r.count(); i < n; i++) {
|
||||
const name = r.ref(skinNames), skinDeform = a.deform[name] = dict();
|
||||
for (let j = 0, m = r.count(); j < m; j++) {
|
||||
const slot = slotName(), slotDeform = skinDeform[slot] = dict();
|
||||
for (let k = 0, q = r.count(); k < q; k++) {
|
||||
const key = r.string();
|
||||
if (!root.skins[name][slot] || !root.skins[name][slot][key]) r.fail('变形附件不存在');
|
||||
slotDeform[key] = frames(f => { const length = r.count(); if (length) { f.offset = r.varint(); if (f.offset < 0 || f.offset > bytes.byteLength) r.fail('变形偏移越界'); f.vertices = r.floats(length); } });
|
||||
}
|
||||
}
|
||||
}
|
||||
const drawCount = r.count();
|
||||
if (drawCount) a.drawOrder = Array.from({ length: drawCount }, () => {
|
||||
const f = { time: r.float(), offsets: [] }; let previous = -1;
|
||||
for (let i = 0, n = r.count(); i < n; i++) {
|
||||
const index = r.varint(); const offset = r.varint();
|
||||
if (index <= previous || index >= root.slots.length || index + offset < 0 || index + offset >= root.slots.length) r.fail('绘制顺序索引越界');
|
||||
previous = index; f.offsets.push({ slot: root.slots[index].name, offset });
|
||||
}
|
||||
return f;
|
||||
});
|
||||
const eventCount = r.count();
|
||||
if (eventCount) a.events = Array.from({ length: eventCount }, () => {
|
||||
const e = { time: r.float(), name: r.ref(eventNames), int: r.varint(false), float: r.float() };
|
||||
const data = root.events[e.name]; e.string = r.bool() ? r.string() : data.string;
|
||||
if (v37 && data.audio !== null) fields(e, 'volume balance'); return e;
|
||||
});
|
||||
return a;
|
||||
}
|
||||
for (let i = 0, n = r.count(); i < n; i++) { const name = r.string(); root.animations[name] = animation(); }
|
||||
if (r.offset !== r.view.byteLength) r.fail('文件含未识别的尾部数据');
|
||||
return root;
|
||||
}
|
||||
|
||||
function install(spine, runtimeDir) {
|
||||
if (!['3.4', '3.5', '3.6', '3.7'].includes(runtimeDir)) return spine;
|
||||
if (runtimeDir === '3.4') spine.AtlasAttachmentLoader = spine.TextureAtlasAttachmentLoader;
|
||||
spine.SkeletonBinary = class SkeletonBinary {
|
||||
constructor(attachmentLoader) { this.attachmentLoader = attachmentLoader; this.scale = 1; }
|
||||
readSkeletonData(bytes) {
|
||||
const loader = new spine.SkeletonJson(this.attachmentLoader); loader.scale = this.scale;
|
||||
return loader.readSkeletonData(decode(bytes, runtimeDir));
|
||||
}
|
||||
};
|
||||
return spine;
|
||||
}
|
||||
|
||||
module.exports = { install, decode };
|
||||
@@ -0,0 +1,58 @@
|
||||
'use strict';
|
||||
|
||||
// Eagle's item API has no arbitrary custom fields. Keep plugin metadata in
|
||||
// userData, keyed by library + item ID, without editing Eagle metadata.json.
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const crypto = require('crypto');
|
||||
|
||||
function identity(sourcePath, itemId) {
|
||||
const directory = path.dirname(path.resolve(sourcePath));
|
||||
const match = path.basename(directory).match(/^(.+)\.info$/i);
|
||||
return match
|
||||
? path.dirname(directory) + ':' + (itemId || match[1])
|
||||
: path.resolve(sourcePath);
|
||||
}
|
||||
|
||||
function createStore(userDataPath, sourcePath, itemId) {
|
||||
const key = crypto.createHash('sha256').update(identity(sourcePath, itemId)).digest('hex');
|
||||
const directory = path.join(userDataPath, 'SpineViewer', 'preview-settings');
|
||||
const file = path.join(directory, key + '.json');
|
||||
return {
|
||||
file,
|
||||
read() {
|
||||
try {
|
||||
const data = JSON.parse(fs.readFileSync(file, 'utf8'));
|
||||
return typeof data.premultipliedAlpha === 'boolean' ? data.premultipliedAlpha : undefined;
|
||||
} catch (e) {
|
||||
if (e.code === 'ENOENT') return undefined;
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
// This method is called only by the user's checkbox change event.
|
||||
write(premultipliedAlpha) {
|
||||
if (typeof premultipliedAlpha !== 'boolean') throw new TypeError('预乘设置必须为布尔值');
|
||||
fs.mkdirSync(directory, { recursive: true });
|
||||
const temp = file + '.' + crypto.randomBytes(8).toString('hex') + '.tmp';
|
||||
try {
|
||||
fs.writeFileSync(temp, JSON.stringify({ premultipliedAlpha }, null, 2) + '\n', { flag: 'wx' });
|
||||
fs.renameSync(temp, file);
|
||||
} finally {
|
||||
try { fs.unlinkSync(temp); } catch (e) { if (e.code !== 'ENOENT') throw e; }
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function resolveDataPath(app) {
|
||||
try {
|
||||
const value = app && (app.userDataPath || (typeof app.getPath === 'function' && await app.getPath('userData')));
|
||||
if (typeof value === 'string' && value) return value;
|
||||
} catch (e) { /* Some Eagle format-view windows reject app.getPath IPC. */ }
|
||||
const home = require('os').homedir();
|
||||
if (process.platform === 'darwin') return path.join(home, 'Library', 'Application Support', 'Eagle');
|
||||
if (process.platform === 'win32') return path.join(process.env.APPDATA || path.join(home, 'AppData', 'Roaming'), 'Eagle');
|
||||
return path.join(process.env.XDG_CONFIG_HOME || path.join(home, '.config'), 'Eagle');
|
||||
}
|
||||
|
||||
module.exports = { createStore, resolveDataPath };
|
||||
@@ -0,0 +1,85 @@
|
||||
'use strict';
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const os = require('os');
|
||||
const crypto = require('crypto');
|
||||
const { spawn } = require('child_process');
|
||||
const utils = require('./spine-utils');
|
||||
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
function enqueue(src) {
|
||||
const library = utils.findLibraryRoot(src);
|
||||
if (!library) return; // Standalone tests/previews do not need Eagle refresh.
|
||||
const key = crypto.createHash('sha256').update(__dirname + library).digest('hex');
|
||||
const directory = path.join(os.tmpdir(), 'spineviewer-reconcile', key);
|
||||
fs.mkdirSync(directory, { recursive: true });
|
||||
const job = path.join(directory, crypto.createHash('sha256').update(src).digest('hex') + '.json');
|
||||
const temp = job + '.' + crypto.randomBytes(8).toString('hex') + '.tmp';
|
||||
fs.writeFileSync(temp, JSON.stringify({ src, deadline: Date.now() + 120000 }));
|
||||
fs.renameSync(temp, job);
|
||||
// Electron's Node mode runs the local worker without opening another Eagle.
|
||||
const child = spawn(process.execPath, [__filename, directory], {
|
||||
detached: true, stdio: 'ignore', env: { ...process.env, ELECTRON_RUN_AS_NODE: '1' }
|
||||
});
|
||||
child.on('error', error => {
|
||||
try { fs.appendFileSync(path.join(__dirname, '../thumbnails.log'), '[worker] ' + String(error) + '\n'); } catch (_) {}
|
||||
});
|
||||
child.unref();
|
||||
}
|
||||
|
||||
async function run(directory) {
|
||||
const lock = path.join(directory, 'worker.lock');
|
||||
let fd;
|
||||
try { fd = fs.openSync(lock, 'wx'); }
|
||||
catch (error) {
|
||||
if (error.code !== 'EEXIST') throw error;
|
||||
let pid;
|
||||
try { pid = Number(fs.readFileSync(lock, 'utf8')); } catch (_) { return; }
|
||||
if (!pid) return; // Another worker is still writing its lock.
|
||||
try { process.kill(pid, 0); return; } catch (e) { if (e.code !== 'ESRCH') return; }
|
||||
try { fs.unlinkSync(lock); } catch (_) { return; }
|
||||
return run(directory);
|
||||
}
|
||||
fs.writeFileSync(fd, String(process.pid)); fs.closeSync(fd);
|
||||
const snapshots = new Map();
|
||||
const nextChecks = new Map();
|
||||
const thumbnail = require('../thumbnail/spine');
|
||||
try {
|
||||
let idle = 0;
|
||||
while (idle < 2) {
|
||||
await sleep(1000); // Allow the importing callback/window to finish.
|
||||
const jobs = fs.readdirSync(directory).filter(name => name.endsWith('.json'));
|
||||
if (!jobs.length) { idle++; continue; }
|
||||
idle = 0;
|
||||
for (const name of jobs) {
|
||||
const file = path.join(directory, name);
|
||||
let raw;
|
||||
try {
|
||||
raw = fs.readFileSync(file, 'utf8');
|
||||
const job = JSON.parse(raw);
|
||||
if (Date.now() < (nextChecks.get(name) || 0)) continue;
|
||||
const remaining = job.deadline - Date.now();
|
||||
nextChecks.set(name, Date.now() + (remaining > 110000 ? 1000 : remaining > 80000 ? 2500 : 5000));
|
||||
const result = Date.now() > job.deadline ? { complete: true }
|
||||
: await thumbnail.reconcileOnce(job.src, snapshots.get(name));
|
||||
snapshots.set(name, result.signature);
|
||||
if (result.complete && fs.readFileSync(file, 'utf8') === raw) {
|
||||
fs.unlinkSync(file); snapshots.delete(name); nextChecks.delete(name);
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.code !== 'ENOENT') fs.appendFileSync(path.join(__dirname, '../thumbnails.log'), '[worker] ' + String(error) + '\n');
|
||||
}
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
fs.unlinkSync(lock);
|
||||
// Cover an enqueue racing the final idle check and lock release.
|
||||
if (fs.readdirSync(directory).some(name => name.endsWith('.json'))) await run(directory);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { enqueue, run };
|
||||
if (require.main === module) run(process.argv[2]).catch(error => {
|
||||
try { fs.appendFileSync(path.join(__dirname, '../thumbnails.log'), '[worker] ' + String(error) + '\n'); } catch (_) {}
|
||||
process.exitCode = 1;
|
||||
});
|
||||
@@ -0,0 +1,217 @@
|
||||
/**
|
||||
* SpineViewer - 缩略图渲染模块（仅 Node 环境使用）
|
||||
* 在纯 Node 中加载本地 Spine 运行时（通过 vm 注入到 global.spine），
|
||||
* 使用 @napi-rs/canvas 光栅化骨骼的 setup pose / 首帧动画，输出 PNG buffer。
|
||||
*/
|
||||
const fs = require('fs');
|
||||
const vm = require('vm');
|
||||
const path = require('path');
|
||||
const utils = require('./spine-utils.js');
|
||||
const spineBadge = require('./spine-badge.js');
|
||||
|
||||
let canvasLib = null;
|
||||
try {
|
||||
canvasLib = require('@napi-rs/canvas');
|
||||
} catch (e) {
|
||||
canvasLib = null;
|
||||
}
|
||||
|
||||
let spineBadgePromise = null;
|
||||
|
||||
/** 在缩略图右下角绘制官方 Spine badge，仅等比缩放，不改变官方图形。 */
|
||||
async function drawSpineBadge(ctx, width, height) {
|
||||
if (!canvasLib || !ctx) return;
|
||||
try {
|
||||
if (!spineBadgePromise) {
|
||||
spineBadgePromise = canvasLib.loadImage(spineBadge.path);
|
||||
}
|
||||
const badge = await spineBadgePromise;
|
||||
const badgeSize = Math.max(44, Math.round(Math.min(width, height) * 0.15));
|
||||
const margin = Math.max(10, Math.round(badgeSize * 0.2));
|
||||
ctx.drawImage(badge, width - badgeSize - margin, height - badgeSize - margin, badgeSize, badgeSize);
|
||||
} catch (e) { /* 缺少 badge 时不影响缩略图主体 */ }
|
||||
}
|
||||
|
||||
/**
|
||||
* 在隔离的 vm 上下文中加载本地 Spine 运行时，返回 spine 命名空间对象。
|
||||
* 使用独立上下文可避免不同版本运行时的全局变量/类相互污染（例如 4.x 与 3.x
|
||||
* 的 BinaryInput、DataView 等），因此不会跨版本混用。
|
||||
*/
|
||||
function loadRuntime(dir) {
|
||||
const code = fs.readFileSync(path.join(__dirname, '..', 'lib', dir, 'spine-canvas.js'), 'utf8');
|
||||
const sandbox = {
|
||||
console,
|
||||
setTimeout,
|
||||
clearTimeout,
|
||||
setInterval,
|
||||
clearInterval,
|
||||
performance: { now: () => Date.now() },
|
||||
};
|
||||
// 部分运行时通过 window/self/globalThis 访问全局
|
||||
sandbox.window = sandbox;
|
||||
sandbox.self = sandbox;
|
||||
sandbox.globalThis = sandbox;
|
||||
vm.createContext(sandbox);
|
||||
vm.runInContext(code, sandbox, { filename: 'lib/' + dir + '/spine-canvas.js' });
|
||||
return require('./spine-legacy-binary.js').install(sandbox.spine, dir);
|
||||
}
|
||||
|
||||
/** 构造 TextureAtlas 并挂载贴图（跨版本兼容）。
|
||||
* texturePaths: { atlas 中引用的贴图名 -> 绝对路径 }，用于跨 Eagle item 文件夹解析贴图。
|
||||
*/
|
||||
function buildTextureAtlas(spine, atlasText, dir, texturePaths) {
|
||||
if (!canvasLib) throw new Error('@napi-rs/canvas 不可用');
|
||||
return new Promise((resolve, reject) => {
|
||||
(async () => {
|
||||
// 解析所有页面贴图名，并预先异步加载
|
||||
let pageNames = [];
|
||||
try { pageNames = utils.parseAtlasPages(atlasText); } catch (e) { pageNames = []; }
|
||||
|
||||
const textureMap = {};
|
||||
await Promise.all(pageNames.map(async (name) => {
|
||||
// 优先使用跨文件夹解析出的绝对路径，否则回退到 atlas 同目录
|
||||
const p = (texturePaths && texturePaths[name]) ? texturePaths[name] : path.join(dir, name);
|
||||
if (!fs.existsSync(p)) return;
|
||||
try {
|
||||
const img = await canvasLib.loadImage(p);
|
||||
textureMap[name] = img;
|
||||
} catch (e) { /* ignore */ }
|
||||
}));
|
||||
|
||||
const makeTexture = (name) => {
|
||||
let img = textureMap[name];
|
||||
if (!img) {
|
||||
// 找不到图片时用 2x2 灰色占位纹理
|
||||
const c = canvasLib.createCanvas(2, 2);
|
||||
const cx = c.getContext('2d');
|
||||
cx.fillStyle = '#888888';
|
||||
cx.fillRect(0, 0, 2, 2);
|
||||
img = c;
|
||||
}
|
||||
if (spine.CanvasTexture) return new spine.CanvasTexture(img);
|
||||
if (spine.canvas && spine.canvas.CanvasTexture) return new spine.canvas.CanvasTexture(img);
|
||||
return new spine.Texture(img);
|
||||
};
|
||||
|
||||
let atlas;
|
||||
const is4x = typeof spine.TextureAtlas === 'function' && spine.TextureAtlas.length <= 1;
|
||||
if (is4x) {
|
||||
atlas = new spine.TextureAtlas(atlasText);
|
||||
for (const page of atlas.pages) {
|
||||
const tex = makeTexture(page.name);
|
||||
if (page.setTexture) page.setTexture(tex);
|
||||
else page.texture = tex;
|
||||
}
|
||||
} else {
|
||||
atlas = new spine.TextureAtlas(atlasText, (name) => makeTexture(name));
|
||||
}
|
||||
resolve(atlas);
|
||||
})().catch(reject);
|
||||
});
|
||||
}
|
||||
|
||||
/** 读取骨骼数据（json 或二进制） */
|
||||
function readSkeletonData(spine, skeletonPath, atlas, isBinary) {
|
||||
const atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
||||
if (isBinary) {
|
||||
const loader = new spine.SkeletonBinary(atlasLoader);
|
||||
loader.scale = 1;
|
||||
const buf = fs.readFileSync(skeletonPath);
|
||||
return loader.readSkeletonData(new Uint8Array(buf));
|
||||
} else {
|
||||
const loader = new spine.SkeletonJson(atlasLoader);
|
||||
loader.scale = 1;
|
||||
const text = fs.readFileSync(skeletonPath, 'utf8');
|
||||
return loader.readSkeletonData(text);
|
||||
}
|
||||
}
|
||||
|
||||
/** 计算包围盒（跨版本兼容） */
|
||||
function getBounds(spine, skeleton) {
|
||||
try {
|
||||
if (skeleton.getBoundsRect) {
|
||||
const r = skeleton.getBoundsRect();
|
||||
if (r && r.width !== undefined) return { x: r.x, y: r.y, width: r.width, height: r.height };
|
||||
}
|
||||
if (skeleton.getBounds) {
|
||||
const offset = new spine.Vector2();
|
||||
const size = new spine.Vector2();
|
||||
skeleton.getBounds(offset, size, []);
|
||||
if (size.x > 0 || size.y > 0) return { x: offset.x, y: offset.y, width: size.x, height: size.y };
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染首帧动画到 PNG buffer。
|
||||
* @returns {Promise<Buffer>}
|
||||
*/
|
||||
async function renderThumbnail({ skeletonPath, atlasPath, texturePaths, version, runtimeDir, size = 400 }) {
|
||||
if (!canvasLib) throw new Error('@napi-rs/canvas 不可用');
|
||||
const isBinary = /\.skel(\.bytes)?$/i.test(skeletonPath);
|
||||
const dir = path.dirname(skeletonPath);
|
||||
const atlasText = fs.readFileSync(atlasPath, 'utf8');
|
||||
const premultipliedAlpha = utils.parseAtlasPma(atlasText) === true;
|
||||
|
||||
const spine = loadRuntime(runtimeDir);
|
||||
const atlas = await buildTextureAtlas(spine, atlasText, dir, texturePaths);
|
||||
const skeletonData = readSkeletonData(spine, skeletonPath, atlas, isBinary);
|
||||
|
||||
if (!skeletonData || !skeletonData.bones || skeletonData.bones.length === 0) {
|
||||
const name = path.basename(skeletonPath);
|
||||
throw new Error('骨骼数据为空：' + name);
|
||||
}
|
||||
const skeleton = new spine.Skeleton(skeletonData);
|
||||
utils.applySkin(skeleton, utils.preferredSkin(skeletonData));
|
||||
|
||||
// 计算所有动画的包围盒，取最合适的姿态用于缩略图。
|
||||
// 默认使用 setup pose（编辑器内的标准站姿），保证缩略图稳定、接近编辑视图。
|
||||
let bounds = null;
|
||||
if (skeleton.setToSetupPose) skeleton.setToSetupPose();
|
||||
if (skeleton.updateWorldTransform) {
|
||||
if (spine.Physics && spine.Physics.update !== undefined) skeleton.updateWorldTransform(spine.Physics.update);
|
||||
else skeleton.updateWorldTransform();
|
||||
}
|
||||
bounds = getBounds(spine, skeleton);
|
||||
|
||||
const cw = size, ch = size;
|
||||
const canvas = canvasLib.createCanvas(cw, ch);
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.fillStyle = '#1e1e1e';
|
||||
ctx.fillRect(0, 0, cw, ch);
|
||||
|
||||
if (bounds && bounds.width > 0 && bounds.height > 0) {
|
||||
const pad = 0.1;
|
||||
const scale = Math.min((cw * (1 - pad * 2)) / bounds.width, (ch * (1 - pad * 2)) / bounds.height);
|
||||
// Spine 世界坐标 Y 轴向上，而 Canvas 2D Y 轴向下，需翻转 Y。
|
||||
const cx = bounds.x + bounds.width / 2;
|
||||
const cy = bounds.y + bounds.height / 2;
|
||||
ctx.save();
|
||||
ctx.translate(cw / 2, ch / 2);
|
||||
ctx.scale(scale, -scale);
|
||||
ctx.translate(-cx, -cy);
|
||||
|
||||
let renderer = null;
|
||||
try { renderer = require('./spine-canvas-clipping.js').createRenderer(spine, ctx, runtimeDir); }
|
||||
catch (e) {
|
||||
if (spine.canvas && spine.canvas.SkeletonRenderer) renderer = new spine.canvas.SkeletonRenderer(ctx);
|
||||
else if (spine.SkeletonRenderer) renderer = new spine.SkeletonRenderer(ctx);
|
||||
}
|
||||
if (renderer) {
|
||||
// 使用三角渲染，正确处理 mesh 附件（如角色身体的网格）
|
||||
if ('triangleRendering' in renderer) renderer.triangleRendering = true;
|
||||
renderer.premultipliedAlpha = premultipliedAlpha;
|
||||
renderer.draw(skeleton);
|
||||
if (renderer.dispose) renderer.dispose();
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
await drawSpineBadge(ctx, cw, ch);
|
||||
spineBadge.drawVersion(ctx, cw, ch, skeletonData.version || version);
|
||||
const buf = canvas.toBuffer('image/png');
|
||||
return buf;
|
||||
}
|
||||
|
||||
module.exports = { renderThumbnail, loadRuntime, buildTextureAtlas, readSkeletonData, getBounds, drawSpineBadge, canvasLib };
|
||||
@@ -0,0 +1,714 @@
|
||||
/**
|
||||
* SpineViewer - 工具模块
|
||||
* 该模块为纯 Node.js CommonJS，供 viewer/thumbnail 复用。
|
||||
* 职责：
|
||||
* - 识别 Spine 导出文件的类型（skel/skel.bytes/json/atlas/atlas.txt/png/jpg/jpeg/webp）
|
||||
* - 在同一个目录内自动关联配套的骨骼文件、atlas、贴图
|
||||
* - 从骨骼数据中检测 Spine 版本
|
||||
* - 根据版本选择合适的本地运行时
|
||||
*/
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const SKELETON_EXTS = ['.skel', '.skel.bytes', '.json'];
|
||||
const ATLAS_EXTS = ['.atlas', '.atlas.txt'];
|
||||
const TEXTURE_EXTS = ['.png', '.jpg', '.jpeg', '.webp'];
|
||||
const ALL_EXTS = SKELETON_EXTS.concat(ATLAS_EXTS, TEXTURE_EXTS);
|
||||
const fileIndexCache = new Map();
|
||||
const skeletonJsonCache = new Map();
|
||||
const JSON_PROBE_BYTES = 256 * 1024;
|
||||
|
||||
// Spine 导出常见的后缀，匹配时归一化掉
|
||||
const SUFFIX_RE = /-(pro|ess|pma|base|atlas|_pma|_pro|_ess)$/i;
|
||||
|
||||
function extOf(name) {
|
||||
const lower = name.toLowerCase();
|
||||
for (let i = 0; i < SKELETON_EXTS.length; i++) {
|
||||
if (lower.endsWith(SKELETON_EXTS[i])) return SKELETON_EXTS[i];
|
||||
}
|
||||
for (let i = 0; i < ATLAS_EXTS.length; i++) {
|
||||
if (lower.endsWith(ATLAS_EXTS[i])) return ATLAS_EXTS[i];
|
||||
}
|
||||
for (let i = 0; i < TEXTURE_EXTS.length; i++) {
|
||||
if (lower.endsWith(TEXTURE_EXTS[i])) return TEXTURE_EXTS[i];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function isSkeletonFile(name) {
|
||||
const ext = extOf(name);
|
||||
return ext === '.skel' || ext === '.skel.bytes' || ext === '.json';
|
||||
}
|
||||
|
||||
function isAtlasFile(name) {
|
||||
const ext = extOf(name);
|
||||
return ext === '.atlas' || ext === '.atlas.txt';
|
||||
}
|
||||
|
||||
function isTextureFile(name) {
|
||||
const ext = extOf(name);
|
||||
return TEXTURE_EXTS.indexOf(ext) !== -1;
|
||||
}
|
||||
|
||||
/** 去掉文件名中的扩展名 */
|
||||
function stemOf(name) {
|
||||
const ext = extOf(name);
|
||||
if (!ext) return name;
|
||||
return name.slice(0, name.length - ext.length);
|
||||
}
|
||||
|
||||
/** 归一化 stem，去掉 Spine 常见后缀，用于跨文件匹配 */
|
||||
function normalizeStem(name) {
|
||||
return stemOf(name).toLowerCase().replace(SUFFIX_RE, '');
|
||||
}
|
||||
|
||||
/** 从 JSON 文本中读取 spine 版本 */
|
||||
function detectVersionFromJson(text) {
|
||||
try {
|
||||
const json = JSON.parse(text);
|
||||
if (json && json.skeleton && json.skeleton.spine) {
|
||||
return String(json.skeleton.spine);
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
return null;
|
||||
}
|
||||
|
||||
/** 从二进制数据中读取 spine 版本（扫描前若干字节中的版本号） */
|
||||
function detectVersionFromBuffer(buf) {
|
||||
let s = '';
|
||||
const bytes = new Uint8Array(buf);
|
||||
const len = Math.min(bytes.length, 160);
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
const m = s.match(/(\d+\.\d+(?:\.\d+)?)/);
|
||||
return m ? m[1] : null;
|
||||
}
|
||||
|
||||
/** 从文件读取 spine 版本 */
|
||||
function detectVersion(filePath) {
|
||||
const lower = filePath.toLowerCase();
|
||||
if (lower.endsWith('.json')) {
|
||||
return detectVersionFromJson(fs.readFileSync(filePath, 'utf8'));
|
||||
}
|
||||
return detectVersionFromBuffer(fs.readFileSync(filePath));
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据检测到的版本与文件类型，选择本地运行时目录。
|
||||
* - 3.4–3.7 二进制通过本地兼容解析器加载，始终使用对应版本运行时
|
||||
*/
|
||||
function chooseRuntimeDir(version, isBinary) {
|
||||
if (!version) return null;
|
||||
const major = parseInt(version.split('.')[0], 10);
|
||||
if (major === 3) {
|
||||
const minor = parseFloat(version);
|
||||
if (minor === 3.4) return '3.4';
|
||||
if (minor === 3.5) return '3.5';
|
||||
if (minor <= 3.6) return '3.6';
|
||||
if (minor <= 3.7 + 0.0001) return '3.7';
|
||||
return '3.8';
|
||||
} else if (major === 4) {
|
||||
const minor = parseFloat(version);
|
||||
if (minor <= 4.0 + 0.0001) return '4.0';
|
||||
if (minor <= 4.1 + 0.0001) return '4.1';
|
||||
if (minor <= 4.2 + 0.0001) return '4.2';
|
||||
return '4.3';
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 快速区分 Spine JSON、普通 JSON 和仍在写入的 JSON。
|
||||
* 仅以 Spine 官方导出的 `skeleton.spine` 版本字段作为肯定标识；bones/slots 等
|
||||
* 通用字段不能证明文件来自 Spine。大文件只探测前 256KB。
|
||||
*/
|
||||
function classifySkeletonJson(filePath) {
|
||||
try {
|
||||
const stat = fs.statSync(filePath);
|
||||
if (!stat.isFile() || stat.size === 0) return 'pending';
|
||||
const signature = stat.size + ':' + Math.round(stat.mtimeMs);
|
||||
const cached = skeletonJsonCache.get(filePath);
|
||||
if (cached && cached.signature === signature) return cached.kind;
|
||||
|
||||
const length = Math.min(stat.size, JSON_PROBE_BYTES);
|
||||
const fd = fs.openSync(filePath, 'r');
|
||||
const buffer = Buffer.allocUnsafe(length);
|
||||
try { fs.readSync(fd, buffer, 0, length, 0); } finally { fs.closeSync(fd); }
|
||||
const text = buffer.toString('utf8');
|
||||
const hasSkeletonKey = /"skeleton"\s*:/i.test(text);
|
||||
const versionMatch = text.match(/"skeleton"\s*:\s*\{[\s\S]{0,8192}?"spine"\s*:\s*"(\d+\.\d+(?:\.\d+)?(?:[^"\\]|\\.)*)"/i);
|
||||
let kind;
|
||||
if (versionMatch) {
|
||||
kind = 'spine';
|
||||
} else if (stat.size > JSON_PROBE_BYTES) {
|
||||
kind = 'other';
|
||||
} else {
|
||||
try {
|
||||
JSON.parse(text);
|
||||
kind = 'other';
|
||||
} catch (e) {
|
||||
// 只有已经出现 skeleton 键但文件尚未完整写入时才继续短暂等待。
|
||||
// JSONC、配置文件或损坏的普通 JSON 不应进入 Spine 补刷流程。
|
||||
kind = hasSkeletonKey ? 'pending' : 'other';
|
||||
}
|
||||
}
|
||||
|
||||
if (skeletonJsonCache.size > 2048) skeletonJsonCache.clear();
|
||||
skeletonJsonCache.set(filePath, { signature, kind });
|
||||
return kind;
|
||||
} catch (e) {
|
||||
return 'pending';
|
||||
}
|
||||
}
|
||||
|
||||
function looksLikeSkeletonJson(filePath) {
|
||||
return classifySkeletonJson(filePath) === 'spine';
|
||||
}
|
||||
|
||||
/** 文件修改时间（毫秒） */
|
||||
function mtimeOf(fp) {
|
||||
try { return fs.statSync(fp).mtimeMs; } catch (e) { return 0; }
|
||||
}
|
||||
|
||||
/** 读取某 item 元数据里的创建时间 btime（毫秒），用于按“同一批导入”配对 */
|
||||
function btimeOf(fp) {
|
||||
const d = itemMeta(path.dirname(fp));
|
||||
return (d && d.btime) || 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Eagle item 的实际入库时间。
|
||||
* metadata.json 的 birthtime 在生成缩略图、修改标签后也不会改变，比素材自身的
|
||||
* btime/mtime 更适合判断多个独立 .info 项是否来自同一次拖入。
|
||||
*/
|
||||
function importTimeOf(fp) {
|
||||
try {
|
||||
const metaPath = path.join(path.dirname(fp), 'metadata.json');
|
||||
const stat = fs.statSync(metaPath);
|
||||
return stat.birthtimeMs || stat.ctimeMs || stat.mtimeMs || 0;
|
||||
} catch (e) {
|
||||
return btimeOf(fp);
|
||||
}
|
||||
}
|
||||
|
||||
/** 骨骼版本所属家族（3x / 4x），atlas 格式按版本家族区分 */
|
||||
function versionFamily(version) {
|
||||
if (!version) return null;
|
||||
const major = parseInt(version.split('.')[0], 10);
|
||||
return major <= 3 ? '3x' : '4x';
|
||||
}
|
||||
|
||||
/** 根据 atlas 文本判断其格式家族（3x / 4x） */
|
||||
function atlasFamily(atlasText) {
|
||||
if (!atlasText) return null;
|
||||
// 4.x atlas 用 `bounds:` 定义区域；3.x 用 `xy:`/`size:`/`orig:`/`offset:`。
|
||||
// 注意：`scale:` 在 3.x 也会出现（如字体缩放），不能单独作为 4x 依据。
|
||||
// 因此以 `bounds:` 作为最可靠的 4.x 标志；若整体含 `xy:` 判定为 3x。
|
||||
if (/\bbounds\s*:/.test(atlasText)) return '4x';
|
||||
if (/\bxy\s*:/.test(atlasText)) return '3x';
|
||||
return '3x';
|
||||
}
|
||||
|
||||
/** 读取某 item 文件夹的 metadata.json（含 folders、isDeleted、btime 等） */
|
||||
function itemMeta(itemDir) {
|
||||
if (!itemDir) return null;
|
||||
try {
|
||||
return JSON.parse(fs.readFileSync(path.join(itemDir, 'metadata.json'), 'utf8'));
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/** 读取某个资产文件所属 item 文件夹的 Eagle 逻辑文件夹 id 列表 */
|
||||
function foldersOfItem(filePath) {
|
||||
const d = itemMeta(path.dirname(filePath));
|
||||
return d && Array.isArray(d.folders) ? d.folders : [];
|
||||
}
|
||||
|
||||
/** 判断某 item 是否已被放入 Eagle 回收站（isDeleted） */
|
||||
function isItemDeleted(filePath) {
|
||||
const d = itemMeta(path.dirname(filePath));
|
||||
return !!(d && d.isDeleted);
|
||||
}
|
||||
|
||||
/** 从任意 item 路径向上定位 Eagle 库根目录 */
|
||||
function findLibraryRoot(filePath) {
|
||||
let dir = path.dirname(filePath); // item 文件夹
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const parent = path.dirname(dir);
|
||||
if (parent === dir) break;
|
||||
try {
|
||||
if (fs.existsSync(path.join(parent, 'metadata.json')) && fs.existsSync(path.join(parent, 'images'))) {
|
||||
return parent;
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
dir = parent;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/** 解析库根 metadata.json，返回 { folderId -> children[] } 及文件夹名 */
|
||||
function readFolderInfo(libRoot) {
|
||||
const map = {};
|
||||
const names = {};
|
||||
if (!libRoot) return { map, names };
|
||||
try {
|
||||
const d = JSON.parse(fs.readFileSync(path.join(libRoot, 'metadata.json'), 'utf8'));
|
||||
const folders = d.folders || [];
|
||||
for (const f of folders) {
|
||||
if (!f) continue;
|
||||
map[f.id] = Array.isArray(f.children) ? f.children : [];
|
||||
names[f.id] = f.name || '';
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
return { map, names };
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算允许匹配的 Eagle 文件夹 id 集合：
|
||||
* 仅包含「选中文件所在的文件夹」本身，不下钻子文件夹，也不匹配父级/兄弟文件夹。
|
||||
*/
|
||||
function getValidFolders(filePath) {
|
||||
const itemFolders = foldersOfItem(filePath);
|
||||
if (itemFolders.length === 0) return null; // 未归入任何 Eagle 文件夹，则不限定
|
||||
return new Set(itemFolders);
|
||||
}
|
||||
|
||||
/** 判断目录是否为 Eagle 的 item 元数据文件夹（包含 metadata.json） */
|
||||
function isEagleItemDir(dir) {
|
||||
try { return fs.existsSync(path.join(dir, 'metadata.json')); } catch (e) { return false; }
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算需要搜索的目录列表。
|
||||
* Eagle 会把导入的每个文件拆分成独立的元数据文件夹（如 `images/<id>.info/`），
|
||||
* 因此配套的骨骼/atlas/贴图可能位于不同的 item 文件夹中。
|
||||
* 返回：当前 item 文件夹 + 其同级的所有 item 文件夹。
|
||||
*/
|
||||
function getSearchRoots(filePath) {
|
||||
const roots = [];
|
||||
const itemDir = path.dirname(filePath);
|
||||
roots.push(itemDir);
|
||||
if (isEagleItemDir(itemDir)) {
|
||||
const parent = path.dirname(itemDir);
|
||||
try {
|
||||
for (const name of fs.readdirSync(parent)) {
|
||||
const sub = path.join(parent, name);
|
||||
try {
|
||||
if (fs.statSync(sub).isDirectory() && isEagleItemDir(sub)) {
|
||||
roots.push(sub);
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
}
|
||||
return [...new Set(roots)];
|
||||
}
|
||||
|
||||
/** 把库根目录 images/ 下所有 item 文件夹加入搜索根（去重）。
|
||||
* 用于覆盖同伴位于不同 .info / 跨批次的情况（全库兜底）。 */
|
||||
function buildRootsWithLibraryRoot(filePath, roots) {
|
||||
const libRoot = findLibraryRoot(filePath);
|
||||
if (!libRoot) return;
|
||||
const imagesDir = path.join(libRoot, 'images');
|
||||
try {
|
||||
if (!fs.existsSync(imagesDir)) return;
|
||||
for (const name of fs.readdirSync(imagesDir)) {
|
||||
const sub = path.join(imagesDir, name);
|
||||
try {
|
||||
if (fs.statSync(sub).isDirectory() && isEagleItemDir(sub)) {
|
||||
if (roots.indexOf(sub) === -1) roots.push(sub);
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
}
|
||||
|
||||
/**
|
||||
* 在多个目录中收集所有 Spine 相关文件，返回 [{ name, fullPath }]。
|
||||
* 若传入 validFolders（Eagle 逻辑文件夹 id 集合），则只保留位于这些文件夹内的 item，
|
||||
* 从而把匹配范围限定在「选中文件所在的 Eagle 文件夹及其子文件夹」内。
|
||||
*/
|
||||
function collectSpineFiles(roots, validFolders) {
|
||||
const seen = new Set();
|
||||
const out = [];
|
||||
for (const root of roots) {
|
||||
let entries;
|
||||
try { entries = fs.readdirSync(root); } catch (e) { continue; }
|
||||
for (const name of entries) {
|
||||
const full = path.join(root, name);
|
||||
try { if (!fs.statSync(full).isFile()) continue; } catch (e) { continue; }
|
||||
if (!extOf(name)) continue; // 只关心 Spine 相关扩展
|
||||
// 排除 Eagle 回收站中已删除的项
|
||||
if (isItemDeleted(full)) continue;
|
||||
if (validFolders && validFolders.size) {
|
||||
const itemFolders = foldersOfItem(full);
|
||||
if (!itemFolders.some((f) => validFolders.has(f))) continue; // 不在允许的文件夹内
|
||||
}
|
||||
if (seen.has(full)) continue;
|
||||
seen.add(full);
|
||||
out.push({ name, fullPath: full });
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/**
|
||||
* 缩略图批量生成时，同一时刻会有很多 atlas/json/skel 回调。对全库文件清单做一个
|
||||
* 很短的缓存，下一轮轮询仍会重新扫描，因此既降低大文件夹导入开销，也不会漏掉
|
||||
* 正在落盘的新文件。
|
||||
*/
|
||||
function collectSpineFilesCached(filePath, roots, refresh) {
|
||||
const libRoot = findLibraryRoot(filePath);
|
||||
// Outside an Eagle library, sibling asset folders are independent search
|
||||
// scopes. Sharing their parent as a cache key can return another skeleton.
|
||||
const key = libRoot || JSON.stringify([...roots].sort());
|
||||
const now = Date.now();
|
||||
const cached = fileIndexCache.get(key);
|
||||
if (!refresh && cached && now - cached.time < 1500) return cached.files;
|
||||
const files = collectSpineFiles(roots, null);
|
||||
fileIndexCache.set(key, { time: now, files });
|
||||
return files;
|
||||
}
|
||||
|
||||
/**
|
||||
* 修正不可靠的源路径。
|
||||
* Eagle 传给缩略图 handler 的 src 有时指向一个已清理/不存在的 `.info` 目录
|
||||
* （例如其内部临时工作目录）。此时按文件名在整个库 images/ 下找到真实存在的
|
||||
* 源文件，作为后续资源发现的基准。
|
||||
*/
|
||||
function resolveRealSource(filePath) {
|
||||
// 源目录存在且是有效 item 目录 → 直接用
|
||||
const dir = path.dirname(filePath);
|
||||
if (isEagleItemDir(dir)) return filePath;
|
||||
const name = path.basename(filePath);
|
||||
const libRoot = findLibraryRoot(filePath);
|
||||
if (!libRoot) return filePath;
|
||||
const imagesDir = path.join(libRoot, 'images');
|
||||
try {
|
||||
if (!fs.existsSync(imagesDir)) return filePath;
|
||||
// 优先找“文件名 + 类型”匹配的真实文件。若存在同名文件，返回它所在目录，
|
||||
// 以便后续 getSearchRoots/selectBest 能借助其 folders/btime 精确匹配。
|
||||
let fallback = null;
|
||||
for (const d of fs.readdirSync(imagesDir)) {
|
||||
const sub = path.join(imagesDir, d);
|
||||
if (!isEagleItemDir(sub)) continue;
|
||||
const cand = path.join(sub, name);
|
||||
if (fs.existsSync(cand)) {
|
||||
// 优先选择未被删除的项
|
||||
if (!isItemDeleted(cand)) return cand;
|
||||
if (!fallback) fallback = cand;
|
||||
}
|
||||
}
|
||||
if (fallback) return fallback;
|
||||
} catch (e) { /* ignore */ }
|
||||
return filePath;
|
||||
}
|
||||
|
||||
/**
|
||||
* 发现与所选文件 related 的 Spine 资源（跨 Eagle 多个 item 文件夹）。
|
||||
* 返回 { skeletonPath, atlasPath, texturePaths, base, isBinary, ... }
|
||||
* - texturePaths: { atlas 中引用的贴图名 -> 绝对路径 }
|
||||
*/
|
||||
function discoverAssets(filePath, options) {
|
||||
options = options || {};
|
||||
const strictStem = !!options.strictStem;
|
||||
const requestedCrossBatch = !!options.allowCrossBatch;
|
||||
const maxCrossBatchDeltaMs = Math.max(30000, Number(options.maxCrossBatchDeltaMs) || 5 * 60 * 1000);
|
||||
filePath = resolveRealSource(filePath);
|
||||
const selected = path.basename(filePath);
|
||||
const selectedStem = normalizeStem(selected);
|
||||
// 先扫码“选中 item 文件夹 + 同级所有 .info”（精确、不跨批次）。
|
||||
const roots = getSearchRoots(filePath);
|
||||
// 若同级范围无法凑齐骨架+图集（常见于 Eagle 导入瞬间，同伴落在别的 .info），
|
||||
// 则扩展搜索到整个库的 images/ 目录（全库兜底，靠“同家族 + 同文件夹 + 最近 btime”配对）。
|
||||
buildRootsWithLibraryRoot(filePath, roots);
|
||||
|
||||
// 导入时 Eagle 会先创建各个 .info，再异步写 folders。严格模式必须把尚未写入
|
||||
// folders 的同批资源也纳入候选，之后用 metadata.json 的 birthtime 精确配对。
|
||||
const validFolders = getValidFolders(filePath);
|
||||
// 导入瞬间 folders 可能尚未写入。没有明确 Eagle 文件夹 ID 时禁止跨批次，
|
||||
// 否则单独导入的同名 JSON 会借用库中任意旧 atlas 生成错误缩略图。
|
||||
const allowCrossBatch = requestedCrossBatch && !!(validFolders && validFolders.size);
|
||||
const allowedImportDelta = allowCrossBatch ? maxCrossBatchDeltaMs : 30000;
|
||||
let files = collectSpineFiles(roots, validFolders);
|
||||
if (strictStem) {
|
||||
const allFiles = collectSpineFilesCached(filePath, roots, options.refreshIndex);
|
||||
if (allowCrossBatch && validFolders && validFolders.size) {
|
||||
files = allFiles.filter((f) => foldersOfItem(f.fullPath).some((id) => validFolders.has(id)));
|
||||
} else {
|
||||
files = allFiles;
|
||||
}
|
||||
}
|
||||
|
||||
let skeletonFiles = files.filter((f) => isSkeletonFile(f.name));
|
||||
const atlasFiles = files.filter((f) => isAtlasFile(f.name));
|
||||
const textureFiles = files.filter((f) => isTextureFile(f.name));
|
||||
// 导入缩略图始终按同名资源链匹配。先按 stem 缩小候选，再检查 JSON 内容，
|
||||
// 避免每个回调都解析库中所有普通 JSON。
|
||||
if (strictStem) {
|
||||
skeletonFiles = skeletonFiles.filter((f) => normalizeStem(f.name) === selectedStem);
|
||||
}
|
||||
|
||||
// 区分“骨架 json”和“普通 json”：只保留形似骨架的 json
|
||||
const realSkeletonFiles = skeletonFiles.filter((f) => {
|
||||
if (f.name.toLowerCase().endsWith('.json')) return looksLikeSkeletonJson(f.fullPath);
|
||||
return true;
|
||||
});
|
||||
|
||||
// 工具：优先选择与 refFile 同一批入库的候选，再看 Eagle 逻辑文件夹及素材时间。
|
||||
// 这可区分同一文件夹中多次导入的同名 Spine 导出，又不受素材原始时间影响。
|
||||
const selectBest = (cands, refFile) => {
|
||||
if (!cands || cands.length === 0) return null;
|
||||
const refFolders = foldersOfItem(refFile);
|
||||
const refImportTime = importTimeOf(refFile);
|
||||
const refBtime = btimeOf(refFile);
|
||||
const ranked = cands.map((c) => {
|
||||
const cFolders = foldersOfItem(c.fullPath);
|
||||
return {
|
||||
c,
|
||||
importDelta: refImportTime ? Math.abs(importTimeOf(c.fullPath) - refImportTime) : Number.MAX_SAFE_INTEGER,
|
||||
sameFolder: refFolders.length && cFolders.some((f) => refFolders.indexOf(f) !== -1) ? 1 : 0,
|
||||
btimeDelta: refBtime ? Math.abs(btimeOf(c.fullPath) - refBtime) : Number.MAX_SAFE_INTEGER,
|
||||
};
|
||||
});
|
||||
ranked.sort((a, b) => allowCrossBatch
|
||||
? (b.sameFolder - a.sameFolder || a.importDelta - b.importDelta || a.btimeDelta - b.btimeDelta || a.c.fullPath.localeCompare(b.c.fullPath))
|
||||
: (a.importDelta - b.importDelta || b.sameFolder - a.sameFolder || a.btimeDelta - b.btimeDelta || a.c.fullPath.localeCompare(b.c.fullPath))
|
||||
);
|
||||
return ranked[0].c;
|
||||
};
|
||||
|
||||
// 辅助：读取候选 atlas 的格式家族，以及候选骨骼的版本家族
|
||||
const familyOfAtlas = (f) => { try { return atlasFamily(fs.readFileSync(f.fullPath, 'utf8')); } catch (e) { return null; } };
|
||||
const familyOfSkel = (f) => { try { return versionFamily(detectVersion(f.fullPath)); } catch (e) { return null; } };
|
||||
|
||||
// 选中的文件若是 atlas，则读取其格式家族，用于匹配同家族的骨骼
|
||||
const selectedAtlasFamily = isAtlasFile(selected)
|
||||
? (() => { try { return atlasFamily(fs.readFileSync(filePath, 'utf8')); } catch (e) { return null; } })()
|
||||
: null;
|
||||
|
||||
// 1) 骨骼文件
|
||||
let skeleton = null;
|
||||
// 若选中的就是骨骼文件，务必使用它本身（它的版本即最终版本）
|
||||
if (isSkeletonFile(selected)) {
|
||||
skeleton = realSkeletonFiles.find((f) => f.fullPath === filePath) ||
|
||||
realSkeletonFiles.find((f) => f.name === selected) || null;
|
||||
}
|
||||
if (!skeleton) {
|
||||
// 依选中 stem 匹配；优先与选中 atlas 同家族（3x/4x），再按同文件夹/同批导入
|
||||
let cands = realSkeletonFiles.filter((f) => normalizeStem(f.name) === selectedStem);
|
||||
if (selectedAtlasFamily && cands.length > 1) {
|
||||
const same = cands.filter((f) => familyOfSkel(f) === selectedAtlasFamily);
|
||||
if (same.length > 0) cands = same;
|
||||
}
|
||||
skeleton = cands.length > 0 ? selectBest(cands, filePath) : null;
|
||||
}
|
||||
if (!skeleton && realSkeletonFiles.length > 0) {
|
||||
if (strictStem) {
|
||||
skeleton = null;
|
||||
} else {
|
||||
// 忽略 stem：优先与选中 atlas 同家族，再按入库批次选取
|
||||
let cands = realSkeletonFiles;
|
||||
if (selectedAtlasFamily) {
|
||||
const same = cands.filter((f) => familyOfSkel(f) === selectedAtlasFamily);
|
||||
if (same.length > 0) cands = same;
|
||||
}
|
||||
skeleton = selectBest(cands, filePath);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 2) atlas 文件 —— 优先与骨骼版本家族一致（3x/4x），避免 3.8 骨骼配 4x atlas
|
||||
let atlas = null;
|
||||
if (isAtlasFile(selected)) {
|
||||
atlas = atlasFiles.find((f) => f.fullPath === filePath) ||
|
||||
atlasFiles.find((f) => f.name === selected) || null;
|
||||
}
|
||||
// 统一的候选选择：优先“与骨骼同家族(3x/4x)”的 atlas，再按“同文件夹 + 最近 btime”挑选。
|
||||
// 家族过滤无条件优先，避免 4x 骨骼配到 3x 图集（会导致 UV/坐标错乱）。
|
||||
const pickAtlas = (cands, refFile) => {
|
||||
if (!cands || cands.length === 0) return null;
|
||||
const skelFamily = skeleton ? familyOfSkel(skeleton) : null;
|
||||
if (skelFamily) {
|
||||
const same = cands.filter((f) => familyOfAtlas(f) === skelFamily);
|
||||
if (same.length > 0) cands = same;
|
||||
}
|
||||
return selectBest(cands, refFile);
|
||||
};
|
||||
|
||||
if (!atlas) {
|
||||
let cands = atlasFiles.filter((f) => normalizeStem(f.name) === selectedStem);
|
||||
atlas = pickAtlas(cands, filePath);
|
||||
}
|
||||
if (!atlas && skeleton) {
|
||||
const skelStem = normalizeStem(skeleton.name);
|
||||
let cands = atlasFiles.filter((f) => normalizeStem(f.name) === skelStem);
|
||||
atlas = pickAtlas(cands, skeleton.fullPath);
|
||||
}
|
||||
if (!atlas && skeleton) {
|
||||
if (strictStem) {
|
||||
atlas = null;
|
||||
} else {
|
||||
// 忽略 stem：用与骨骼同家族且同批入库的 atlas
|
||||
atlas = pickAtlas(atlasFiles, skeleton.fullPath);
|
||||
}
|
||||
}
|
||||
if (!atlas && !strictStem && atlasFiles.length === 1) atlas = atlasFiles[0];
|
||||
|
||||
// 严格模式用于导入缩略图：配套骨骼和图集应由同一次拖入创建。若时间差
|
||||
// 过大，说明新同伴还没落盘，返回缺失让调用方继续等待，不能借用旧同名资源。
|
||||
if (strictStem && skeleton && atlas) {
|
||||
const pairDelta = Math.abs(importTimeOf(skeleton.fullPath) - importTimeOf(atlas.fullPath));
|
||||
if (pairDelta > allowedImportDelta) {
|
||||
if (isAtlasFile(selected)) skeleton = null;
|
||||
else atlas = null;
|
||||
}
|
||||
}
|
||||
|
||||
// 3) 解析 atlas 引用的贴图路径（多个同名贴图时，优先与 atlas 同文件夹/同批导入的）
|
||||
let texturePaths = {};
|
||||
if (atlas) {
|
||||
let text = '';
|
||||
try { text = fs.readFileSync(atlas.fullPath, 'utf8'); } catch (e) { /* ignore */ }
|
||||
const pageNames = parseAtlasPages(text);
|
||||
const atlasDir = path.dirname(atlas.fullPath); // atlas 所在 .info 目录
|
||||
for (const pn of pageNames) {
|
||||
// 1) 优先使用 atlas 所在 .info 目录里的同名贴图（最可靠）
|
||||
const inAtlasDir = path.join(atlasDir, pn);
|
||||
if (fs.existsSync(inAtlasDir)) {
|
||||
texturePaths[pn] = inAtlasDir;
|
||||
continue;
|
||||
}
|
||||
// 2) 否则在候选里按“同 Eagle 文件夹 + 最近 btime”挑选
|
||||
let cands = textureFiles.filter((f) => f.name.toLowerCase() === pn.toLowerCase());
|
||||
if (cands.length === 0) cands = textureFiles.filter((f) => normalizeStem(f.name) === normalizeStem(pn));
|
||||
let hit = selectBest(cands, atlas.fullPath);
|
||||
if (strictStem && hit && Math.abs(importTimeOf(hit.fullPath) - importTimeOf(atlas.fullPath)) > allowedImportDelta) hit = null;
|
||||
if (hit) texturePaths[pn] = hit.fullPath;
|
||||
}
|
||||
}
|
||||
|
||||
const base = skeleton ? normalizeStem(skeleton.name) : (atlas ? normalizeStem(atlas.name) : selectedStem);
|
||||
const skelLower = skeleton ? skeleton.name.toLowerCase() : '';
|
||||
const skeletonIsBinary = skelLower.endsWith('.skel') || skelLower.endsWith('.skel.bytes');
|
||||
const chosenFamily = skeleton ? familyOfSkel(skeleton) : (atlas ? familyOfAtlas(atlas) : null);
|
||||
const skeletonTime = skeleton ? importTimeOf(skeleton.fullPath) : 0;
|
||||
const atlasTime = atlas ? importTimeOf(atlas.fullPath) : 0;
|
||||
const relatedSkeletonPaths = skeleton ? realSkeletonFiles.filter((f) =>
|
||||
normalizeStem(f.name) === base &&
|
||||
familyOfSkel(f) === chosenFamily &&
|
||||
Math.abs(importTimeOf(f.fullPath) - skeletonTime) <= allowedImportDelta
|
||||
).map((f) => f.fullPath) : [];
|
||||
const relatedAtlasPaths = atlas ? atlasFiles.filter((f) =>
|
||||
normalizeStem(f.name) === base &&
|
||||
familyOfAtlas(f) === chosenFamily &&
|
||||
Math.abs(importTimeOf(f.fullPath) - atlasTime) <= allowedImportDelta
|
||||
).map((f) => f.fullPath) : [];
|
||||
const relatedDataPaths = [...new Set(relatedSkeletonPaths.concat(relatedAtlasPaths, [filePath]))]
|
||||
.filter((fp) => isSkeletonFile(fp) || isAtlasFile(fp));
|
||||
|
||||
return {
|
||||
skeletonPath: skeleton ? skeleton.fullPath : null,
|
||||
atlasPath: atlas ? atlas.fullPath : null,
|
||||
texturePaths,
|
||||
base,
|
||||
isBinary: skeletonIsBinary,
|
||||
skeletonCandidates: realSkeletonFiles.map((f) => f.name),
|
||||
skeletonCandidatePaths: realSkeletonFiles.map((f) => f.fullPath),
|
||||
atlasCandidates: atlasFiles.map((f) => f.name),
|
||||
atlasCandidatePaths: atlasFiles.map((f) => f.fullPath),
|
||||
textureCandidates: textureFiles.map((f) => f.name),
|
||||
relatedDataPaths,
|
||||
};
|
||||
}
|
||||
|
||||
/** 从 atlas 文本中解析出引用的贴图页面文件名 */
|
||||
function parseAtlasPages(atlasText) {
|
||||
const pages = [];
|
||||
if (!atlasText) return pages;
|
||||
const lines = atlasText.split(/\r?\n/);
|
||||
// atlas 中每个页面以一行“xxx.png”之类的文件名开始
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i].trim();
|
||||
if (/\.(png|jpg|jpeg|webp)$/i.test(line)) {
|
||||
pages.push(line);
|
||||
} else if (line === '') {
|
||||
// 空白行之后的下一个非空行可能是下一页文件名
|
||||
continue;
|
||||
}
|
||||
}
|
||||
// 过滤掉显然是属性的行（例如 "size: 512,512"、"filter: " 等）
|
||||
return pages.filter((p) => !/[=,:]/.test(p));
|
||||
}
|
||||
|
||||
/**
|
||||
* 读取 Atlas 页面声明的预乘设置。Spine 4.x 会为每个页面写入
|
||||
* `pma:true/false`；旧版 Atlas 通常没有该字段，此时返回 undefined。
|
||||
* Spine 的一次导出会让所有页面使用同一设置。若遇到手工拼接且声明冲突
|
||||
* 的 Atlas，采用第一个页面的声明，保持与页面/区域读取顺序一致。
|
||||
*/
|
||||
function parseAtlasPma(atlasText) {
|
||||
if (typeof atlasText !== 'string') return undefined;
|
||||
const matches = Array.from(atlasText.matchAll(/^\s*pma\s*:\s*(true|false)\s*$/gim));
|
||||
return matches.length ? matches[0][1].toLowerCase() === 'true' : undefined;
|
||||
}
|
||||
|
||||
/** 找到应在首次预览时使用的皮肤：defaultSkin、名为 default 的皮肤、第一个皮肤。 */
|
||||
function preferredSkin(skeletonData) {
|
||||
if (!skeletonData) return null;
|
||||
if (skeletonData.defaultSkin) return skeletonData.defaultSkin;
|
||||
const skins = skeletonData.skins || [];
|
||||
return skins.find((skin) => skin && skin.name === 'default') || skins[0] || null;
|
||||
}
|
||||
|
||||
/** 应用皮肤并按 setup pose 重新解析槽位附件，跨 Spine 3.4–4.3 使用。 */
|
||||
function applySkin(skeleton, skin) {
|
||||
if (!skeleton || !skin) return false;
|
||||
if (typeof skeleton.setSkin === 'function') skeleton.setSkin(skin);
|
||||
else if (typeof skeleton.setSkinByName === 'function') skeleton.setSkinByName(skin.name);
|
||||
else return false;
|
||||
if (typeof skeleton.setSlotsToSetupPose === 'function') skeleton.setSlotsToSetupPose();
|
||||
else if (typeof skeleton.setToSetupPose === 'function') skeleton.setToSetupPose();
|
||||
return true;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
SKELETON_EXTS,
|
||||
ATLAS_EXTS,
|
||||
TEXTURE_EXTS,
|
||||
ALL_EXTS,
|
||||
extOf,
|
||||
isSkeletonFile,
|
||||
isAtlasFile,
|
||||
isTextureFile,
|
||||
stemOf,
|
||||
normalizeStem,
|
||||
detectVersion,
|
||||
detectVersionFromJson,
|
||||
detectVersionFromBuffer,
|
||||
chooseRuntimeDir,
|
||||
classifySkeletonJson,
|
||||
looksLikeSkeletonJson,
|
||||
discoverAssets,
|
||||
parseAtlasPages,
|
||||
parseAtlasPma,
|
||||
preferredSkin,
|
||||
applySkin,
|
||||
isEagleItemDir,
|
||||
getSearchRoots,
|
||||
collectSpineFiles,
|
||||
foldersOfItem,
|
||||
findLibraryRoot,
|
||||
readFolderInfo,
|
||||
getValidFolders,
|
||||
mtimeOf,
|
||||
btimeOf,
|
||||
importTimeOf,
|
||||
versionFamily,
|
||||
atlasFamily,
|
||||
itemMeta,
|
||||
isItemDeleted,
|
||||
};
|
||||
@@ -0,0 +1,177 @@
|
||||
'use strict';
|
||||
|
||||
// Decode file bytes without the Canvas 2D premultiply/unpremultiply round trip.
|
||||
// In low-alpha PMA pixels that round trip destroys RGB precision before blending.
|
||||
const preparedTextures = new WeakMap();
|
||||
async function prepareTexture(image, blob) {
|
||||
if (typeof createImageBitmap !== 'function') return;
|
||||
const options = { colorSpaceConversion: 'none' };
|
||||
const [pma, straight] = await Promise.all([
|
||||
createImageBitmap(blob, { ...options, premultiplyAlpha: 'none' }),
|
||||
createImageBitmap(blob, { ...options, premultiplyAlpha: 'premultiply' })
|
||||
]);
|
||||
preparedTextures.set(image, { pma, straight });
|
||||
}
|
||||
|
||||
// Rasterize adjacent mesh triangles together, with GPU edge ownership rules.
|
||||
// Canvas clip()+drawImage() anti-aliases each triangle separately and exposes
|
||||
// the background along shared edges, which looks like a wireframe overlay.
|
||||
function createRasterizer(context) {
|
||||
const document = context.canvas && context.canvas.ownerDocument;
|
||||
if (!document || typeof context.getTransform !== 'function') return null;
|
||||
const canvas = document.createElement('canvas');
|
||||
const gl = canvas.getContext('webgl', {
|
||||
alpha: true, premultipliedAlpha: true, antialias: true,
|
||||
preserveDrawingBuffer: true, depth: false, stencil: false
|
||||
});
|
||||
if (!gl) return null;
|
||||
function shader(type, source) {
|
||||
const shader = gl.createShader(type);
|
||||
gl.shaderSource(shader, source); gl.compileShader(shader);
|
||||
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader));
|
||||
return shader;
|
||||
}
|
||||
const vertex = shader(gl.VERTEX_SHADER, `
|
||||
attribute vec2 position;
|
||||
attribute vec2 uv;
|
||||
attribute vec4 light;
|
||||
attribute vec4 dark;
|
||||
uniform vec2 resolution;
|
||||
varying vec2 textureUV;
|
||||
varying vec4 lightColor;
|
||||
varying vec4 darkColor;
|
||||
void main() {
|
||||
vec2 p = position / resolution * 2.0 - 1.0;
|
||||
gl_Position = vec4(p.x, -p.y, 0.0, 1.0);
|
||||
textureUV = uv;
|
||||
lightColor = light; darkColor = dark;
|
||||
}`);
|
||||
const fragment = shader(gl.FRAGMENT_SHADER, `
|
||||
precision mediump float;
|
||||
uniform sampler2D image;
|
||||
varying vec2 textureUV;
|
||||
varying vec4 lightColor;
|
||||
varying vec4 darkColor;
|
||||
void main() {
|
||||
vec4 color = texture2D(image, textureUV);
|
||||
float alpha = color.a * lightColor.a;
|
||||
// Textures are PMA in GPU memory. Light/dark colors arrive straight.
|
||||
vec3 rgb = (color.rgb * lightColor.rgb + (color.a - color.rgb) * darkColor.rgb) * lightColor.a;
|
||||
gl_FragColor = vec4(rgb, alpha);
|
||||
}`);
|
||||
const program = gl.createProgram(); gl.attachShader(program, vertex); gl.attachShader(program, fragment); gl.linkProgram(program);
|
||||
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(program));
|
||||
gl.deleteShader(vertex); gl.deleteShader(fragment);
|
||||
const buffer = gl.createBuffer();
|
||||
const position = gl.getAttribLocation(program, 'position'), uv = gl.getAttribLocation(program, 'uv');
|
||||
const resolution = gl.getUniformLocation(program, 'resolution');
|
||||
const light = gl.getAttribLocation(program, 'light'), dark = gl.getAttribLocation(program, 'dark');
|
||||
const textures = new Map();
|
||||
let coordinates = [], currentImage = null, currentAlpha = 1, currentMode = 'source-over', transform;
|
||||
let disposed = false, lost = false;
|
||||
let premultipliedAlpha = false;
|
||||
canvas.addEventListener('webglcontextlost', event => { event.preventDefault(); lost = true; });
|
||||
function texture(image) {
|
||||
const pma = image !== context.canvas && premultipliedAlpha;
|
||||
let pair = textures.get(image);
|
||||
if (!pair) { pair = {}; textures.set(image, pair); }
|
||||
const key = pma ? 'pma' : 'straight';
|
||||
if (pair[key] && image !== context.canvas) return pair[key];
|
||||
const t = pair[key] || gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, t);
|
||||
// Premultiply before interpolation so translucent edges do not darken.
|
||||
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, !pma);
|
||||
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
||||
const prepared = preparedTextures.get(image);
|
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prepared ? prepared[key] : image);
|
||||
pair[key] = t; return t;
|
||||
}
|
||||
function flush() {
|
||||
if (!coordinates.length) return;
|
||||
gl.bindTexture(gl.TEXTURE_2D, texture(currentImage));
|
||||
// Premultiplied RGB factors; keep source-over alpha independently.
|
||||
const factors = currentMode === 'lighter' ? [gl.ONE, gl.ONE]
|
||||
: currentMode === 'multiply' ? [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]
|
||||
: currentMode === 'screen' ? [gl.ONE, gl.ONE_MINUS_SRC_COLOR]
|
||||
: [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
|
||||
gl.blendFuncSeparate(factors[0], factors[1], gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(coordinates), gl.STREAM_DRAW);
|
||||
gl.drawArrays(gl.TRIANGLES, 0, coordinates.length / 12);
|
||||
coordinates.length = 0;
|
||||
}
|
||||
return {
|
||||
begin(pma = false) {
|
||||
if (disposed || lost || gl.isContextLost()) return false;
|
||||
premultipliedAlpha = pma;
|
||||
const target = context.canvas;
|
||||
if (canvas.width !== target.width) canvas.width = target.width;
|
||||
if (canvas.height !== target.height) canvas.height = target.height;
|
||||
transform = context.getTransform(); coordinates.length = 0; currentImage = null;
|
||||
gl.viewport(0, 0, canvas.width, canvas.height);
|
||||
gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
gl.useProgram(program); gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
||||
gl.enableVertexAttribArray(position); gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 48, 0);
|
||||
gl.enableVertexAttribArray(uv); gl.vertexAttribPointer(uv, 2, gl.FLOAT, false, 48, 8);
|
||||
gl.enableVertexAttribArray(light); gl.vertexAttribPointer(light, 4, gl.FLOAT, false, 48, 16);
|
||||
gl.enableVertexAttribArray(dark); gl.vertexAttribPointer(dark, 4, gl.FLOAT, false, 48, 32);
|
||||
gl.uniform2f(resolution, canvas.width, canvas.height);
|
||||
gl.activeTexture(gl.TEXTURE0); gl.uniform1i(gl.getUniformLocation(program, 'image'), 0);
|
||||
gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
|
||||
// Seed the same framebuffer with the actual Canvas pixels (solid or
|
||||
// checkerboard background). CSS backgrounds cannot participate in blending.
|
||||
currentImage = target; currentAlpha = 1; currentMode = 'source-over';
|
||||
const w = canvas.width, h = canvas.height;
|
||||
for (const vertex of [[0,0,0,0],[w,0,1,0],[w,h,1,1],[0,0,0,0],[w,h,1,1],[0,h,0,1]])
|
||||
coordinates.push(...vertex, 1,1,1,1, 0,0,0,0);
|
||||
flush(); currentImage = null;
|
||||
return true;
|
||||
},
|
||||
triangle(image, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2, colors, darkColors) {
|
||||
const alpha = context.globalAlpha;
|
||||
const mode = context.globalCompositeOperation || 'source-over';
|
||||
if (image !== currentImage || alpha !== currentAlpha || mode !== currentMode) { flush(); currentImage = image; currentAlpha = alpha; currentMode = mode; }
|
||||
const t = transform;
|
||||
const points = [[x0,y0,u0,v0],[x1,y1,u1,v1],[x2,y2,u2,v2]];
|
||||
for (let i=0; i<3; i++) {
|
||||
const [x,y,u,v] = points[i], j=i*4;
|
||||
coordinates.push(t.a*x+t.c*y+t.e, t.b*x+t.d*y+t.f, u,v,
|
||||
...(colors ? colors.slice(j,j+4) : [1,1,1,alpha]),
|
||||
...(darkColors ? darkColors.slice(j,j+4) : [0,0,0,0]));
|
||||
}
|
||||
},
|
||||
end() {
|
||||
flush();
|
||||
context.save();
|
||||
try { context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; context.globalCompositeOperation = 'copy'; context.drawImage(canvas, 0, 0); }
|
||||
finally { context.restore(); }
|
||||
},
|
||||
dispose() {
|
||||
if (disposed) return; disposed = true;
|
||||
for (const pair of textures.values()) for (const value of Object.values(pair)) gl.deleteTexture(value);
|
||||
textures.clear(); gl.deleteBuffer(buffer); gl.deleteProgram(program);
|
||||
const extension = gl.getExtension('WEBGL_lose_context'); if (extension) extension.loseContext();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function attach(renderer, context) {
|
||||
let rasterizer;
|
||||
try { rasterizer = createRasterizer(context); } catch (e) { return renderer; }
|
||||
if (!rasterizer) return renderer;
|
||||
const draw = renderer.draw.bind(renderer), triangle = renderer.drawTriangle.bind(renderer);
|
||||
renderer.draw = skeleton => {
|
||||
if (!rasterizer.begin(!!renderer.premultipliedAlpha)) return draw(skeleton);
|
||||
renderer.gpuDrawing = true;
|
||||
renderer.drawTriangle = rasterizer.triangle;
|
||||
try { draw(skeleton); rasterizer.end(); }
|
||||
finally { renderer.drawTriangle = triangle; renderer.gpuDrawing = false; }
|
||||
};
|
||||
renderer.dispose = rasterizer.dispose;
|
||||
renderer.rasterization = 'webgl';
|
||||
return renderer;
|
||||
}
|
||||
|
||||
module.exports = { createRasterizer, attach, prepareTexture };
|
||||
Reference in new issue
Block a user