UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-22 02:06:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts][threejs] Implemented clipping.

Browse Source
This commit is contained in:
badlogic 2017-04-13 10:45:25 +02:00
parent d4266cf89a
commit bd16d0fde8
13 changed files with 304 additions and 399 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -121,6 +121,7 @@
* Added two color tinting support, including `TwoColorTimeline` and additional fields on `Slot` and `SlotData`. * Added two color tinting support, including `TwoColorTimeline` and additional fields on `Slot` and `SlotData`.
* Added `PointAttachment`, additional method `newPointAttachment` in `AttachmentLoader` interface. * Added `PointAttachment`, additional method `newPointAttachment` in `AttachmentLoader` interface.
* Added `ClippingAttachment`, additional method `newClippingAttachment` in `AttachmentLoader` interface. * Added `ClippingAttachment`, additional method `newClippingAttachment` in `AttachmentLoader` interface.
* Added `SkeletonClipper` and `ConvexDecomposer`, used to implement software clipping of attachments.
### WebGL backend ### WebGL backend
* Fixed renderer to work with 3.6 changes. * Fixed renderer to work with 3.6 changes.
@ -136,6 +137,7 @@
### Three.js backend ### Three.js backend
* Fixed renderer to work with 3.6 changes. Two color tinting is not supported. * Fixed renderer to work with 3.6 changes. Two color tinting is not supported.
* Added clipping support
### Widget backend ### Widget backend
* Fixed renderer to work for 3.6 changes. Supports two color tinting & clipping (see webgl backend changes for details). * Fixed renderer to work for 3.6 changes. Supports two color tinting & clipping (see webgl backend changes for details).

5
spine-ts/build/spine-all.d.ts vendored
View File

@ -1197,7 +1197,7 @@ declare module spine.threejs {
private indicesLength; private indicesLength;
constructor(mesh: THREE.Mesh, maxVertices?: number); constructor(mesh: THREE.Mesh, maxVertices?: number);
begin(): void; begin(): void;
batch(vertices: ArrayLike<number>, indices: ArrayLike<number>, z?: number): void; batch(vertices: ArrayLike<number>, verticesLength: number, indices: ArrayLike<number>, indicesLength: number, z?: number): void;
end(): void; end(): void;
} }
} }
@ -1207,6 +1207,7 @@ declare module spine.threejs {
state: AnimationState; state: AnimationState;
zOffset: number; zOffset: number;
private batcher; private batcher;
private clipper;
static QUAD_TRIANGLES: number[]; static QUAD_TRIANGLES: number[];
static VERTEX_SIZE: number; static VERTEX_SIZE: number;
private vertices; private vertices;
@ -1214,8 +1215,6 @@ declare module spine.threejs {
constructor(skeletonData: SkeletonData); constructor(skeletonData: SkeletonData);
update(deltaTime: number): void; update(deltaTime: number): void;
private updateGeometry(); private updateGeometry();
private computeRegionVertices(slot, region, pma);
private computeMeshVertices(slot, mesh, pma);
} }
} }
declare module spine.threejs { declare module spine.threejs {

132
spine-ts/build/spine-all.js
View File

@ -6509,13 +6509,13 @@ var spine;
this.verticesLength = 0; this.verticesLength = 0;
this.indicesLength = 0; this.indicesLength = 0;
}; };
MeshBatcher.prototype.batch = function (vertices, indices, z) { MeshBatcher.prototype.batch = function (vertices, verticesLength, indices, indicesLength, z) {
if (z === void 0) { z = 0; } if (z === void 0) { z = 0; }
var indexStart = this.verticesLength / MeshBatcher.VERTEX_SIZE; var indexStart = this.verticesLength / MeshBatcher.VERTEX_SIZE;
var vertexBuffer = this.vertices; var vertexBuffer = this.vertices;
var i = this.verticesLength; var i = this.verticesLength;
var j = 0; var j = 0;
for (; j < vertices.length;) { for (; j < verticesLength;) {
vertexBuffer[i++] = vertices[j++]; vertexBuffer[i++] = vertices[j++];
vertexBuffer[i++] = vertices[j++]; vertexBuffer[i++] = vertices[j++];
vertexBuffer[i++] = z; vertexBuffer[i++] = z;
@ -6528,9 +6528,9 @@ var spine;
} }
this.verticesLength = i; this.verticesLength = i;
var indicesArray = this.indices; var indicesArray = this.indices;
for (i = this.indicesLength, j = 0; j < indices.length; i++, j++) for (i = this.indicesLength, j = 0; j < indicesLength; i++, j++)
indicesArray[i] = indices[j] + indexStart; indicesArray[i] = indices[j] + indexStart;
this.indicesLength += indices.length; this.indicesLength += indicesLength;
}; };
MeshBatcher.prototype.end = function () { MeshBatcher.prototype.end = function () {
this.vertexBuffer.needsUpdate = true; this.vertexBuffer.needsUpdate = true;
@ -6558,6 +6558,7 @@ var spine;
function SkeletonMesh(skeletonData) { function SkeletonMesh(skeletonData) {
_super.call(this); _super.call(this);
this.zOffset = 0.1; this.zOffset = 0.1;
this.clipper = new spine.SkeletonClipping();
this.vertices = spine.Utils.newFloatArray(1024); this.vertices = spine.Utils.newFloatArray(1024);
this.tempColor = new spine.Color(); this.tempColor = new spine.Color();
this.skeleton = new spine.Skeleton(skeletonData); this.skeleton = new spine.Skeleton(skeletonData);
@ -6583,29 +6584,50 @@ var spine;
var verticesLength = 0; var verticesLength = 0;
var indicesLength = 0; var indicesLength = 0;
var blendMode = null; var blendMode = null;
var vertices = null; var clipper = this.clipper;
var vertices = this.vertices;
var triangles = null; var triangles = null;
var uvs = null;
var drawOrder = this.skeleton.drawOrder; var drawOrder = this.skeleton.drawOrder;
var batcher = this.batcher; var batcher = this.batcher;
batcher.begin(); batcher.begin();
var z = 0; var z = 0;
var zOffset = this.zOffset; var zOffset = this.zOffset;
for (var i = 0, n = drawOrder.length; i < n; i++) { for (var i = 0, n = drawOrder.length; i < n; i++) {
var vertexSize = clipper.isClipping() ? 2 : SkeletonMesh.VERTEX_SIZE;
var slot = drawOrder[i]; var slot = drawOrder[i];
var attachment = slot.getAttachment(); var attachment = slot.getAttachment();
var attachmentColor = null;
var texture = null; var texture = null;
var numFloats = 0;
if (attachment instanceof spine.RegionAttachment) { if (attachment instanceof spine.RegionAttachment) {
var region = attachment; var region = attachment;
vertices = this.computeRegionVertices(slot, region, false); attachmentColor = region.color;
vertices = this.vertices;
numFloats = vertexSize * 4;
region.computeWorldVertices(slot.bone, vertices, 0, vertexSize);
triangles = SkeletonMesh.QUAD_TRIANGLES; triangles = SkeletonMesh.QUAD_TRIANGLES;
uvs = region.uvs;
texture = region.region.renderObject.texture; texture = region.region.renderObject.texture;
} }
else if (attachment instanceof spine.MeshAttachment) { else if (attachment instanceof spine.MeshAttachment) {
var mesh = attachment; var mesh = attachment;
vertices = this.computeMeshVertices(slot, mesh, false); attachmentColor = mesh.color;
vertices = this.vertices;
numFloats = (mesh.worldVerticesLength >> 1) * vertexSize;
if (numFloats > vertices.length) {
vertices = this.vertices = spine.Utils.newFloatArray(numFloats);
}
mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, vertices, 0, vertexSize);
triangles = mesh.triangles; triangles = mesh.triangles;
uvs = mesh.uvs;
texture = mesh.region.renderObject.texture; texture = mesh.region.renderObject.texture;
} }
else if (attachment instanceof spine.ClippingAttachment) {
var clip = (attachment);
clipper.clipStart(slot, clip);
continue;
}
else else
continue; continue;
if (texture != null) { if (texture != null) {
@ -6614,77 +6636,35 @@ var spine;
mat.map = texture.texture; mat.map = texture.texture;
mat.needsUpdate = true; mat.needsUpdate = true;
} }
this.batcher.batch(vertices, triangles, z); var skeleton = slot.bone.skeleton;
var skeletonColor = skeleton.color;
var slotColor = slot.color;
var alpha = skeletonColor.a * slotColor.a * attachmentColor.a;
var color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * attachmentColor.r, skeletonColor.g * slotColor.g * attachmentColor.g, skeletonColor.b * slotColor.b * attachmentColor.b, alpha);
if (clipper.isClipping()) {
clipper.clipTriangles(vertices, numFloats, triangles, triangles.length, uvs, color, null, false);
var clippedVertices = clipper.clippedVertices;
var clippedTriangles = clipper.clippedTriangles;
batcher.batch(clippedVertices, clippedVertices.length, clippedTriangles, clippedTriangles.length, z);
}
else {
var verts = vertices;
for (var v = 2, u = 0, n_2 = numFloats; v < n_2; v += vertexSize, u += 2) {
verts[v] = color.r;
verts[v + 1] = color.g;
verts[v + 2] = color.b;
verts[v + 3] = color.a;
verts[v + 4] = uvs[u];
verts[v + 5] = uvs[u + 1];
}
batcher.batch(vertices, numFloats, triangles, triangles.length, z);
}
z += zOffset; z += zOffset;
} }
} }
batcher.end(); batcher.end();
}; };
SkeletonMesh.prototype.computeRegionVertices = function (slot, region, pma) {
var skeleton = slot.bone.skeleton;
var skeletonColor = skeleton.color;
var slotColor = slot.color;
var regionColor = region.color;
var alpha = skeletonColor.a * slotColor.a * regionColor.a;
var multiplier = pma ? alpha : 1;
var color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * regionColor.r * multiplier, skeletonColor.g * slotColor.g * regionColor.g * multiplier, skeletonColor.b * slotColor.b * regionColor.b * multiplier, alpha);
region.computeWorldVertices(slot.bone, this.vertices, 0, SkeletonMesh.VERTEX_SIZE);
var vertices = this.vertices;
var uvs = region.uvs;
vertices[spine.RegionAttachment.C1R] = color.r;
vertices[spine.RegionAttachment.C1G] = color.g;
vertices[spine.RegionAttachment.C1B] = color.b;
vertices[spine.RegionAttachment.C1A] = color.a;
vertices[spine.RegionAttachment.U1] = uvs[0];
vertices[spine.RegionAttachment.V1] = uvs[1];
vertices[spine.RegionAttachment.C2R] = color.r;
vertices[spine.RegionAttachment.C2G] = color.g;
vertices[spine.RegionAttachment.C2B] = color.b;
vertices[spine.RegionAttachment.C2A] = color.a;
vertices[spine.RegionAttachment.U2] = uvs[2];
vertices[spine.RegionAttachment.V2] = uvs[3];
vertices[spine.RegionAttachment.C3R] = color.r;
vertices[spine.RegionAttachment.C3G] = color.g;
vertices[spine.RegionAttachment.C3B] = color.b;
vertices[spine.RegionAttachment.C3A] = color.a;
vertices[spine.RegionAttachment.U3] = uvs[4];
vertices[spine.RegionAttachment.V3] = uvs[5];
vertices[spine.RegionAttachment.C4R] = color.r;
vertices[spine.RegionAttachment.C4G] = color.g;
vertices[spine.RegionAttachment.C4B] = color.b;
vertices[spine.RegionAttachment.C4A] = color.a;
vertices[spine.RegionAttachment.U4] = uvs[6];
vertices[spine.RegionAttachment.V4] = uvs[7];
return vertices;
};
SkeletonMesh.prototype.computeMeshVertices = function (slot, mesh, pma) {
var skeleton = slot.bone.skeleton;
var skeletonColor = skeleton.color;
var slotColor = slot.color;
var regionColor = mesh.color;
var alpha = skeletonColor.a * slotColor.a * regionColor.a;
var multiplier = pma ? alpha : 1;
var color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * regionColor.r * multiplier, skeletonColor.g * slotColor.g * regionColor.g * multiplier, skeletonColor.b * slotColor.b * regionColor.b * multiplier, alpha);
var numVertices = mesh.worldVerticesLength / 2;
if (this.vertices.length < mesh.worldVerticesLength) {
this.vertices = spine.Utils.newFloatArray(mesh.worldVerticesLength);
}
var vertices = this.vertices;
mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, vertices, 0, SkeletonMesh.VERTEX_SIZE);
var uvs = mesh.uvs;
for (var i = 0, n = numVertices, u = 0, v = 2; i < n; i++) {
vertices[v++] = color.r;
vertices[v++] = color.g;
vertices[v++] = color.b;
vertices[v++] = color.a;
vertices[v++] = uvs[u++];
vertices[v++] = uvs[u++];
v += 2;
}
return vertices;
};
SkeletonMesh.QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0]; SkeletonMesh.QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
SkeletonMesh.VERTEX_SIZE = 2 + 2 + 4; SkeletonMesh.VERTEX_SIZE = 2 + 2 + 4;
return SkeletonMesh; return SkeletonMesh;
@ -8787,7 +8767,7 @@ var spine;
var nn = clip.worldVerticesLength; var nn = clip.worldVerticesLength;
var world = this.temp = spine.Utils.setArraySize(this.temp, nn, 0); var world = this.temp = spine.Utils.setArraySize(this.temp, nn, 0);
clip.computeWorldVertices(slot, 0, nn, world, 0, 2); clip.computeWorldVertices(slot, 0, nn, world, 0, 2);
for (var i_5 = 0, n_2 = world.length; i_5 < n_2; i_5 += 2) { for (var i_5 = 0, n_3 = world.length; i_5 < n_3; i_5 += 2) {
var x = world[i_5]; var x = world[i_5];
var y = world[i_5 + 1]; var y = world[i_5 + 1];
var x2 = world[(i_5 + 2) % world.length]; var x2 = world[(i_5 + 2) % world.length];
@ -8915,7 +8895,7 @@ var spine;
else { else {
var verts = renderable.vertices; var verts = renderable.vertices;
if (!twoColorTint) { if (!twoColorTint) {
for (var v = 2, u = 0, n_3 = renderable.numFloats; v < n_3; v += vertexSize, u += 2) { for (var v = 2, u = 0, n_4 = renderable.numFloats; v < n_4; v += vertexSize, u += 2) {
verts[v] = finalColor.r; verts[v] = finalColor.r;
verts[v + 1] = finalColor.g; verts[v + 1] = finalColor.g;
verts[v + 2] = finalColor.b; verts[v + 2] = finalColor.b;
@ -8925,7 +8905,7 @@ var spine;
} }
} }
else { else {
for (var v = 2, u = 0, n_4 = renderable.numFloats; v < n_4; v += vertexSize, u += 2) { for (var v = 2, u = 0, n_5 = renderable.numFloats; v < n_5; v += vertexSize, u += 2) {
verts[v] = finalColor.r; verts[v] = finalColor.r;
verts[v + 1] = finalColor.g; verts[v + 1] = finalColor.g;
verts[v + 2] = finalColor.b; verts[v + 2] = finalColor.b;

2
spine-ts/build/spine-all.js.map
View File

File diff suppressed because one or more lines are too long

5
spine-ts/build/spine-threejs.d.ts vendored
View File

@ -1166,7 +1166,7 @@ declare module spine.threejs {
private indicesLength; private indicesLength;
constructor(mesh: THREE.Mesh, maxVertices?: number); constructor(mesh: THREE.Mesh, maxVertices?: number);
begin(): void; begin(): void;
batch(vertices: ArrayLike<number>, indices: ArrayLike<number>, z?: number): void; batch(vertices: ArrayLike<number>, verticesLength: number, indices: ArrayLike<number>, indicesLength: number, z?: number): void;
end(): void; end(): void;
} }
} }
@ -1176,6 +1176,7 @@ declare module spine.threejs {
state: AnimationState; state: AnimationState;
zOffset: number; zOffset: number;
private batcher; private batcher;
private clipper;
static QUAD_TRIANGLES: number[]; static QUAD_TRIANGLES: number[];
static VERTEX_SIZE: number; static VERTEX_SIZE: number;
private vertices; private vertices;
@ -1183,8 +1184,6 @@ declare module spine.threejs {
constructor(skeletonData: SkeletonData); constructor(skeletonData: SkeletonData);
update(deltaTime: number): void; update(deltaTime: number): void;
private updateGeometry(); private updateGeometry();
private computeRegionVertices(slot, region, pma);
private computeMeshVertices(slot, mesh, pma);
} }
} }
declare module spine.threejs { declare module spine.threejs {

126
spine-ts/build/spine-threejs.js
View File

@ -6255,13 +6255,13 @@ var spine;
this.verticesLength = 0; this.verticesLength = 0;
this.indicesLength = 0; this.indicesLength = 0;
}; };
MeshBatcher.prototype.batch = function (vertices, indices, z) { MeshBatcher.prototype.batch = function (vertices, verticesLength, indices, indicesLength, z) {
if (z === void 0) { z = 0; } if (z === void 0) { z = 0; }
var indexStart = this.verticesLength / MeshBatcher.VERTEX_SIZE; var indexStart = this.verticesLength / MeshBatcher.VERTEX_SIZE;
var vertexBuffer = this.vertices; var vertexBuffer = this.vertices;
var i = this.verticesLength; var i = this.verticesLength;
var j = 0; var j = 0;
for (; j < vertices.length;) { for (; j < verticesLength;) {
vertexBuffer[i++] = vertices[j++]; vertexBuffer[i++] = vertices[j++];
vertexBuffer[i++] = vertices[j++]; vertexBuffer[i++] = vertices[j++];
vertexBuffer[i++] = z; vertexBuffer[i++] = z;
@ -6274,9 +6274,9 @@ var spine;
} }
this.verticesLength = i; this.verticesLength = i;
var indicesArray = this.indices; var indicesArray = this.indices;
for (i = this.indicesLength, j = 0; j < indices.length; i++, j++) for (i = this.indicesLength, j = 0; j < indicesLength; i++, j++)
indicesArray[i] = indices[j] + indexStart; indicesArray[i] = indices[j] + indexStart;
this.indicesLength += indices.length; this.indicesLength += indicesLength;
}; };
MeshBatcher.prototype.end = function () { MeshBatcher.prototype.end = function () {
this.vertexBuffer.needsUpdate = true; this.vertexBuffer.needsUpdate = true;
@ -6304,6 +6304,7 @@ var spine;
function SkeletonMesh(skeletonData) { function SkeletonMesh(skeletonData) {
_super.call(this); _super.call(this);
this.zOffset = 0.1; this.zOffset = 0.1;
this.clipper = new spine.SkeletonClipping();
this.vertices = spine.Utils.newFloatArray(1024); this.vertices = spine.Utils.newFloatArray(1024);
this.tempColor = new spine.Color(); this.tempColor = new spine.Color();
this.skeleton = new spine.Skeleton(skeletonData); this.skeleton = new spine.Skeleton(skeletonData);
@ -6329,29 +6330,50 @@ var spine;
var verticesLength = 0; var verticesLength = 0;
var indicesLength = 0; var indicesLength = 0;
var blendMode = null; var blendMode = null;
var vertices = null; var clipper = this.clipper;
var vertices = this.vertices;
var triangles = null; var triangles = null;
var uvs = null;
var drawOrder = this.skeleton.drawOrder; var drawOrder = this.skeleton.drawOrder;
var batcher = this.batcher; var batcher = this.batcher;
batcher.begin(); batcher.begin();
var z = 0; var z = 0;
var zOffset = this.zOffset; var zOffset = this.zOffset;
for (var i = 0, n = drawOrder.length; i < n; i++) { for (var i = 0, n = drawOrder.length; i < n; i++) {
var vertexSize = clipper.isClipping() ? 2 : SkeletonMesh.VERTEX_SIZE;
var slot = drawOrder[i]; var slot = drawOrder[i];
var attachment = slot.getAttachment(); var attachment = slot.getAttachment();
var attachmentColor = null;
var texture = null; var texture = null;
var numFloats = 0;
if (attachment instanceof spine.RegionAttachment) { if (attachment instanceof spine.RegionAttachment) {
var region = attachment; var region = attachment;
vertices = this.computeRegionVertices(slot, region, false); attachmentColor = region.color;
vertices = this.vertices;
numFloats = vertexSize * 4;
region.computeWorldVertices(slot.bone, vertices, 0, vertexSize);
triangles = SkeletonMesh.QUAD_TRIANGLES; triangles = SkeletonMesh.QUAD_TRIANGLES;
uvs = region.uvs;
texture = region.region.renderObject.texture; texture = region.region.renderObject.texture;
} }
else if (attachment instanceof spine.MeshAttachment) { else if (attachment instanceof spine.MeshAttachment) {
var mesh = attachment; var mesh = attachment;
vertices = this.computeMeshVertices(slot, mesh, false); attachmentColor = mesh.color;
vertices = this.vertices;
numFloats = (mesh.worldVerticesLength >> 1) * vertexSize;
if (numFloats > vertices.length) {
vertices = this.vertices = spine.Utils.newFloatArray(numFloats);
}
mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, vertices, 0, vertexSize);
triangles = mesh.triangles; triangles = mesh.triangles;
uvs = mesh.uvs;
texture = mesh.region.renderObject.texture; texture = mesh.region.renderObject.texture;
} }
else if (attachment instanceof spine.ClippingAttachment) {
var clip = (attachment);
clipper.clipStart(slot, clip);
continue;
}
else else
continue; continue;
if (texture != null) { if (texture != null) {
@ -6360,77 +6382,35 @@ var spine;
mat.map = texture.texture; mat.map = texture.texture;
mat.needsUpdate = true; mat.needsUpdate = true;
} }
this.batcher.batch(vertices, triangles, z); var skeleton = slot.bone.skeleton;
var skeletonColor = skeleton.color;
var slotColor = slot.color;
var alpha = skeletonColor.a * slotColor.a * attachmentColor.a;
var color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * attachmentColor.r, skeletonColor.g * slotColor.g * attachmentColor.g, skeletonColor.b * slotColor.b * attachmentColor.b, alpha);
if (clipper.isClipping()) {
clipper.clipTriangles(vertices, numFloats, triangles, triangles.length, uvs, color, null, false);
var clippedVertices = clipper.clippedVertices;
var clippedTriangles = clipper.clippedTriangles;
batcher.batch(clippedVertices, clippedVertices.length, clippedTriangles, clippedTriangles.length, z);
}
else {
var verts = vertices;
for (var v = 2, u = 0, n_2 = numFloats; v < n_2; v += vertexSize, u += 2) {
verts[v] = color.r;
verts[v + 1] = color.g;
verts[v + 2] = color.b;
verts[v + 3] = color.a;
verts[v + 4] = uvs[u];
verts[v + 5] = uvs[u + 1];
}
batcher.batch(vertices, numFloats, triangles, triangles.length, z);
}
z += zOffset; z += zOffset;
} }
} }
batcher.end(); batcher.end();
}; };
SkeletonMesh.prototype.computeRegionVertices = function (slot, region, pma) {
var skeleton = slot.bone.skeleton;
var skeletonColor = skeleton.color;
var slotColor = slot.color;
var regionColor = region.color;
var alpha = skeletonColor.a * slotColor.a * regionColor.a;
var multiplier = pma ? alpha : 1;
var color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * regionColor.r * multiplier, skeletonColor.g * slotColor.g * regionColor.g * multiplier, skeletonColor.b * slotColor.b * regionColor.b * multiplier, alpha);
region.computeWorldVertices(slot.bone, this.vertices, 0, SkeletonMesh.VERTEX_SIZE);
var vertices = this.vertices;
var uvs = region.uvs;
vertices[spine.RegionAttachment.C1R] = color.r;
vertices[spine.RegionAttachment.C1G] = color.g;
vertices[spine.RegionAttachment.C1B] = color.b;
vertices[spine.RegionAttachment.C1A] = color.a;
vertices[spine.RegionAttachment.U1] = uvs[0];
vertices[spine.RegionAttachment.V1] = uvs[1];
vertices[spine.RegionAttachment.C2R] = color.r;
vertices[spine.RegionAttachment.C2G] = color.g;
vertices[spine.RegionAttachment.C2B] = color.b;
vertices[spine.RegionAttachment.C2A] = color.a;
vertices[spine.RegionAttachment.U2] = uvs[2];
vertices[spine.RegionAttachment.V2] = uvs[3];
vertices[spine.RegionAttachment.C3R] = color.r;
vertices[spine.RegionAttachment.C3G] = color.g;
vertices[spine.RegionAttachment.C3B] = color.b;
vertices[spine.RegionAttachment.C3A] = color.a;
vertices[spine.RegionAttachment.U3] = uvs[4];
vertices[spine.RegionAttachment.V3] = uvs[5];
vertices[spine.RegionAttachment.C4R] = color.r;
vertices[spine.RegionAttachment.C4G] = color.g;
vertices[spine.RegionAttachment.C4B] = color.b;
vertices[spine.RegionAttachment.C4A] = color.a;
vertices[spine.RegionAttachment.U4] = uvs[6];
vertices[spine.RegionAttachment.V4] = uvs[7];
return vertices;
};
SkeletonMesh.prototype.computeMeshVertices = function (slot, mesh, pma) {
var skeleton = slot.bone.skeleton;
var skeletonColor = skeleton.color;
var slotColor = slot.color;
var regionColor = mesh.color;
var alpha = skeletonColor.a * slotColor.a * regionColor.a;
var multiplier = pma ? alpha : 1;
var color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * regionColor.r * multiplier, skeletonColor.g * slotColor.g * regionColor.g * multiplier, skeletonColor.b * slotColor.b * regionColor.b * multiplier, alpha);
var numVertices = mesh.worldVerticesLength / 2;
if (this.vertices.length < mesh.worldVerticesLength) {
this.vertices = spine.Utils.newFloatArray(mesh.worldVerticesLength);
}
var vertices = this.vertices;
mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, vertices, 0, SkeletonMesh.VERTEX_SIZE);
var uvs = mesh.uvs;
for (var i = 0, n = numVertices, u = 0, v = 2; i < n; i++) {
vertices[v++] = color.r;
vertices[v++] = color.g;
vertices[v++] = color.b;
vertices[v++] = color.a;
vertices[v++] = uvs[u++];
vertices[v++] = uvs[u++];
v += 2;
}
return vertices;
};
SkeletonMesh.QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0]; SkeletonMesh.QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
SkeletonMesh.VERTEX_SIZE = 2 + 2 + 4; SkeletonMesh.VERTEX_SIZE = 2 + 2 + 4;
return SkeletonMesh; return SkeletonMesh;

2
spine-ts/build/spine-threejs.js.map
View File

File diff suppressed because one or more lines are too long

264
spine-ts/threejs/example/assets/raptor.atlas
View File

@ -1,279 +1,251 @@
raptor.png raptor.png
size: 1024,1024 size: 2048,2048
format: RGBA8888 format: RGBA8888
filter: Linear,Linear filter: Linear,Linear
repeat: none repeat: none
back_arm back_arm
rotate: true rotate: false
xy: 140, 191 xy: 1888, 1638
size: 46, 29 size: 91, 57
orig: 46, 29 orig: 91, 57
offset: 0, 0 offset: 0, 0
index: -1 index: -1
back_bracer back_bracer
rotate: true rotate: false
xy: 167, 317 xy: 1888, 1581
size: 39, 28 size: 77, 55
orig: 39, 28 orig: 77, 55
offset: 0, 0 offset: 0, 0
index: -1 index: -1
back_hand back_hand
rotate: false rotate: false
xy: 167, 358 xy: 1954, 1764
size: 36, 34 size: 72, 68
orig: 36, 34 orig: 72, 68
offset: 0, 0 offset: 0, 0
index: -1 index: -1
back_knee back_knee
rotate: false rotate: false
xy: 299, 478 xy: 275, 438
size: 49, 67 size: 97, 134
orig: 49, 67 orig: 97, 134
offset: 0, 0 offset: 0, 0
index: -1 index: -1
back_thigh back_thigh
rotate: true rotate: false
xy: 167, 437 xy: 1778, 1518
size: 39, 24 size: 78, 47
orig: 39, 24 orig: 78, 47
offset: 0, 0
index: -1
eyes_closed
rotate: true
xy: 2, 2
size: 47, 45
orig: 47, 45
offset: 0, 0 offset: 0, 0
index: -1 index: -1
eyes_open eyes_open
rotate: true rotate: false
xy: 49, 2 xy: 275, 347
size: 47, 45 size: 93, 89
orig: 47, 45 orig: 93, 89
offset: 0, 0
index: -1
eyes_surprised
rotate: true
xy: 96, 2
size: 47, 45
orig: 47, 45
offset: 0, 0 offset: 0, 0
index: -1 index: -1
front_arm front_arm
rotate: false rotate: false
xy: 419, 544 xy: 830, 1089
size: 48, 30 size: 96, 60
orig: 48, 30 orig: 96, 60
offset: 0, 0 offset: 0, 0
index: -1 index: -1
front_bracer front_bracer
rotate: false rotate: false
xy: 880, 695 xy: 1888, 1697
size: 41, 29 size: 81, 58
orig: 41, 29 orig: 81, 58
offset: 0, 0 offset: 0, 0
index: -1 index: -1
front_hand front_hand
rotate: true rotate: false
xy: 167, 394 xy: 1870, 1757
size: 41, 38 size: 82, 75
orig: 41, 38 orig: 82, 75
offset: 0, 0 offset: 0, 0
index: -1 index: -1
front_open_hand front_open_hand
rotate: false rotate: false
xy: 880, 726 xy: 192, 15
size: 43, 44 size: 86, 87
orig: 43, 44 orig: 86, 87
offset: 0, 0 offset: 0, 0
index: -1 index: -1
front_thigh front_thigh
rotate: false rotate: false
xy: 360, 545 xy: 714, 1091
size: 57, 29 size: 114, 58
orig: 57, 29 orig: 114, 58
offset: 0, 0 offset: 0, 0
index: -1 index: -1
gun gun
rotate: false rotate: false
xy: 785, 774 xy: 1563, 1543
size: 107, 103 size: 213, 206
orig: 107, 103 orig: 213, 206
offset: 0, 0 offset: 0, 0
index: -1 index: -1
gun_nohand gun_nohand
rotate: false rotate: false
xy: 614, 703 xy: 1223, 1403
size: 105, 102 size: 210, 203
orig: 105, 102 orig: 210, 203
offset: 0, 0 offset: 0, 0
index: -1 index: -1
head head
rotate: false rotate: false
xy: 2, 137 xy: 2, 274
size: 136, 149 size: 271, 298
orig: 136, 149 orig: 271, 298
offset: 0, 0 offset: 0, 0
index: -1 index: -1
lower_leg lower_leg
rotate: true
xy: 780, 699
size: 73, 98
orig: 73, 98
offset: 0, 0
index: -1
mouth_grind
rotate: false rotate: false
xy: 469, 544 xy: 551, 893
size: 47, 30 size: 146, 195
orig: 47, 30 orig: 146, 195
offset: 0, 0
index: -1
mouth_oooo
rotate: true
xy: 894, 772
size: 105, 30
orig: 105, 30
offset: 0, 0 offset: 0, 0
index: -1 index: -1
mouth_smile mouth_smile
rotate: true rotate: false
xy: 140, 239 xy: 928, 1090
size: 47, 30 size: 93, 59
orig: 47, 30 orig: 93, 59
offset: 0, 0 offset: 0, 0
index: -1 index: -1
neck neck
rotate: true rotate: false
xy: 538, 577 xy: 330, 908
size: 18, 21 size: 36, 41
orig: 18, 21 orig: 36, 41
offset: 0, 0 offset: 0, 0
index: -1 index: -1
raptor_arm_back raptor_arm_back
rotate: false rotate: false
xy: 940, 936 xy: 386, 916
size: 82, 86 size: 163, 172
orig: 82, 86 orig: 163, 172
offset: 0, 0 offset: 0, 0
index: -1 index: -1
raptor_body raptor_body
rotate: false rotate: false
xy: 2, 737 xy: 2, 1467
size: 610, 285 size: 1219, 570
orig: 610, 285 orig: 1219, 570
offset: 0, 0 offset: 0, 0
index: -1 index: -1
raptor_front_arm raptor_front_arm
rotate: true rotate: false
xy: 195, 464 xy: 1870, 1834
size: 81, 102 size: 162, 203
orig: 81, 102 orig: 162, 203
offset: 0, 0 offset: 0, 0
index: -1 index: -1
raptor_front_leg raptor_front_leg
rotate: false rotate: false
xy: 2, 478 xy: 2, 951
size: 191, 257 size: 382, 514
orig: 191, 257 orig: 382, 514
offset: 0, 0 offset: 0, 0
index: -1 index: -1
raptor_hindleg_back raptor_hindleg_back
rotate: false rotate: false
xy: 614, 807 xy: 1223, 1608
size: 169, 215 size: 338, 429
orig: 169, 215 orig: 338, 429
offset: 0, 0 offset: 0, 0
index: -1 index: -1
raptor_horn raptor_horn
rotate: false rotate: false
xy: 360, 655 xy: 714, 1306
size: 182, 80 size: 363, 159
orig: 182, 80 orig: 363, 159
offset: 0, 0 offset: 0, 0
index: -1 index: -1
raptor_horn_back raptor_horn_back
rotate: false rotate: false
xy: 360, 576 xy: 714, 1151
size: 176, 77 size: 351, 153
orig: 176, 77 orig: 351, 153
offset: 0, 0 offset: 0, 0
index: -1 index: -1
raptor_jaw raptor_jaw
rotate: false rotate: false
xy: 785, 879 xy: 1563, 1751
size: 153, 143 size: 305, 286
orig: 153, 143 orig: 305, 286
offset: 0, 0 offset: 0, 0
index: -1 index: -1
raptor_saddle_noshadow raptor_saddle_noshadow
rotate: false rotate: false
xy: 2, 288 xy: 2, 574
size: 163, 188 size: 326, 375
orig: 163, 188 orig: 326, 375
offset: 0, 0 offset: 0, 0
index: -1 index: -1
raptor_saddle_strap_front raptor_saddle_strap_front
rotate: false rotate: false
xy: 721, 710 xy: 1435, 1417
size: 57, 95 size: 114, 189
orig: 57, 95 orig: 114, 189
offset: 0, 0 offset: 0, 0
index: -1 index: -1
raptor_saddle_strap_rear raptor_saddle_strap_rear
rotate: true rotate: false
xy: 940, 880 xy: 1079, 1317
size: 54, 74 size: 108, 148
orig: 54, 74 orig: 108, 148
offset: 0, 0 offset: 0, 0
index: -1 index: -1
raptor_saddle_w_shadow raptor_saddle_w_shadow
rotate: false rotate: false
xy: 195, 547 xy: 386, 1090
size: 163, 188 size: 326, 375
orig: 163, 188 orig: 326, 375
offset: 0, 0 offset: 0, 0
index: -1 index: -1
raptor_tongue raptor_tongue
rotate: true rotate: false
xy: 544, 649 xy: 1551, 1413
size: 86, 64 size: 171, 128
orig: 86, 64 orig: 171, 128
offset: 0, 0 offset: 0, 0
index: -1 index: -1
stirrup_back stirrup_back
rotate: true rotate: false
xy: 140, 145 xy: 275, 276
size: 44, 35 size: 87, 69
orig: 44, 35 orig: 87, 69
offset: 0, 0 offset: 0, 0
index: -1 index: -1
stirrup_front stirrup_front
rotate: false rotate: false
xy: 538, 597 xy: 2, 2
size: 45, 50 size: 89, 100
orig: 45, 50 orig: 89, 100
offset: 0, 0 offset: 0, 0
index: -1 index: -1
stirrup_strap stirrup_strap
rotate: false rotate: false
xy: 350, 497 xy: 93, 11
size: 49, 46 size: 97, 91
orig: 49, 46 orig: 97, 91
offset: 0, 0 offset: 0, 0
index: -1 index: -1
torso torso
rotate: true rotate: false
xy: 610, 647 xy: 1778, 1567
size: 54, 91 size: 108, 182
orig: 54, 91 orig: 108, 182
offset: 0, 0 offset: 0, 0
index: -1 index: -1
visor visor
rotate: false rotate: false
xy: 2, 51 xy: 2, 104
size: 131, 84 size: 261, 168
orig: 131, 84 orig: 261, 168
offset: 0, 0 offset: 0, 0
index: -1 index: -1

12
spine-ts/threejs/example/assets/raptor.json
View File

@ -1,5 +1,5 @@
{ {
"skeleton": { "hash": "WOArBZLexLEX/Tow3AuM8ddszEE", "spine": "3.6.14-beta", "width": 1223.73, "height": 1055.62, "images": "./images/" }, "skeleton": { "hash": "T+jP778edtEIrEMb7QvVNAgiHUo", "spine": "3.6.14-beta", "width": 1223.73, "height": 1056.91, "images": "./images/" },
"bones": [ "bones": [
{ "name": "root" }, { "name": "root" },
{ "name": "hip", "parent": "root", "rotation": 3.16, "x": -136.79, "y": 415.48, "color": "fbff00ff" }, { "name": "hip", "parent": "root", "rotation": 3.16, "x": -136.79, "y": 415.48, "color": "fbff00ff" },
@ -199,6 +199,7 @@
{ "name": "tongue3", "parent": "tongue2", "length": 43.65, "rotation": 12.86, "x": 44.27, "y": -0.21, "color": "fff200ff" } { "name": "tongue3", "parent": "tongue2", "length": 43.65, "rotation": 12.86, "x": 44.27, "y": -0.21, "color": "fff200ff" }
], ],
"slots": [ "slots": [
{ "name": "clip", "bone": "root", "attachment": "clip" },
{ "name": "back_hand", "bone": "back_hand", "attachment": "back_hand" }, { "name": "back_hand", "bone": "back_hand", "attachment": "back_hand" },
{ "name": "back_arm", "bone": "back_arm", "attachment": "back_arm" }, { "name": "back_arm", "bone": "back_arm", "attachment": "back_arm" },
{ "name": "back_bracer", "bone": "back_bracer", "attachment": "back_bracer" }, { "name": "back_bracer", "bone": "back_bracer", "attachment": "back_bracer" },
@ -310,6 +311,15 @@
"back_thigh": { "back_thigh": {
"back_thigh": { "x": 37.85, "y": -4.37, "rotation": 19.25, "width": 78, "height": 47 } "back_thigh": { "x": 37.85, "y": -4.37, "rotation": 19.25, "width": 78, "height": 47 }
}, },
"clip": {
"clip": {
"type": "clipping",
"end": "clip",
"vertexCount": 25,
"vertices": [ -31.42, 352.85, -182.02, 382.27, -214.91, 562.3, -8.92, 647.12, 183.22, 555.37, 254.19, 375.35, 261.12, 153.78, 3.2, 13.57, -270.3, -36.63, -408.78, 48.19, -349.93, 280.14, -228.76, 133.01, -59.12, 94.93, 107.06, 160.71, 202.26, 349.38, 122.64, 487.86, -41.81, 557.1, -142.21, 489.6, -57.39, 422.09, 49.94, 432.47, 133.02, 370.16, 94.94, 271.49, 43.01, 186.67, -138.74, 174.55, -230.49, 273.22 ],
"color": "ce3a3aff"
}
},
"eyes_open": { "eyes_open": {
"eyes_open": { "x": 93.24, "y": -25.45, "rotation": -70.58, "width": 93, "height": 89 } "eyes_open": { "x": 93.24, "y": -25.45, "rotation": -70.58, "width": 93, "height": 89 }
}, },

BIN
spine-ts/threejs/example/assets/raptor.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 495 KiB

After

Width:  |  Height:  |  Size: 1.7 MiB

8
spine-ts/threejs/src/MeshBatcher.ts
View File

@ -63,12 +63,12 @@ module spine.threejs {
this.indicesLength = 0; this.indicesLength = 0;
} }
batch (vertices: ArrayLike<number>, indices: ArrayLike<number>, z: number = 0) { batch (vertices: ArrayLike<number>, verticesLength: number, indices: ArrayLike<number>, indicesLength: number, z: number = 0) {
let indexStart = this.verticesLength / MeshBatcher.VERTEX_SIZE; let indexStart = this.verticesLength / MeshBatcher.VERTEX_SIZE;
let vertexBuffer = this.vertices; let vertexBuffer = this.vertices;
let i = this.verticesLength; let i = this.verticesLength;
let j = 0; let j = 0;
for (;j < vertices.length;) { for (;j < verticesLength;) {
vertexBuffer[i++] = vertices[j++]; vertexBuffer[i++] = vertices[j++];
vertexBuffer[i++] = vertices[j++]; vertexBuffer[i++] = vertices[j++];
vertexBuffer[i++] = z; vertexBuffer[i++] = z;
@ -82,9 +82,9 @@ module spine.threejs {
this.verticesLength = i; this.verticesLength = i;
let indicesArray = this.indices; let indicesArray = this.indices;
for (i = this.indicesLength, j = 0; j < indices.length; i++, j++) for (i = this.indicesLength, j = 0; j < indicesLength; i++, j++)
indicesArray[i] = indices[j] + indexStart; indicesArray[i] = indices[j] + indexStart;
this.indicesLength += indices.length; this.indicesLength += indicesLength;
} }
end () { end () {

139
spine-ts/threejs/src/SkeletonMesh.ts
View File

@ -36,6 +36,7 @@ module spine.threejs {
zOffset: number = 0.1; zOffset: number = 0.1;
private batcher: MeshBatcher; private batcher: MeshBatcher;
private clipper: SkeletonClipping = new SkeletonClipping();
static QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0]; static QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
static VERTEX_SIZE = 2 + 2 + 4; static VERTEX_SIZE = 2 + 2 + 4;
@ -75,29 +76,48 @@ module spine.threejs {
var indicesLength = 0; var indicesLength = 0;
let blendMode: BlendMode = null; let blendMode: BlendMode = null;
let clipper = this.clipper;
let vertices: ArrayLike<number> = null; let vertices: ArrayLike<number> = this.vertices;
let triangles: Array<number> = null; let triangles: Array<number> = null;
let uvs: ArrayLike<number> = null;
let drawOrder = this.skeleton.drawOrder; let drawOrder = this.skeleton.drawOrder;
let batcher = this.batcher; let batcher = this.batcher;
batcher.begin(); batcher.begin();
let z = 0; let z = 0;
let zOffset = this.zOffset; let zOffset = this.zOffset;
for (let i = 0, n = drawOrder.length; i < n; i++) { for (let i = 0, n = drawOrder.length; i < n; i++) {
let vertexSize = clipper.isClipping() ? 2 : SkeletonMesh.VERTEX_SIZE;
let slot = drawOrder[i]; let slot = drawOrder[i];
let attachment = slot.getAttachment(); let attachment = slot.getAttachment();
let attachmentColor: Color = null;
let texture: ThreeJsTexture = null; let texture: ThreeJsTexture = null;
let numFloats = 0;
if (attachment instanceof RegionAttachment) { if (attachment instanceof RegionAttachment) {
let region = <RegionAttachment>attachment; let region = <RegionAttachment>attachment;
vertices = this.computeRegionVertices(slot, region, false); attachmentColor = region.color;
vertices = this.vertices;
numFloats = vertexSize * 4;
region.computeWorldVertices(slot.bone, vertices, 0, vertexSize);
triangles = SkeletonMesh.QUAD_TRIANGLES; triangles = SkeletonMesh.QUAD_TRIANGLES;
uvs = region.uvs;
texture = <ThreeJsTexture>(<TextureAtlasRegion>region.region.renderObject).texture; texture = <ThreeJsTexture>(<TextureAtlasRegion>region.region.renderObject).texture;
} else if (attachment instanceof MeshAttachment) { } else if (attachment instanceof MeshAttachment) {
let mesh = <MeshAttachment>attachment; let mesh = <MeshAttachment>attachment;
vertices = this.computeMeshVertices(slot, mesh, false); attachmentColor = mesh.color;
vertices = this.vertices;
numFloats = (mesh.worldVerticesLength >> 1) * vertexSize;
if (numFloats > vertices.length) {
vertices = this.vertices = spine.Utils.newFloatArray(numFloats);
}
mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, vertices, 0, vertexSize);
triangles = mesh.triangles; triangles = mesh.triangles;
uvs = mesh.uvs;
texture = <ThreeJsTexture>(<TextureAtlasRegion>mesh.region.renderObject).texture; texture = <ThreeJsTexture>(<TextureAtlasRegion>mesh.region.renderObject).texture;
} else if (attachment instanceof ClippingAttachment) {
let clip = <ClippingAttachment>(attachment);
clipper.clipStart(slot, clip);
continue;
} else continue; } else continue;
if (texture != null) { if (texture != null) {
@ -106,6 +126,16 @@ module spine.threejs {
mat.map = texture.texture; mat.map = texture.texture;
mat.needsUpdate = true; mat.needsUpdate = true;
} }
let skeleton = slot.bone.skeleton;
let skeletonColor = skeleton.color;
let slotColor = slot.color;
let alpha = skeletonColor.a * slotColor.a * attachmentColor.a;
let color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * attachmentColor.r,
skeletonColor.g * slotColor.g * attachmentColor.g,
skeletonColor.b * slotColor.b * attachmentColor.b,
alpha);
// FIXME per slot blending would require multiple material support // FIXME per slot blending would require multiple material support
//let slotBlendMode = slot.data.blendMode; //let slotBlendMode = slot.data.blendMode;
//if (slotBlendMode != blendMode) { //if (slotBlendMode != blendMode) {
@ -113,95 +143,28 @@ module spine.threejs {
// batcher.setBlendMode(getSourceGLBlendMode(this._gl, blendMode, premultipliedAlpha), getDestGLBlendMode(this._gl, blendMode)); // batcher.setBlendMode(getSourceGLBlendMode(this._gl, blendMode, premultipliedAlpha), getDestGLBlendMode(this._gl, blendMode));
//} //}
this.batcher.batch(vertices, triangles, z); if (clipper.isClipping()) {
clipper.clipTriangles(vertices, numFloats, triangles, triangles.length, uvs, color, null, false);
let clippedVertices = clipper.clippedVertices;
let clippedTriangles = clipper.clippedTriangles;
batcher.batch(clippedVertices, clippedVertices.length, clippedTriangles, clippedTriangles.length, z);
} else {
let verts = vertices;
for (let v = 2, u = 0, n = numFloats; v < n; v += vertexSize, u += 2) {
verts[v] = color.r;
verts[v + 1] = color.g;
verts[v + 2] = color.b;
verts[v + 3] = color.a;
verts[v + 4] = uvs[u];
verts[v + 5] = uvs[u + 1];
}
batcher.batch(vertices, numFloats, triangles, triangles.length, z);
}
z += zOffset; z += zOffset;
} }
} }
batcher.end(); batcher.end();
} }
private computeRegionVertices(slot: Slot, region: RegionAttachment, pma: boolean) {
let skeleton = slot.bone.skeleton;
let skeletonColor = skeleton.color;
let slotColor = slot.color;
let regionColor = region.color;
let alpha = skeletonColor.a * slotColor.a * regionColor.a;
let multiplier = pma ? alpha : 1;
let color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * regionColor.r * multiplier,
skeletonColor.g * slotColor.g * regionColor.g * multiplier,
skeletonColor.b * slotColor.b * regionColor.b * multiplier,
alpha);
region.computeWorldVertices(slot.bone, this.vertices, 0, SkeletonMesh.VERTEX_SIZE);
let vertices = this.vertices;
let uvs = region.uvs;
vertices[RegionAttachment.C1R] = color.r;
vertices[RegionAttachment.C1G] = color.g;
vertices[RegionAttachment.C1B] = color.b;
vertices[RegionAttachment.C1A] = color.a;
vertices[RegionAttachment.U1] = uvs[0];
vertices[RegionAttachment.V1] = uvs[1];
vertices[RegionAttachment.C2R] = color.r;
vertices[RegionAttachment.C2G] = color.g;
vertices[RegionAttachment.C2B] = color.b;
vertices[RegionAttachment.C2A] = color.a;
vertices[RegionAttachment.U2] = uvs[2];
vertices[RegionAttachment.V2] = uvs[3];
vertices[RegionAttachment.C3R] = color.r;
vertices[RegionAttachment.C3G] = color.g;
vertices[RegionAttachment.C3B] = color.b;
vertices[RegionAttachment.C3A] = color.a;
vertices[RegionAttachment.U3] = uvs[4];
vertices[RegionAttachment.V3] = uvs[5];
vertices[RegionAttachment.C4R] = color.r;
vertices[RegionAttachment.C4G] = color.g;
vertices[RegionAttachment.C4B] = color.b;
vertices[RegionAttachment.C4A] = color.a;
vertices[RegionAttachment.U4] = uvs[6];
vertices[RegionAttachment.V4] = uvs[7];
return vertices;
}
private computeMeshVertices(slot: Slot, mesh: MeshAttachment, pma: boolean) {
let skeleton = slot.bone.skeleton;
let skeletonColor = skeleton.color;
let slotColor = slot.color;
let regionColor = mesh.color;
let alpha = skeletonColor.a * slotColor.a * regionColor.a;
let multiplier = pma ? alpha : 1;
let color = this.tempColor;
color.set(skeletonColor.r * slotColor.r * regionColor.r * multiplier,
skeletonColor.g * slotColor.g * regionColor.g * multiplier,
skeletonColor.b * slotColor.b * regionColor.b * multiplier,
alpha);
let numVertices = mesh.worldVerticesLength / 2;
if (this.vertices.length < mesh.worldVerticesLength) {
this.vertices = Utils.newFloatArray(mesh.worldVerticesLength);
}
let vertices = this.vertices;
mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, vertices, 0, SkeletonMesh.VERTEX_SIZE);
let uvs = mesh.uvs;
for (let i = 0, n = numVertices, u = 0, v = 2; i < n; i++) {
vertices[v++] = color.r;
vertices[v++] = color.g;
vertices[v++] = color.b;
vertices[v++] = color.a;
vertices[v++] = uvs[u++];
vertices[v++] = uvs[u++];
v += 2;
}
return vertices;
}
} }
} }

6
spine-ts/webgl/example/test.html
View File

@ -12,8 +12,8 @@
</body> </body>
<script> <script>
var FILE = "coin"; var FILE = "raptor";
var ANIMATION = "rotate"; var ANIMATION = "walk";
var NUM_SKELETONS = 1; var NUM_SKELETONS = 1;
var SCALE = 0.5; var SCALE = 0.5;
@ -69,7 +69,7 @@ function load() {
stateData.defaultMix = mixDuration; stateData.defaultMix = mixDuration;
state.multipleMixing = false; state.multipleMixing = false;
state.setAnimation(0, "walk", true); state.setAnimation(0, ANIMATION, true);
skeleton.x = 0; skeleton.x = 0;
skeleton.y = 0; skeleton.y = 0;
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();