Thanks, Mario!
So our existing code would be something like this (with the spine runtime copied from spine-ts/build/spine-core.js of Spine 3.6, commit: 654c20e5b, https://github.com/EsotericSoftware/spine-runtimes/blob/654c20e5b0e523040b6366bbd1042510d2645134/spine-ts/build/spine-core.js):
var SpineDoll = (function(…) {
var canvas = document.getElementById(display._screenID);
this.TurbulenzEngine = WebGLTurbulenzEngine.create({canvas: canvas});
this.graphicsDevice = this.TurbulenzEngine.createGraphicsDevice({});
this.draw2D = Draw2D.create({graphicsDevice: this.graphicsDevice});
this.atlas = new spine.TextureAtlas(new TextureLoader(this, this.graphicsDevice));
...
}
SpineDoll.prototype = {
start: function() {
this.skeleton.updateWorldTransform();
var batch = new SpriteBatch(this.draw2D);
var canvas = document.getElementById(this.display._screenID);
var gl = canvas.getContext('webgl');
...
function update(spinedoll) {
spinedoll.state.apply(spinedoll.skeleton);
spinedoll.skeleton.updateWorldTransform();
spinedoll.graphicsDevice.clear(bgColor, 1.0);
batch.begin(spinedoll.draw2D.blend.alpha);
spinedoll.drawSkeleton(batch, spinedoll.skeleton);
batch.end();
spinedoll.graphicsDevice.endFrame();
}
this.intervalID = this.TurbulenzEngine.setInterval(
function() {
update(_this);
}
}
}
drawSkeleton: function(batch, skeleton) {
var drawOrder = skeleton.drawOrder;
for (var i = 0, n = drawOrder.length; i < n; i++) {
var slot = drawOrder[i];
var attachment = slot.attachment;
if (attachment instanceof spine.RegionAttachment) {
attachment.computeWorldVertices(slot.bone, vertices, 0, 2);
batch.addMesh(attachment.region.page.texture, [0, 1, 2, 2, 3, 0], vertices, attachment.uvs, color, atlasComplexColorInfo);
} else if (attachment instanceof spine.MeshAttachment) {
attachment.computeWorldVertices(slot, 0, attachment.worldVerticesLength, vertices, 0, 2);
batch.addMesh(attachment.region.page.texture, attachment.triangles, vertices, attachment.uvs, color, atlasComplexColorInfo);
} else if (attachment instanceof spine.ClippingAttachment) {
???
}
}
}
}
So my naive intention is to modify this spine-turbulenz previewer to process Clipping Attachment (as the if block of the last three lines). Would that be possible?
If it's not possible, what's the simplest way to update this previewer to using spine-webgl runtime (or spine-threejs, not sure which one is easier to implement for this purpose) and then able to process Clipping Attachment?
