[ts] Added ShapeRenderer and SkeletonDebugRenderer, added to WebGL test

spine-ts/build/spine-all.d.ts

@@ -552,6 +552,8 @@ declare module spine {
         intersectsSegment(x1: number, y1: number, x2: number, y2: number): BoundingBoxAttachment;
         intersectsSegmentPolygon(polygon: ArrayLike<number>, x1: number, y1: number, x2: number, y2: number): boolean;
         getPolygon(boundingBox: BoundingBoxAttachment): ArrayLike<number>;
+        getWidth(): number;
+        getHeight(): number;
     }
 }
 declare module spine {
@@ -747,6 +749,7 @@ declare module spine {
         static sinDeg(degrees: number): number;
         static signum(value: number): number;
         static toInt(x: number): number;
+        static cbrt(x: number): number;
     }
     class Utils {
         static SUPPORTS_TYPED_ARRAYS: boolean;
@@ -773,6 +776,8 @@ declare module spine {
         y: number;
         constructor(x?: number, y?: number);
         set(x: number, y: number): Vector2;
+        length(): number;
+        normalize(): this;
     }
 }
 declare module spine {
@@ -809,6 +814,7 @@ declare module spine {
 }
 declare module spine {
     class BoundingBoxAttachment extends VertexAttachment {
+        color: Color;
         constructor(name: string);
     }
 }
@@ -837,6 +843,7 @@ declare module spine {
         lengths: Array<number>;
         closed: boolean;
         constantSpeed: boolean;
+        color: Color;
         constructor(name: string);
     }
 }
@@ -1115,6 +1122,69 @@ declare module spine.webgl {
         static newColored(gl: WebGLRenderingContext): Shader;
     }
 }
+declare module spine.webgl {
+    class ShapeRenderer implements Disposable {
+        private gl;
+        private isDrawing;
+        private mesh;
+        private shapeType;
+        private color;
+        private shader;
+        private vertexIndex;
+        private tmp;
+        constructor(gl: WebGLRenderingContext, maxVertices?: number);
+        begin(shader: Shader): void;
+        setColor(color: Color): void;
+        setColorWith(r: number, g: number, b: number, a: number): void;
+        point(x: number, y: number, color?: Color): void;
+        line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
+        triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color?: Color, color2?: Color, color3?: Color): void;
+        quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color?: Color, color2?: Color, color3?: Color, color4?: Color): void;
+        rect(filled: boolean, x: number, y: number, width: number, height: number, color?: Color): void;
+        rectLine(filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color?: Color): void;
+        x(x: number, y: number, size: number): void;
+        polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color?: Color): void;
+        circle(filled: boolean, x: number, y: number, radius: number, segments: number, color?: Color): void;
+        curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
+        private vertex(x, y, color);
+        end(): void;
+        private flush();
+        private check(shapeType, numVertices);
+        dispose(): void;
+    }
+    enum ShapeType {
+        Point,
+        Line,
+        Filled,
+    }
+}
+declare module spine.webgl {
+    class SkeletonDebugRenderer implements Disposable {
+        boneLineColor: Color;
+        boneOriginColor: Color;
+        attachmentLineColor: Color;
+        triangleLineColor: Color;
+        aabbColor: Color;
+        drawBones: boolean;
+        drawRegionAttachments: boolean;
+        drawBoundingBoxes: boolean;
+        drawMeshHull: boolean;
+        drawMeshTriangles: boolean;
+        drawPaths: boolean;
+        premultipliedAlpha: boolean;
+        scale: number;
+        boneWidth: number;
+        private gl;
+        private shapes;
+        private bounds;
+        private temp;
+        private static LIGHT_GRAY;
+        private static GREEN;
+        constructor(gl: WebGLRenderingContext);
+        draw(shader: Shader, skeleton: Skeleton): void;
+        dispose(): void;
+    }
+}
 declare module spine.webgl {
     class SkeletonRenderer {
         static QUAD_TRIANGLES: number[];

spine-ts/build/spine-all.js

@@ -2761,6 +2761,12 @@ var spine;
             var index = this.boundingBoxes.indexOf(boundingBox);
             return index == -1 ? null : this.polygons[index];
         };
+        SkeletonBounds.prototype.getWidth = function () {
+            return this.maxX - this.minX;
+        };
+        SkeletonBounds.prototype.getHeight = function () {
+            return this.maxY - this.minY;
+        };
         return SkeletonBounds;
     }());
     spine.SkeletonBounds = SkeletonBounds;
@@ -3115,6 +3121,9 @@ var spine;
                     if (box == null)
                         return null;
                     this.readVertices(map, box, map.vertexCount << 1);
+                    var color = this.getValue(map, "color", null);
+                    if (color != null)
+                        box.color.setFromString(color);
                     return box;
                 }
                 case "mesh":
@@ -3153,6 +3162,9 @@ var spine;
                     for (var i = 0; i < map.lengths.length; i++)
                         lengths[i++] = map.lengths[i] * scale;
                     path.lengths = lengths;
+                    var color = this.getValue(map, "color", null);
+                    if (color != null)
+                        path.color.setFromString(color);
                     return path;
                 }
             }
@@ -4025,6 +4037,10 @@ var spine;
         MathUtils.toInt = function (x) {
             return x > 0 ? Math.floor(x) : Math.ceil(x);
         };
+        MathUtils.cbrt = function (x) {
+            var y = Math.pow(Math.abs(x), 1 / 3);
+            return x < 0 ? -y : y;
+        };
         MathUtils.PI = 3.1415927;
         MathUtils.PI2 = MathUtils.PI * 2;
         MathUtils.radiansToDegrees = 180 / MathUtils.PI;
@@ -4123,6 +4139,19 @@ var spine;
             this.y = y;
             return this;
         };
+        Vector2.prototype.length = function () {
+            var x = this.x;
+            var y = this.y;
+            return Math.sqrt(x * x + y * y);
+        };
+        Vector2.prototype.normalize = function () {
+            var len = this.length();
+            if (len != 0) {
+                this.x /= len;
+                this.y /= len;
+            }
+            return this;
+        };
         return Vector2;
     }());
     spine.Vector2 = Vector2;
@@ -4231,6 +4260,7 @@ var spine;
         __extends(BoundingBoxAttachment, _super);
         function BoundingBoxAttachment(name) {
             _super.call(this, name);
+            this.color = new spine.Color(1, 1, 1, 1);
         }
         return BoundingBoxAttachment;
     }(spine.VertexAttachment));
@@ -4374,6 +4404,7 @@ var spine;
             _super.call(this, name);
             this.closed = false;
             this.constantSpeed = false;
+            this.color = new spine.Color(1, 1, 1, 1);
         }
         return PathAttachment;
     }(spine.VertexAttachment));
@@ -5172,7 +5203,7 @@ var spine;
                 this.indicesLength = indices.length;
             };
             Mesh.prototype.draw = function (shader, primitiveType) {
-                this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0 ? this.indicesLength : this.verticesLength);
+                this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0 ? this.indicesLength : this.verticesLength / this.elementsPerVertex);
             };
             Mesh.prototype.drawWithOffset = function (shader, primitiveType, offset, count) {
                 var gl = this.gl;
@@ -5515,6 +5546,489 @@ var spine;
     })(webgl = spine.webgl || (spine.webgl = {}));
 })(spine || (spine = {}));
 var spine;
+(function (spine) {
+    var webgl;
+    (function (webgl) {
+        var ShapeRenderer = (function () {
+            function ShapeRenderer(gl, maxVertices) {
+                if (maxVertices === void 0) { maxVertices = 10920; }
+                this.isDrawing = false;
+                this.shapeType = ShapeType.Filled;
+                this.color = new spine.Color(1, 1, 1, 1);
+                this.vertexIndex = 0;
+                this.tmp = new spine.Vector2();
+                if (maxVertices > 10920)
+                    throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
+                this.gl = gl;
+                this.mesh = new webgl.Mesh(gl, [new webgl.Position2Attribute(), new webgl.ColorAttribute()], maxVertices, 0);
+            }
+            ShapeRenderer.prototype.begin = function (shader) {
+                if (this.isDrawing)
+                    throw new Error("ShapeRenderer.begin() has already been called");
+                this.shader = shader;
+                this.vertexIndex = 0;
+                this.isDrawing = true;
+            };
+            ShapeRenderer.prototype.setColor = function (color) {
+                this.color.setFromColor(color);
+            };
+            ShapeRenderer.prototype.setColorWith = function (r, g, b, a) {
+                this.color.set(r, g, b, a);
+            };
+            ShapeRenderer.prototype.point = function (x, y, color) {
+                if (color === void 0) { color = null; }
+                this.check(ShapeType.Point, 1);
+                if (color === null)
+                    color = this.color;
+                this.vertex(x, y, color);
+            };
+            ShapeRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
+                if (color === void 0) { color = null; }
+                if (color2 === void 0) { color2 = null; }
+                this.check(ShapeType.Line, 2);
+                var vertices = this.mesh.getVertices();
+                var idx = this.vertexIndex;
+                if (color === null)
+                    color = this.color;
+                if (color2 === null)
+                    color2 = this.color;
+                this.vertex(x, y, color);
+                this.vertex(x2, y2, color2);
+            };
+            ShapeRenderer.prototype.triangle = function (filled, x, y, x2, y2, x3, y3, color, color2, color3) {
+                if (color === void 0) { color = null; }
+                if (color2 === void 0) { color2 = null; }
+                if (color3 === void 0) { color3 = null; }
+                this.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
+                var vertices = this.mesh.getVertices();
+                var idx = this.vertexIndex;
+                if (color === null)
+                    color = this.color;
+                if (color2 === null)
+                    color2 = this.color;
+                if (color3 === null)
+                    color3 = this.color;
+                if (filled) {
+                    this.vertex(x, y, color);
+                    this.vertex(x2, y2, color2);
+                    this.vertex(x3, y3, color3);
+                }
+                else {
+                    this.vertex(x, y, color);
+                    this.vertex(x2, y2, color2);
+                    this.vertex(x2, y2, color);
+                    this.vertex(x3, y3, color2);
+                    this.vertex(x3, y3, color);
+                    this.vertex(x, y, color2);
+                }
+            };
+            ShapeRenderer.prototype.quad = function (filled, x, y, x2, y2, x3, y3, x4, y4, color, color2, color3, color4) {
+                if (color === void 0) { color = null; }
+                if (color2 === void 0) { color2 = null; }
+                if (color3 === void 0) { color3 = null; }
+                if (color4 === void 0) { color4 = null; }
+                this.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
+                var vertices = this.mesh.getVertices();
+                var idx = this.vertexIndex;
+                if (color === null)
+                    color = this.color;
+                if (color2 === null)
+                    color2 = this.color;
+                if (color3 === null)
+                    color3 = this.color;
+                if (color4 === null)
+                    color4 = this.color;
+                if (filled) {
+                    this.vertex(x, y, color);
+                    this.vertex(x2, y2, color2);
+                    this.vertex(x3, y3, color3);
+                    this.vertex(x3, y3, color3);
+                    this.vertex(x4, y4, color4);
+                    this.vertex(x, y, color);
+                }
+                else {
+                    this.vertex(x, y, color);
+                    this.vertex(x2, y2, color2);
+                    this.vertex(x2, y2, color2);
+                    this.vertex(x3, y3, color3);
+                    this.vertex(x3, y3, color3);
+                    this.vertex(x4, y4, color4);
+                    this.vertex(x4, y4, color4);
+                    this.vertex(x, y, color);
+                }
+            };
+            ShapeRenderer.prototype.rect = function (filled, x, y, width, height, color) {
+                if (color === void 0) { color = null; }
+                this.quad(filled, x, y, x + width, y, x + width, y + height, x, y + height, color, color, color, color);
+            };
+            ShapeRenderer.prototype.rectLine = function (filled, x1, y1, x2, y2, width, color) {
+                if (color === void 0) { color = null; }
+                this.check(filled ? ShapeType.Filled : ShapeType.Line, 8);
+                if (color === null)
+                    color = this.color;
+                var t = this.tmp.set(y2 - y1, x1 - x2);
+                t.normalize();
+                width *= 0.5;
+                var tx = t.x * width;
+                var ty = t.y * width;
+                if (!filled) {
+                    this.vertex(x1 + tx, y1 + ty, color);
+                    this.vertex(x1 - tx, y1 - ty, color);
+                    this.vertex(x2 + tx, y2 + ty, color);
+                    this.vertex(x2 - tx, y2 - ty, color);
+                    this.vertex(x2 + tx, y2 + ty, color);
+                    this.vertex(x1 + tx, y1 + ty, color);
+                    this.vertex(x2 - tx, y2 - ty, color);
+                    this.vertex(x1 - tx, y1 - ty, color);
+                }
+                else {
+                    this.vertex(x1 + tx, y1 + ty, color);
+                    this.vertex(x1 - tx, y1 - ty, color);
+                    this.vertex(x2 + tx, y2 + ty, color);
+                    this.vertex(x2 - tx, y2 - ty, color);
+                    this.vertex(x2 + tx, y2 + ty, color);
+                    this.vertex(x1 - tx, y1 - ty, color);
+                }
+            };
+            ShapeRenderer.prototype.x = function (x, y, size) {
+                this.line(x - size, y - size, x + size, y + size);
+                this.line(x - size, y + size, x + size, y - size);
+            };
+            ShapeRenderer.prototype.polygon = function (polygonVertices, offset, count, color) {
+                if (color === void 0) { color = null; }
+                if (count < 3)
+                    throw new Error("Polygon must contain at least 3 vertices");
+                this.check(ShapeType.Line, count * 2);
+                if (color === null)
+                    color = this.color;
+                var vertices = this.mesh.getVertices();
+                var idx = this.vertexIndex;
+                offset <<= 1;
+                count <<= 1;
+                var firstX = polygonVertices[offset];
+                var firstY = polygonVertices[offset + 1];
+                var last = offset + count;
+                for (var i = offset, n = offset + count - 2; i < n; i += 2) {
+                    var x1 = polygonVertices[i];
+                    var y1 = polygonVertices[i + 1];
+                    var x2 = 0;
+                    var y2 = 0;
+                    if (i + 2 >= last) {
+                        x2 = firstX;
+                        y2 = firstY;
+                    }
+                    else {
+                        x2 = polygonVertices[i + 2];
+                        y2 = polygonVertices[i + 3];
+                    }
+                    this.vertex(x1, y1, color);
+                    this.vertex(x2, y2, color);
+                }
+            };
+            ShapeRenderer.prototype.circle = function (filled, x, y, radius, segments, color) {
+                if (color === void 0) { color = null; }
+                if (segments === 0)
+                    segments = Math.max(1, (6 * spine.MathUtils.cbrt(radius)) | 0);
+                if (segments <= 0)
+                    throw new Error("segments must be > 0.");
+                if (color === null)
+                    color = this.color;
+                var angle = 2 * spine.MathUtils.PI / segments;
+                var cos = Math.cos(angle);
+                var sin = Math.sin(angle);
+                var cx = radius, cy = 0;
+                if (!filled) {
+                    this.check(ShapeType.Line, segments * 2 + 2);
+                    for (var i = 0; i < segments; i++) {
+                        this.vertex(x + cx, y + cy, color);
+                        var temp_1 = cx;
+                        cx = cos * cx - sin * cy;
+                        cy = sin * temp_1 + cos * cy;
+                        this.vertex(x + cx, y + cy, color);
+                    }
+                    this.vertex(x + cx, y + cy, color);
+                }
+                else {
+                    this.check(ShapeType.Filled, segments * 3 + 3);
+                    segments--;
+                    for (var i = 0; i < segments; i++) {
+                        this.vertex(x, y, color);
+                        this.vertex(x + cx, y + cy, color);
+                        var temp_2 = cx;
+                        cx = cos * cx - sin * cy;
+                        cy = sin * temp_2 + cos * cy;
+                        this.vertex(x + cx, y + cy, color);
+                    }
+                    this.vertex(x, y, color);
+                    this.vertex(x + cx, y + cy, color);
+                }
+                var temp = cx;
+                cx = radius;
+                cy = 0;
+                this.vertex(x + cx, y + cy, color);
+            };
+            ShapeRenderer.prototype.curve = function (x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color) {
+                if (color === void 0) { color = null; }
+                this.check(ShapeType.Line, segments * 2 + 2);
+                if (color === null)
+                    color = this.color;
+                var subdiv_step = 1 / segments;
+                var subdiv_step2 = subdiv_step * subdiv_step;
+                var subdiv_step3 = subdiv_step * subdiv_step * subdiv_step;
+                var pre1 = 3 * subdiv_step;
+                var pre2 = 3 * subdiv_step2;
+                var pre4 = 6 * subdiv_step2;
+                var pre5 = 6 * subdiv_step3;
+                var tmp1x = x1 - cx1 * 2 + cx2;
+                var tmp1y = y1 - cy1 * 2 + cy2;
+                var tmp2x = (cx1 - cx2) * 3 - x1 + x2;
+                var tmp2y = (cy1 - cy2) * 3 - y1 + y2;
+                var fx = x1;
+                var fy = y1;
+                var dfx = (cx1 - x1) * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3;
+                var dfy = (cy1 - y1) * pre1 + tmp1y * pre2 + tmp2y * subdiv_step3;
+                var ddfx = tmp1x * pre4 + tmp2x * pre5;
+                var ddfy = tmp1y * pre4 + tmp2y * pre5;
+                var dddfx = tmp2x * pre5;
+                var dddfy = tmp2y * pre5;
+                while (segments-- > 0) {
+                    this.vertex(fx, fy, color);
+                    fx += dfx;
+                    fy += dfy;
+                    dfx += ddfx;
+                    dfy += ddfy;
+                    ddfx += dddfx;
+                    ddfy += dddfy;
+                    this.vertex(fx, fy, color);
+                }
+                this.vertex(fx, fy, color);
+                this.vertex(x2, y2, color);
+            };
+            ShapeRenderer.prototype.vertex = function (x, y, color) {
+                var idx = this.vertexIndex;
+                var vertices = this.mesh.getVertices();
+                vertices[idx++] = x;
+                vertices[idx++] = y;
+                vertices[idx++] = color.r;
+                vertices[idx++] = color.g;
+                vertices[idx++] = color.b;
+                vertices[idx++] = color.a;
+                this.vertexIndex = idx;
+            };
+            ShapeRenderer.prototype.end = function () {
+                if (!this.isDrawing)
+                    throw new Error("ShapeRenderer.begin() has not been called");
+                this.flush();
+                this.isDrawing = false;
+            };
+            ShapeRenderer.prototype.flush = function () {
+                if (this.vertexIndex == 0)
+                    return;
+                this.mesh.setVerticesLength(this.vertexIndex);
+                this.mesh.draw(this.shader, this.shapeType);
+                this.vertexIndex = 0;
+            };
+            ShapeRenderer.prototype.check = function (shapeType, numVertices) {
+                if (!this.isDrawing)
+                    throw new Error("ShapeRenderer.begin() has not been called");
+                if (this.shapeType == shapeType) {
+                    if (this.mesh.maxVertices() - this.mesh.numVertices() < numVertices)
+                        this.flush();
+                    else
+                        return;
+                }
+                else {
+                    this.flush();
+                    this.shapeType = shapeType;
+                }
+            };
+            ShapeRenderer.prototype.dispose = function () {
+                this.mesh.dispose();
+            };
+            return ShapeRenderer;
+        }());
+        webgl.ShapeRenderer = ShapeRenderer;
+        (function (ShapeType) {
+            ShapeType[ShapeType["Point"] = WebGLRenderingContext.POINTS] = "Point";
+            ShapeType[ShapeType["Line"] = WebGLRenderingContext.LINES] = "Line";
+            ShapeType[ShapeType["Filled"] = WebGLRenderingContext.TRIANGLES] = "Filled";
+        })(webgl.ShapeType || (webgl.ShapeType = {}));
+        var ShapeType = webgl.ShapeType;
+    })(webgl = spine.webgl || (spine.webgl = {}));
+})(spine || (spine = {}));
+var spine;
+(function (spine) {
+    var webgl;
+    (function (webgl) {
+        var SkeletonDebugRenderer = (function () {
+            function SkeletonDebugRenderer(gl) {
+                this.boneLineColor = new spine.Color(1, 0, 0, 1);
+                this.boneOriginColor = new spine.Color(0, 1, 0, 1);
+                this.attachmentLineColor = new spine.Color(0, 0, 1, 0.5);
+                this.triangleLineColor = new spine.Color(1, 0.64, 0, 0.5);
+                this.aabbColor = new spine.Color(0, 1, 0, 0.5);
+                this.drawBones = true;
+                this.drawRegionAttachments = true;
+                this.drawBoundingBoxes = true;
+                this.drawMeshHull = true;
+                this.drawMeshTriangles = true;
+                this.drawPaths = true;
+                this.premultipliedAlpha = false;
+                this.scale = 1;
+                this.boneWidth = 2;
+                this.bounds = new spine.SkeletonBounds();
+                this.temp = new Array();
+                this.gl = gl;
+                this.shapes = new webgl.ShapeRenderer(gl);
+            }
+            SkeletonDebugRenderer.prototype.draw = function (shader, skeleton) {
+                var skeletonX = skeleton.x;
+                var skeletonY = skeleton.y;
+                var gl = this.gl;
+                gl.enable(gl.BLEND);
+                var srcFunc = this.premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA;
+                gl.blendFunc(srcFunc, gl.ONE_MINUS_SRC_ALPHA);
+                var shapes = this.shapes;
+                var bones = skeleton.bones;
+                if (this.drawBones) {
+                    shapes.setColor(this.boneLineColor);
+                    shapes.begin(shader);
+                    for (var i = 0, n = bones.length; i < n; i++) {
+                        var bone = bones[i];
+                        if (bone.parent == null)
+                            continue;
+                        var x = skeletonX + bone.data.length * bone.a + bone.worldX;
+                        var y = skeletonY + bone.data.length * bone.c + bone.worldY;
+                        shapes.rectLine(true, skeletonX + bone.worldX, skeletonY + bone.worldY, x, y, this.boneWidth * this.scale);
+                    }
+                    shapes.end();
+                    shapes.begin(shader);
+                    shapes.x(skeletonX, skeletonY, 4 * this.scale);
+                }
+                else
+                    shapes.begin(shader);
+                if (this.drawRegionAttachments) {
+                    shapes.setColor(this.attachmentLineColor);
+                    var slots = skeleton.slots;
+                    for (var i = 0, n = slots.length; i < n; i++) {
+                        var slot = slots[i];
+                        var attachment = slot.getAttachment();
+                        if (attachment instanceof spine.RegionAttachment) {
+                            var regionAttachment = attachment;
+                            var vertices = regionAttachment.updateWorldVertices(slot, false);
+                            shapes.line(vertices[spine.RegionAttachment.X1], vertices[spine.RegionAttachment.Y1], vertices[spine.RegionAttachment.X2], vertices[spine.RegionAttachment.Y2]);
+                            shapes.line(vertices[spine.RegionAttachment.X2], vertices[spine.RegionAttachment.Y2], vertices[spine.RegionAttachment.X3], vertices[spine.RegionAttachment.Y3]);
+                            shapes.line(vertices[spine.RegionAttachment.X3], vertices[spine.RegionAttachment.Y3], vertices[spine.RegionAttachment.X4], vertices[spine.RegionAttachment.Y4]);
+                            shapes.line(vertices[spine.RegionAttachment.X4], vertices[spine.RegionAttachment.Y4], vertices[spine.RegionAttachment.X1], vertices[spine.RegionAttachment.Y1]);
+                        }
+                    }
+                }
+                if (this.drawMeshHull || this.drawMeshTriangles) {
+                    var slots = skeleton.slots;
+                    for (var i = 0, n = slots.length; i < n; i++) {
+                        var slot = slots[i];
+                        var attachment = slot.getAttachment();
+                        if (!(attachment instanceof spine.MeshAttachment))
+                            continue;
+                        var mesh = attachment;
+                        mesh.updateWorldVertices(slot, false);
+                        var vertices = mesh.worldVertices;
+                        var triangles = mesh.triangles;
+                        var hullLength = mesh.hullLength;
+                        if (this.drawMeshTriangles) {
+                            shapes.setColor(this.triangleLineColor);
+                            for (var ii = 0, nn = triangles.length; ii < nn; ii += 3) {
+                                var v1 = triangles[ii] * 8, v2 = triangles[ii + 1] * 8, v3 = triangles[ii + 2] * 8;
+                                shapes.triangle(false, vertices[v1], vertices[v1 + 1], vertices[v2], vertices[v2 + 1], vertices[v3], vertices[v3 + 1]);
+                            }
+                        }
+                        if (this.drawMeshHull && hullLength > 0) {
+                            shapes.setColor(this.attachmentLineColor);
+                            hullLength = (hullLength >> 1) * 8;
+                            var lastX = vertices[hullLength - 8], lastY = vertices[hullLength - 7];
+                            for (var ii = 0, nn = hullLength; ii < nn; ii += 8) {
+                                var x = vertices[ii], y = vertices[ii + 1];
+                                shapes.line(x, y, lastX, lastY);
+                                lastX = x;
+                                lastY = y;
+                            }
+                        }
+                    }
+                }
+                if (this.drawBoundingBoxes) {
+                    var bounds = this.bounds;
+                    bounds.update(skeleton, true);
+                    shapes.setColor(this.aabbColor);
+                    shapes.rect(false, bounds.minX, bounds.minY, bounds.getWidth(), bounds.getHeight());
+                    var polygons = bounds.polygons;
+                    var boxes = bounds.boundingBoxes;
+                    for (var i = 0, n = polygons.length; i < n; i++) {
+                        var polygon = polygons[i];
+                        shapes.setColor(boxes[i].color);
+                        shapes.polygon(polygon, 0, polygon.length);
+                    }
+                }
+                if (this.drawPaths) {
+                    var slots = skeleton.slots;
+                    for (var i = 0, n = slots.length; i < n; i++) {
+                        var slot = slots[i];
+                        var attachment = slot.getAttachment();
+                        if (!(attachment instanceof spine.PathAttachment))
+                            continue;
+                        var path = attachment;
+                        var nn = path.worldVerticesLength;
+                        var world = this.temp = spine.Utils.setArraySize(this.temp, nn, 0);
+                        path.computeWorldVertices(slot, world);
+                        var color = path.color;
+                        var x1 = world[2], y1 = world[3], x2 = 0, y2 = 0;
+                        if (path.closed) {
+                            shapes.setColor(color);
+                            var cx1 = world[0], cy1 = world[1], cx2 = world[nn - 2], cy2 = world[nn - 1];
+                            x2 = world[nn - 4];
+                            y2 = world[nn - 3];
+                            shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
+                            shapes.setColor(SkeletonDebugRenderer.LIGHT_GRAY);
+                            shapes.line(x1, y1, cx1, cy1);
+                            shapes.line(x2, y2, cx2, cy2);
+                        }
+                        nn -= 4;
+                        for (var ii = 4; ii < nn; ii += 6) {
+                            var cx1 = world[ii], cy1 = world[ii + 1], cx2 = world[ii + 2], cy2 = world[ii + 3];
+                            x2 = world[ii + 4];
+                            y2 = world[ii + 5];
+                            shapes.setColor(color);
+                            shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
+                            shapes.setColor(SkeletonDebugRenderer.LIGHT_GRAY);
+                            shapes.line(x1, y1, cx1, cy1);
+                            shapes.line(x2, y2, cx2, cy2);
+                            x1 = x2;
+                            y1 = y2;
+                        }
+                    }
+                }
+                shapes.end();
+                shapes.begin(shader);
+                if (this.drawBones) {
+                    shapes.setColor(this.boneOriginColor);
+                    for (var i = 0, n = bones.length; i < n; i++) {
+                        var bone = bones[i];
+                        shapes.setColor(SkeletonDebugRenderer.GREEN);
+                        shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, 8);
+                    }
+                }
+                shapes.end();
+            };
+            SkeletonDebugRenderer.prototype.dispose = function () {
+                this.shapes.dispose();
+            };
+            SkeletonDebugRenderer.LIGHT_GRAY = new spine.Color(192 / 255, 192 / 255, 192 / 255, 1);
+            SkeletonDebugRenderer.GREEN = new spine.Color(0, 1, 0, 1);
+            return SkeletonDebugRenderer;
+        }());
+        webgl.SkeletonDebugRenderer = SkeletonDebugRenderer;
+    })(webgl = spine.webgl || (spine.webgl = {}));
+})(spine || (spine = {}));
+var spine;
 (function (spine) {
     var webgl;
     (function (webgl) {

spine-ts/build/spine-core.d.ts

@@ -486,6 +486,8 @@ declare module spine {
         intersectsSegment(x1: number, y1: number, x2: number, y2: number): BoundingBoxAttachment;
         intersectsSegmentPolygon(polygon: ArrayLike<number>, x1: number, y1: number, x2: number, y2: number): boolean;
         getPolygon(boundingBox: BoundingBoxAttachment): ArrayLike<number>;
+        getWidth(): number;
+        getHeight(): number;
     }
 }
 declare module spine {
@@ -721,6 +723,7 @@ declare module spine {
         static sinDeg(degrees: number): number;
         static signum(value: number): number;
         static toInt(x: number): number;
+        static cbrt(x: number): number;
     }
     class Utils {
         static SUPPORTS_TYPED_ARRAYS: boolean;
@@ -747,6 +750,8 @@ declare module spine {
         y: number;
         constructor(x?: number, y?: number);
         set(x: number, y: number): Vector2;
+        length(): number;
+        normalize(): this;
     }
 }
 declare module spine {
@@ -783,6 +788,7 @@ declare module spine {
 }
 declare module spine {
     class BoundingBoxAttachment extends VertexAttachment {
+        color: Color;
         constructor(name: string);
     }
 }
@@ -811,6 +817,7 @@ declare module spine {
         lengths: Array<number>;
         closed: boolean;
         constantSpeed: boolean;
+        color: Color;
         constructor(name: string);
     }
 }

spine-ts/build/spine-core.js

@@ -2519,6 +2519,12 @@ var spine;
             var index = this.boundingBoxes.indexOf(boundingBox);
             return index == -1 ? null : this.polygons[index];
         };
+        SkeletonBounds.prototype.getWidth = function () {
+            return this.maxX - this.minX;
+        };
+        SkeletonBounds.prototype.getHeight = function () {
+            return this.maxY - this.minY;
+        };
         return SkeletonBounds;
     }());
     spine.SkeletonBounds = SkeletonBounds;
@@ -2873,6 +2879,9 @@ var spine;
                     if (box == null)
                         return null;
                     this.readVertices(map, box, map.vertexCount << 1);
+                    var color = this.getValue(map, "color", null);
+                    if (color != null)
+                        box.color.setFromString(color);
                     return box;
                 }
                 case "mesh":
@@ -2911,6 +2920,9 @@ var spine;
                     for (var i = 0; i < map.lengths.length; i++)
                         lengths[i++] = map.lengths[i] * scale;
                     path.lengths = lengths;
+                    var color = this.getValue(map, "color", null);
+                    if (color != null)
+                        path.color.setFromString(color);
                     return path;
                 }
             }
@@ -3849,6 +3861,10 @@ var spine;
         MathUtils.toInt = function (x) {
             return x > 0 ? Math.floor(x) : Math.ceil(x);
         };
+        MathUtils.cbrt = function (x) {
+            var y = Math.pow(Math.abs(x), 1 / 3);
+            return x < 0 ? -y : y;
+        };
         MathUtils.PI = 3.1415927;
         MathUtils.PI2 = MathUtils.PI * 2;
         MathUtils.radiansToDegrees = 180 / MathUtils.PI;
@@ -3947,6 +3963,19 @@ var spine;
             this.y = y;
             return this;
         };
+        Vector2.prototype.length = function () {
+            var x = this.x;
+            var y = this.y;
+            return Math.sqrt(x * x + y * y);
+        };
+        Vector2.prototype.normalize = function () {
+            var len = this.length();
+            if (len != 0) {
+                this.x /= len;
+                this.y /= len;
+            }
+            return this;
+        };
         return Vector2;
     }());
     spine.Vector2 = Vector2;
@@ -4055,6 +4084,7 @@ var spine;
         __extends(BoundingBoxAttachment, _super);
         function BoundingBoxAttachment(name) {
             _super.call(this, name);
+            this.color = new spine.Color(1, 1, 1, 1);
         }
         return BoundingBoxAttachment;
     }(spine.VertexAttachment));
@@ -4198,6 +4228,7 @@ var spine;
             _super.call(this, name);
             this.closed = false;
             this.constantSpeed = false;
+            this.color = new spine.Color(1, 1, 1, 1);
         }
         return PathAttachment;
     }(spine.VertexAttachment));

spine-ts/build/spine-threejs.d.ts

@@ -486,6 +486,8 @@ declare module spine {
         intersectsSegment(x1: number, y1: number, x2: number, y2: number): BoundingBoxAttachment;
         intersectsSegmentPolygon(polygon: ArrayLike<number>, x1: number, y1: number, x2: number, y2: number): boolean;
         getPolygon(boundingBox: BoundingBoxAttachment): ArrayLike<number>;
+        getWidth(): number;
+        getHeight(): number;
     }
 }
 declare module spine {
@@ -721,6 +723,7 @@ declare module spine {
         static sinDeg(degrees: number): number;
         static signum(value: number): number;
         static toInt(x: number): number;
+        static cbrt(x: number): number;
     }
     class Utils {
         static SUPPORTS_TYPED_ARRAYS: boolean;
@@ -747,6 +750,8 @@ declare module spine {
         y: number;
         constructor(x?: number, y?: number);
         set(x: number, y: number): Vector2;
+        length(): number;
+        normalize(): this;
     }
 }
 declare module spine {
@@ -783,6 +788,7 @@ declare module spine {
 }
 declare module spine {
     class BoundingBoxAttachment extends VertexAttachment {
+        color: Color;
         constructor(name: string);
     }
 }
@@ -811,6 +817,7 @@ declare module spine {
         lengths: Array<number>;
         closed: boolean;
         constantSpeed: boolean;
+        color: Color;
         constructor(name: string);
     }
 }

spine-ts/build/spine-threejs.js

@@ -2519,6 +2519,12 @@ var spine;
             var index = this.boundingBoxes.indexOf(boundingBox);
             return index == -1 ? null : this.polygons[index];
         };
+        SkeletonBounds.prototype.getWidth = function () {
+            return this.maxX - this.minX;
+        };
+        SkeletonBounds.prototype.getHeight = function () {
+            return this.maxY - this.minY;
+        };
         return SkeletonBounds;
     }());
     spine.SkeletonBounds = SkeletonBounds;
@@ -2873,6 +2879,9 @@ var spine;
                     if (box == null)
                         return null;
                     this.readVertices(map, box, map.vertexCount << 1);
+                    var color = this.getValue(map, "color", null);
+                    if (color != null)
+                        box.color.setFromString(color);
                     return box;
                 }
                 case "mesh":
@@ -2911,6 +2920,9 @@ var spine;
                     for (var i = 0; i < map.lengths.length; i++)
                         lengths[i++] = map.lengths[i] * scale;
                     path.lengths = lengths;
+                    var color = this.getValue(map, "color", null);
+                    if (color != null)
+                        path.color.setFromString(color);
                     return path;
                 }
             }
@@ -3849,6 +3861,10 @@ var spine;
         MathUtils.toInt = function (x) {
             return x > 0 ? Math.floor(x) : Math.ceil(x);
         };
+        MathUtils.cbrt = function (x) {
+            var y = Math.pow(Math.abs(x), 1 / 3);
+            return x < 0 ? -y : y;
+        };
         MathUtils.PI = 3.1415927;
         MathUtils.PI2 = MathUtils.PI * 2;
         MathUtils.radiansToDegrees = 180 / MathUtils.PI;
@@ -3947,6 +3963,19 @@ var spine;
             this.y = y;
             return this;
         };
+        Vector2.prototype.length = function () {
+            var x = this.x;
+            var y = this.y;
+            return Math.sqrt(x * x + y * y);
+        };
+        Vector2.prototype.normalize = function () {
+            var len = this.length();
+            if (len != 0) {
+                this.x /= len;
+                this.y /= len;
+            }
+            return this;
+        };
         return Vector2;
     }());
     spine.Vector2 = Vector2;
@@ -4055,6 +4084,7 @@ var spine;
         __extends(BoundingBoxAttachment, _super);
         function BoundingBoxAttachment(name) {
             _super.call(this, name);
+            this.color = new spine.Color(1, 1, 1, 1);
         }
         return BoundingBoxAttachment;
     }(spine.VertexAttachment));
@@ -4198,6 +4228,7 @@ var spine;
             _super.call(this, name);
             this.closed = false;
             this.constantSpeed = false;
+            this.color = new spine.Color(1, 1, 1, 1);
         }
         return PathAttachment;
     }(spine.VertexAttachment));

spine-ts/build/spine-webgl.d.ts

@@ -486,6 +486,8 @@ declare module spine {
         intersectsSegment(x1: number, y1: number, x2: number, y2: number): BoundingBoxAttachment;
         intersectsSegmentPolygon(polygon: ArrayLike<number>, x1: number, y1: number, x2: number, y2: number): boolean;
         getPolygon(boundingBox: BoundingBoxAttachment): ArrayLike<number>;
+        getWidth(): number;
+        getHeight(): number;
     }
 }
 declare module spine {
@@ -721,6 +723,7 @@ declare module spine {
         static sinDeg(degrees: number): number;
         static signum(value: number): number;
         static toInt(x: number): number;
+        static cbrt(x: number): number;
     }
     class Utils {
         static SUPPORTS_TYPED_ARRAYS: boolean;
@@ -747,6 +750,8 @@ declare module spine {
         y: number;
         constructor(x?: number, y?: number);
         set(x: number, y: number): Vector2;
+        length(): number;
+        normalize(): this;
     }
 }
 declare module spine {
@@ -783,6 +788,7 @@ declare module spine {
 }
 declare module spine {
     class BoundingBoxAttachment extends VertexAttachment {
+        color: Color;
         constructor(name: string);
     }
 }
@@ -811,6 +817,7 @@ declare module spine {
         lengths: Array<number>;
         closed: boolean;
         constantSpeed: boolean;
+        color: Color;
         constructor(name: string);
     }
 }
@@ -1045,6 +1052,69 @@ declare module spine.webgl {
         static newColored(gl: WebGLRenderingContext): Shader;
     }
 }
+declare module spine.webgl {
+    class ShapeRenderer implements Disposable {
+        private gl;
+        private isDrawing;
+        private mesh;
+        private shapeType;
+        private color;
+        private shader;
+        private vertexIndex;
+        private tmp;
+        constructor(gl: WebGLRenderingContext, maxVertices?: number);
+        begin(shader: Shader): void;
+        setColor(color: Color): void;
+        setColorWith(r: number, g: number, b: number, a: number): void;
+        point(x: number, y: number, color?: Color): void;
+        line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
+        triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color?: Color, color2?: Color, color3?: Color): void;
+        quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color?: Color, color2?: Color, color3?: Color, color4?: Color): void;
+        rect(filled: boolean, x: number, y: number, width: number, height: number, color?: Color): void;
+        rectLine(filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color?: Color): void;
+        x(x: number, y: number, size: number): void;
+        polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color?: Color): void;
+        circle(filled: boolean, x: number, y: number, radius: number, segments: number, color?: Color): void;
+        curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
+        private vertex(x, y, color);
+        end(): void;
+        private flush();
+        private check(shapeType, numVertices);
+        dispose(): void;
+    }
+    enum ShapeType {
+        Point,
+        Line,
+        Filled,
+    }
+}
+declare module spine.webgl {
+    class SkeletonDebugRenderer implements Disposable {
+        boneLineColor: Color;
+        boneOriginColor: Color;
+        attachmentLineColor: Color;
+        triangleLineColor: Color;
+        aabbColor: Color;
+        drawBones: boolean;
+        drawRegionAttachments: boolean;
+        drawBoundingBoxes: boolean;
+        drawMeshHull: boolean;
+        drawMeshTriangles: boolean;
+        drawPaths: boolean;
+        premultipliedAlpha: boolean;
+        scale: number;
+        boneWidth: number;
+        private gl;
+        private shapes;
+        private bounds;
+        private temp;
+        private static LIGHT_GRAY;
+        private static GREEN;
+        constructor(gl: WebGLRenderingContext);
+        draw(shader: Shader, skeleton: Skeleton): void;
+        dispose(): void;
+    }
+}
 declare module spine.webgl {
     class SkeletonRenderer {
         static QUAD_TRIANGLES: number[];

spine-ts/build/spine-webgl.js

@@ -2519,6 +2519,12 @@ var spine;
             var index = this.boundingBoxes.indexOf(boundingBox);
             return index == -1 ? null : this.polygons[index];
         };
+        SkeletonBounds.prototype.getWidth = function () {
+            return this.maxX - this.minX;
+        };
+        SkeletonBounds.prototype.getHeight = function () {
+            return this.maxY - this.minY;
+        };
         return SkeletonBounds;
     }());
     spine.SkeletonBounds = SkeletonBounds;
@@ -2873,6 +2879,9 @@ var spine;
                     if (box == null)
                         return null;
                     this.readVertices(map, box, map.vertexCount << 1);
+                    var color = this.getValue(map, "color", null);
+                    if (color != null)
+                        box.color.setFromString(color);
                     return box;
                 }
                 case "mesh":
@@ -2911,6 +2920,9 @@ var spine;
                     for (var i = 0; i < map.lengths.length; i++)
                         lengths[i++] = map.lengths[i] * scale;
                     path.lengths = lengths;
+                    var color = this.getValue(map, "color", null);
+                    if (color != null)
+                        path.color.setFromString(color);
                     return path;
                 }
             }
@@ -3849,6 +3861,10 @@ var spine;
         MathUtils.toInt = function (x) {
             return x > 0 ? Math.floor(x) : Math.ceil(x);
         };
+        MathUtils.cbrt = function (x) {
+            var y = Math.pow(Math.abs(x), 1 / 3);
+            return x < 0 ? -y : y;
+        };
         MathUtils.PI = 3.1415927;
         MathUtils.PI2 = MathUtils.PI * 2;
         MathUtils.radiansToDegrees = 180 / MathUtils.PI;
@@ -3947,6 +3963,19 @@ var spine;
             this.y = y;
             return this;
         };
+        Vector2.prototype.length = function () {
+            var x = this.x;
+            var y = this.y;
+            return Math.sqrt(x * x + y * y);
+        };
+        Vector2.prototype.normalize = function () {
+            var len = this.length();
+            if (len != 0) {
+                this.x /= len;
+                this.y /= len;
+            }
+            return this;
+        };
         return Vector2;
     }());
     spine.Vector2 = Vector2;
@@ -4055,6 +4084,7 @@ var spine;
         __extends(BoundingBoxAttachment, _super);
         function BoundingBoxAttachment(name) {
             _super.call(this, name);
+            this.color = new spine.Color(1, 1, 1, 1);
         }
         return BoundingBoxAttachment;
     }(spine.VertexAttachment));
@@ -4198,6 +4228,7 @@ var spine;
             _super.call(this, name);
             this.closed = false;
             this.constantSpeed = false;
+            this.color = new spine.Color(1, 1, 1, 1);
         }
         return PathAttachment;
     }(spine.VertexAttachment));
@@ -4751,7 +4782,7 @@ var spine;
                 this.indicesLength = indices.length;
             };
             Mesh.prototype.draw = function (shader, primitiveType) {
-                this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0 ? this.indicesLength : this.verticesLength);
+                this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0 ? this.indicesLength : this.verticesLength / this.elementsPerVertex);
             };
             Mesh.prototype.drawWithOffset = function (shader, primitiveType, offset, count) {
                 var gl = this.gl;
@@ -5094,6 +5125,489 @@ var spine;
     })(webgl = spine.webgl || (spine.webgl = {}));
 })(spine || (spine = {}));
 var spine;
+(function (spine) {
+    var webgl;
+    (function (webgl) {
+        var ShapeRenderer = (function () {
+            function ShapeRenderer(gl, maxVertices) {
+                if (maxVertices === void 0) { maxVertices = 10920; }
+                this.isDrawing = false;
+                this.shapeType = ShapeType.Filled;
+                this.color = new spine.Color(1, 1, 1, 1);
+                this.vertexIndex = 0;
+                this.tmp = new spine.Vector2();
+                if (maxVertices > 10920)
+                    throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
+                this.gl = gl;
+                this.mesh = new webgl.Mesh(gl, [new webgl.Position2Attribute(), new webgl.ColorAttribute()], maxVertices, 0);
+            }
+            ShapeRenderer.prototype.begin = function (shader) {
+                if (this.isDrawing)
+                    throw new Error("ShapeRenderer.begin() has already been called");
+                this.shader = shader;
+                this.vertexIndex = 0;
+                this.isDrawing = true;
+            };
+            ShapeRenderer.prototype.setColor = function (color) {
+                this.color.setFromColor(color);
+            };
+            ShapeRenderer.prototype.setColorWith = function (r, g, b, a) {
+                this.color.set(r, g, b, a);
+            };
+            ShapeRenderer.prototype.point = function (x, y, color) {
+                if (color === void 0) { color = null; }
+                this.check(ShapeType.Point, 1);
+                if (color === null)
+                    color = this.color;
+                this.vertex(x, y, color);
+            };
+            ShapeRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
+                if (color === void 0) { color = null; }
+                if (color2 === void 0) { color2 = null; }
+                this.check(ShapeType.Line, 2);
+                var vertices = this.mesh.getVertices();
+                var idx = this.vertexIndex;
+                if (color === null)
+                    color = this.color;
+                if (color2 === null)
+                    color2 = this.color;
+                this.vertex(x, y, color);
+                this.vertex(x2, y2, color2);
+            };
+            ShapeRenderer.prototype.triangle = function (filled, x, y, x2, y2, x3, y3, color, color2, color3) {
+                if (color === void 0) { color = null; }
+                if (color2 === void 0) { color2 = null; }
+                if (color3 === void 0) { color3 = null; }
+                this.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
+                var vertices = this.mesh.getVertices();
+                var idx = this.vertexIndex;
+                if (color === null)
+                    color = this.color;
+                if (color2 === null)
+                    color2 = this.color;
+                if (color3 === null)
+                    color3 = this.color;
+                if (filled) {
+                    this.vertex(x, y, color);
+                    this.vertex(x2, y2, color2);
+                    this.vertex(x3, y3, color3);
+                }
+                else {
+                    this.vertex(x, y, color);
+                    this.vertex(x2, y2, color2);
+                    this.vertex(x2, y2, color);
+                    this.vertex(x3, y3, color2);
+                    this.vertex(x3, y3, color);
+                    this.vertex(x, y, color2);
+                }
+            };
+            ShapeRenderer.prototype.quad = function (filled, x, y, x2, y2, x3, y3, x4, y4, color, color2, color3, color4) {
+                if (color === void 0) { color = null; }
+                if (color2 === void 0) { color2 = null; }
+                if (color3 === void 0) { color3 = null; }
+                if (color4 === void 0) { color4 = null; }
+                this.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
+                var vertices = this.mesh.getVertices();
+                var idx = this.vertexIndex;
+                if (color === null)
+                    color = this.color;
+                if (color2 === null)
+                    color2 = this.color;
+                if (color3 === null)
+                    color3 = this.color;
+                if (color4 === null)
+                    color4 = this.color;
+                if (filled) {
+                    this.vertex(x, y, color);
+                    this.vertex(x2, y2, color2);
+                    this.vertex(x3, y3, color3);
+                    this.vertex(x3, y3, color3);
+                    this.vertex(x4, y4, color4);
+                    this.vertex(x, y, color);
+                }
+                else {
+                    this.vertex(x, y, color);
+                    this.vertex(x2, y2, color2);
+                    this.vertex(x2, y2, color2);
+                    this.vertex(x3, y3, color3);
+                    this.vertex(x3, y3, color3);
+                    this.vertex(x4, y4, color4);
+                    this.vertex(x4, y4, color4);
+                    this.vertex(x, y, color);
+                }
+            };
+            ShapeRenderer.prototype.rect = function (filled, x, y, width, height, color) {
+                if (color === void 0) { color = null; }
+                this.quad(filled, x, y, x + width, y, x + width, y + height, x, y + height, color, color, color, color);
+            };
+            ShapeRenderer.prototype.rectLine = function (filled, x1, y1, x2, y2, width, color) {
+                if (color === void 0) { color = null; }
+                this.check(filled ? ShapeType.Filled : ShapeType.Line, 8);
+                if (color === null)
+                    color = this.color;
+                var t = this.tmp.set(y2 - y1, x1 - x2);
+                t.normalize();
+                width *= 0.5;
+                var tx = t.x * width;
+                var ty = t.y * width;
+                if (!filled) {
+                    this.vertex(x1 + tx, y1 + ty, color);
+                    this.vertex(x1 - tx, y1 - ty, color);
+                    this.vertex(x2 + tx, y2 + ty, color);
+                    this.vertex(x2 - tx, y2 - ty, color);
+                    this.vertex(x2 + tx, y2 + ty, color);
+                    this.vertex(x1 + tx, y1 + ty, color);
+                    this.vertex(x2 - tx, y2 - ty, color);
+                    this.vertex(x1 - tx, y1 - ty, color);
+                }
+                else {
+                    this.vertex(x1 + tx, y1 + ty, color);
+                    this.vertex(x1 - tx, y1 - ty, color);
+                    this.vertex(x2 + tx, y2 + ty, color);
+                    this.vertex(x2 - tx, y2 - ty, color);
+                    this.vertex(x2 + tx, y2 + ty, color);
+                    this.vertex(x1 - tx, y1 - ty, color);
+                }
+            };
+            ShapeRenderer.prototype.x = function (x, y, size) {
+                this.line(x - size, y - size, x + size, y + size);
+                this.line(x - size, y + size, x + size, y - size);
+            };
+            ShapeRenderer.prototype.polygon = function (polygonVertices, offset, count, color) {
+                if (color === void 0) { color = null; }
+                if (count < 3)
+                    throw new Error("Polygon must contain at least 3 vertices");
+                this.check(ShapeType.Line, count * 2);
+                if (color === null)
+                    color = this.color;
+                var vertices = this.mesh.getVertices();
+                var idx = this.vertexIndex;
+                offset <<= 1;
+                count <<= 1;
+                var firstX = polygonVertices[offset];
+                var firstY = polygonVertices[offset + 1];
+                var last = offset + count;
+                for (var i = offset, n = offset + count - 2; i < n; i += 2) {
+                    var x1 = polygonVertices[i];
+                    var y1 = polygonVertices[i + 1];
+                    var x2 = 0;
+                    var y2 = 0;
+                    if (i + 2 >= last) {
+                        x2 = firstX;
+                        y2 = firstY;
+                    }
+                    else {
+                        x2 = polygonVertices[i + 2];
+                        y2 = polygonVertices[i + 3];
+                    }
+                    this.vertex(x1, y1, color);
+                    this.vertex(x2, y2, color);
+                }
+            };
+            ShapeRenderer.prototype.circle = function (filled, x, y, radius, segments, color) {
+                if (color === void 0) { color = null; }
+                if (segments === 0)
+                    segments = Math.max(1, (6 * spine.MathUtils.cbrt(radius)) | 0);
+                if (segments <= 0)
+                    throw new Error("segments must be > 0.");
+                if (color === null)
+                    color = this.color;
+                var angle = 2 * spine.MathUtils.PI / segments;
+                var cos = Math.cos(angle);
+                var sin = Math.sin(angle);
+                var cx = radius, cy = 0;
+                if (!filled) {
+                    this.check(ShapeType.Line, segments * 2 + 2);
+                    for (var i = 0; i < segments; i++) {
+                        this.vertex(x + cx, y + cy, color);
+                        var temp_1 = cx;
+                        cx = cos * cx - sin * cy;
+                        cy = sin * temp_1 + cos * cy;
+                        this.vertex(x + cx, y + cy, color);
+                    }
+                    this.vertex(x + cx, y + cy, color);
+                }
+                else {
+                    this.check(ShapeType.Filled, segments * 3 + 3);
+                    segments--;
+                    for (var i = 0; i < segments; i++) {
+                        this.vertex(x, y, color);
+                        this.vertex(x + cx, y + cy, color);
+                        var temp_2 = cx;
+                        cx = cos * cx - sin * cy;
+                        cy = sin * temp_2 + cos * cy;
+                        this.vertex(x + cx, y + cy, color);
+                    }
+                    this.vertex(x, y, color);
+                    this.vertex(x + cx, y + cy, color);
+                }
+                var temp = cx;
+                cx = radius;
+                cy = 0;
+                this.vertex(x + cx, y + cy, color);
+            };
+            ShapeRenderer.prototype.curve = function (x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color) {
+                if (color === void 0) { color = null; }
+                this.check(ShapeType.Line, segments * 2 + 2);
+                if (color === null)
+                    color = this.color;
+                var subdiv_step = 1 / segments;
+                var subdiv_step2 = subdiv_step * subdiv_step;
+                var subdiv_step3 = subdiv_step * subdiv_step * subdiv_step;
+                var pre1 = 3 * subdiv_step;
+                var pre2 = 3 * subdiv_step2;
+                var pre4 = 6 * subdiv_step2;
+                var pre5 = 6 * subdiv_step3;
+                var tmp1x = x1 - cx1 * 2 + cx2;
+                var tmp1y = y1 - cy1 * 2 + cy2;
+                var tmp2x = (cx1 - cx2) * 3 - x1 + x2;
+                var tmp2y = (cy1 - cy2) * 3 - y1 + y2;
+                var fx = x1;
+                var fy = y1;
+                var dfx = (cx1 - x1) * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3;
+                var dfy = (cy1 - y1) * pre1 + tmp1y * pre2 + tmp2y * subdiv_step3;
+                var ddfx = tmp1x * pre4 + tmp2x * pre5;
+                var ddfy = tmp1y * pre4 + tmp2y * pre5;
+                var dddfx = tmp2x * pre5;
+                var dddfy = tmp2y * pre5;
+                while (segments-- > 0) {
+                    this.vertex(fx, fy, color);
+                    fx += dfx;
+                    fy += dfy;
+                    dfx += ddfx;
+                    dfy += ddfy;
+                    ddfx += dddfx;
+                    ddfy += dddfy;
+                    this.vertex(fx, fy, color);
+                }
+                this.vertex(fx, fy, color);
+                this.vertex(x2, y2, color);
+            };
+            ShapeRenderer.prototype.vertex = function (x, y, color) {
+                var idx = this.vertexIndex;
+                var vertices = this.mesh.getVertices();
+                vertices[idx++] = x;
+                vertices[idx++] = y;
+                vertices[idx++] = color.r;
+                vertices[idx++] = color.g;
+                vertices[idx++] = color.b;
+                vertices[idx++] = color.a;
+                this.vertexIndex = idx;
+            };
+            ShapeRenderer.prototype.end = function () {
+                if (!this.isDrawing)
+                    throw new Error("ShapeRenderer.begin() has not been called");
+                this.flush();
+                this.isDrawing = false;
+            };
+            ShapeRenderer.prototype.flush = function () {
+                if (this.vertexIndex == 0)
+                    return;
+                this.mesh.setVerticesLength(this.vertexIndex);
+                this.mesh.draw(this.shader, this.shapeType);
+                this.vertexIndex = 0;
+            };
+            ShapeRenderer.prototype.check = function (shapeType, numVertices) {
+                if (!this.isDrawing)
+                    throw new Error("ShapeRenderer.begin() has not been called");
+                if (this.shapeType == shapeType) {
+                    if (this.mesh.maxVertices() - this.mesh.numVertices() < numVertices)
+                        this.flush();
+                    else
+                        return;
+                }
+                else {
+                    this.flush();
+                    this.shapeType = shapeType;
+                }
+            };
+            ShapeRenderer.prototype.dispose = function () {
+                this.mesh.dispose();
+            };
+            return ShapeRenderer;
+        }());
+        webgl.ShapeRenderer = ShapeRenderer;
+        (function (ShapeType) {
+            ShapeType[ShapeType["Point"] = WebGLRenderingContext.POINTS] = "Point";
+            ShapeType[ShapeType["Line"] = WebGLRenderingContext.LINES] = "Line";
+            ShapeType[ShapeType["Filled"] = WebGLRenderingContext.TRIANGLES] = "Filled";
+        })(webgl.ShapeType || (webgl.ShapeType = {}));
+        var ShapeType = webgl.ShapeType;
+    })(webgl = spine.webgl || (spine.webgl = {}));
+})(spine || (spine = {}));
+var spine;
+(function (spine) {
+    var webgl;
+    (function (webgl) {
+        var SkeletonDebugRenderer = (function () {
+            function SkeletonDebugRenderer(gl) {
+                this.boneLineColor = new spine.Color(1, 0, 0, 1);
+                this.boneOriginColor = new spine.Color(0, 1, 0, 1);
+                this.attachmentLineColor = new spine.Color(0, 0, 1, 0.5);
+                this.triangleLineColor = new spine.Color(1, 0.64, 0, 0.5);
+                this.aabbColor = new spine.Color(0, 1, 0, 0.5);
+                this.drawBones = true;
+                this.drawRegionAttachments = true;
+                this.drawBoundingBoxes = true;
+                this.drawMeshHull = true;
+                this.drawMeshTriangles = true;
+                this.drawPaths = true;
+                this.premultipliedAlpha = false;
+                this.scale = 1;
+                this.boneWidth = 2;
+                this.bounds = new spine.SkeletonBounds();
+                this.temp = new Array();
+                this.gl = gl;
+                this.shapes = new webgl.ShapeRenderer(gl);
+            }
+            SkeletonDebugRenderer.prototype.draw = function (shader, skeleton) {
+                var skeletonX = skeleton.x;
+                var skeletonY = skeleton.y;
+                var gl = this.gl;
+                gl.enable(gl.BLEND);
+                var srcFunc = this.premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA;
+                gl.blendFunc(srcFunc, gl.ONE_MINUS_SRC_ALPHA);
+                var shapes = this.shapes;
+                var bones = skeleton.bones;
+                if (this.drawBones) {
+                    shapes.setColor(this.boneLineColor);
+                    shapes.begin(shader);
+                    for (var i = 0, n = bones.length; i < n; i++) {
+                        var bone = bones[i];
+                        if (bone.parent == null)
+                            continue;
+                        var x = skeletonX + bone.data.length * bone.a + bone.worldX;
+                        var y = skeletonY + bone.data.length * bone.c + bone.worldY;
+                        shapes.rectLine(true, skeletonX + bone.worldX, skeletonY + bone.worldY, x, y, this.boneWidth * this.scale);
+                    }
+                    shapes.end();
+                    shapes.begin(shader);
+                    shapes.x(skeletonX, skeletonY, 4 * this.scale);
+                }
+                else
+                    shapes.begin(shader);
+                if (this.drawRegionAttachments) {
+                    shapes.setColor(this.attachmentLineColor);
+                    var slots = skeleton.slots;
+                    for (var i = 0, n = slots.length; i < n; i++) {
+                        var slot = slots[i];
+                        var attachment = slot.getAttachment();
+                        if (attachment instanceof spine.RegionAttachment) {
+                            var regionAttachment = attachment;
+                            var vertices = regionAttachment.updateWorldVertices(slot, false);
+                            shapes.line(vertices[spine.RegionAttachment.X1], vertices[spine.RegionAttachment.Y1], vertices[spine.RegionAttachment.X2], vertices[spine.RegionAttachment.Y2]);
+                            shapes.line(vertices[spine.RegionAttachment.X2], vertices[spine.RegionAttachment.Y2], vertices[spine.RegionAttachment.X3], vertices[spine.RegionAttachment.Y3]);
+                            shapes.line(vertices[spine.RegionAttachment.X3], vertices[spine.RegionAttachment.Y3], vertices[spine.RegionAttachment.X4], vertices[spine.RegionAttachment.Y4]);
+                            shapes.line(vertices[spine.RegionAttachment.X4], vertices[spine.RegionAttachment.Y4], vertices[spine.RegionAttachment.X1], vertices[spine.RegionAttachment.Y1]);
+                        }
+                    }
+                }
+                if (this.drawMeshHull || this.drawMeshTriangles) {
+                    var slots = skeleton.slots;
+                    for (var i = 0, n = slots.length; i < n; i++) {
+                        var slot = slots[i];
+                        var attachment = slot.getAttachment();
+                        if (!(attachment instanceof spine.MeshAttachment))
+                            continue;
+                        var mesh = attachment;
+                        mesh.updateWorldVertices(slot, false);
+                        var vertices = mesh.worldVertices;
+                        var triangles = mesh.triangles;
+                        var hullLength = mesh.hullLength;
+                        if (this.drawMeshTriangles) {
+                            shapes.setColor(this.triangleLineColor);
+                            for (var ii = 0, nn = triangles.length; ii < nn; ii += 3) {
+                                var v1 = triangles[ii] * 8, v2 = triangles[ii + 1] * 8, v3 = triangles[ii + 2] * 8;
+                                shapes.triangle(false, vertices[v1], vertices[v1 + 1], vertices[v2], vertices[v2 + 1], vertices[v3], vertices[v3 + 1]);
+                            }
+                        }
+                        if (this.drawMeshHull && hullLength > 0) {
+                            shapes.setColor(this.attachmentLineColor);
+                            hullLength = (hullLength >> 1) * 8;
+                            var lastX = vertices[hullLength - 8], lastY = vertices[hullLength - 7];
+                            for (var ii = 0, nn = hullLength; ii < nn; ii += 8) {
+                                var x = vertices[ii], y = vertices[ii + 1];
+                                shapes.line(x, y, lastX, lastY);
+                                lastX = x;
+                                lastY = y;
+                            }
+                        }
+                    }
+                }
+                if (this.drawBoundingBoxes) {
+                    var bounds = this.bounds;
+                    bounds.update(skeleton, true);
+                    shapes.setColor(this.aabbColor);
+                    shapes.rect(false, bounds.minX, bounds.minY, bounds.getWidth(), bounds.getHeight());
+                    var polygons = bounds.polygons;
+                    var boxes = bounds.boundingBoxes;
+                    for (var i = 0, n = polygons.length; i < n; i++) {
+                        var polygon = polygons[i];
+                        shapes.setColor(boxes[i].color);
+                        shapes.polygon(polygon, 0, polygon.length);
+                    }
+                }
+                if (this.drawPaths) {
+                    var slots = skeleton.slots;
+                    for (var i = 0, n = slots.length; i < n; i++) {
+                        var slot = slots[i];
+                        var attachment = slot.getAttachment();
+                        if (!(attachment instanceof spine.PathAttachment))
+                            continue;
+                        var path = attachment;
+                        var nn = path.worldVerticesLength;
+                        var world = this.temp = spine.Utils.setArraySize(this.temp, nn, 0);
+                        path.computeWorldVertices(slot, world);
+                        var color = path.color;
+                        var x1 = world[2], y1 = world[3], x2 = 0, y2 = 0;
+                        if (path.closed) {
+                            shapes.setColor(color);
+                            var cx1 = world[0], cy1 = world[1], cx2 = world[nn - 2], cy2 = world[nn - 1];
+                            x2 = world[nn - 4];
+                            y2 = world[nn - 3];
+                            shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
+                            shapes.setColor(SkeletonDebugRenderer.LIGHT_GRAY);
+                            shapes.line(x1, y1, cx1, cy1);
+                            shapes.line(x2, y2, cx2, cy2);
+                        }
+                        nn -= 4;
+                        for (var ii = 4; ii < nn; ii += 6) {
+                            var cx1 = world[ii], cy1 = world[ii + 1], cx2 = world[ii + 2], cy2 = world[ii + 3];
+                            x2 = world[ii + 4];
+                            y2 = world[ii + 5];
+                            shapes.setColor(color);
+                            shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
+                            shapes.setColor(SkeletonDebugRenderer.LIGHT_GRAY);
+                            shapes.line(x1, y1, cx1, cy1);
+                            shapes.line(x2, y2, cx2, cy2);
+                            x1 = x2;
+                            y1 = y2;
+                        }
+                    }
+                }
+                shapes.end();
+                shapes.begin(shader);
+                if (this.drawBones) {
+                    shapes.setColor(this.boneOriginColor);
+                    for (var i = 0, n = bones.length; i < n; i++) {
+                        var bone = bones[i];
+                        shapes.setColor(SkeletonDebugRenderer.GREEN);
+                        shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, 8);
+                    }
+                }
+                shapes.end();
+            };
+            SkeletonDebugRenderer.prototype.dispose = function () {
+                this.shapes.dispose();
+            };
+            SkeletonDebugRenderer.LIGHT_GRAY = new spine.Color(192 / 255, 192 / 255, 192 / 255, 1);
+            SkeletonDebugRenderer.GREEN = new spine.Color(0, 1, 0, 1);
+            return SkeletonDebugRenderer;
+        }());
+        webgl.SkeletonDebugRenderer = SkeletonDebugRenderer;
+    })(webgl = spine.webgl || (spine.webgl = {}));
+})(spine || (spine = {}));
+var spine;
 (function (spine) {
     var webgl;
     (function (webgl) {

spine-ts/build/spine-widget.d.ts

@@ -486,6 +486,8 @@ declare module spine {
         intersectsSegment(x1: number, y1: number, x2: number, y2: number): BoundingBoxAttachment;
         intersectsSegmentPolygon(polygon: ArrayLike<number>, x1: number, y1: number, x2: number, y2: number): boolean;
         getPolygon(boundingBox: BoundingBoxAttachment): ArrayLike<number>;
+        getWidth(): number;
+        getHeight(): number;
     }
 }
 declare module spine {
@@ -721,6 +723,7 @@ declare module spine {
         static sinDeg(degrees: number): number;
         static signum(value: number): number;
         static toInt(x: number): number;
+        static cbrt(x: number): number;
     }
     class Utils {
         static SUPPORTS_TYPED_ARRAYS: boolean;
@@ -747,6 +750,8 @@ declare module spine {
         y: number;
         constructor(x?: number, y?: number);
         set(x: number, y: number): Vector2;
+        length(): number;
+        normalize(): this;
     }
 }
 declare module spine {
@@ -783,6 +788,7 @@ declare module spine {
 }
 declare module spine {
     class BoundingBoxAttachment extends VertexAttachment {
+        color: Color;
         constructor(name: string);
     }
 }
@@ -811,6 +817,7 @@ declare module spine {
         lengths: Array<number>;
         closed: boolean;
         constantSpeed: boolean;
+        color: Color;
         constructor(name: string);
     }
 }
@@ -1045,6 +1052,69 @@ declare module spine.webgl {
         static newColored(gl: WebGLRenderingContext): Shader;
     }
 }
+declare module spine.webgl {
+    class ShapeRenderer implements Disposable {
+        private gl;
+        private isDrawing;
+        private mesh;
+        private shapeType;
+        private color;
+        private shader;
+        private vertexIndex;
+        private tmp;
+        constructor(gl: WebGLRenderingContext, maxVertices?: number);
+        begin(shader: Shader): void;
+        setColor(color: Color): void;
+        setColorWith(r: number, g: number, b: number, a: number): void;
+        point(x: number, y: number, color?: Color): void;
+        line(x: number, y: number, x2: number, y2: number, color?: Color, color2?: Color): void;
+        triangle(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color?: Color, color2?: Color, color3?: Color): void;
+        quad(filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color?: Color, color2?: Color, color3?: Color, color4?: Color): void;
+        rect(filled: boolean, x: number, y: number, width: number, height: number, color?: Color): void;
+        rectLine(filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color?: Color): void;
+        x(x: number, y: number, size: number): void;
+        polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color?: Color): void;
+        circle(filled: boolean, x: number, y: number, radius: number, segments: number, color?: Color): void;
+        curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
+        private vertex(x, y, color);
+        end(): void;
+        private flush();
+        private check(shapeType, numVertices);
+        dispose(): void;
+    }
+    enum ShapeType {
+        Point,
+        Line,
+        Filled,
+    }
+}
+declare module spine.webgl {
+    class SkeletonDebugRenderer implements Disposable {
+        boneLineColor: Color;
+        boneOriginColor: Color;
+        attachmentLineColor: Color;
+        triangleLineColor: Color;
+        aabbColor: Color;
+        drawBones: boolean;
+        drawRegionAttachments: boolean;
+        drawBoundingBoxes: boolean;
+        drawMeshHull: boolean;
+        drawMeshTriangles: boolean;
+        drawPaths: boolean;
+        premultipliedAlpha: boolean;
+        scale: number;
+        boneWidth: number;
+        private gl;
+        private shapes;
+        private bounds;
+        private temp;
+        private static LIGHT_GRAY;
+        private static GREEN;
+        constructor(gl: WebGLRenderingContext);
+        draw(shader: Shader, skeleton: Skeleton): void;
+        dispose(): void;
+    }
+}
 declare module spine.webgl {
     class SkeletonRenderer {
         static QUAD_TRIANGLES: number[];

spine-ts/build/spine-widget.js

@@ -2519,6 +2519,12 @@ var spine;
             var index = this.boundingBoxes.indexOf(boundingBox);
             return index == -1 ? null : this.polygons[index];
         };
+        SkeletonBounds.prototype.getWidth = function () {
+            return this.maxX - this.minX;
+        };
+        SkeletonBounds.prototype.getHeight = function () {
+            return this.maxY - this.minY;
+        };
         return SkeletonBounds;
     }());
     spine.SkeletonBounds = SkeletonBounds;
@@ -2873,6 +2879,9 @@ var spine;
                     if (box == null)
                         return null;
                     this.readVertices(map, box, map.vertexCount << 1);
+                    var color = this.getValue(map, "color", null);
+                    if (color != null)
+                        box.color.setFromString(color);
                     return box;
                 }
                 case "mesh":
@@ -2911,6 +2920,9 @@ var spine;
                     for (var i = 0; i < map.lengths.length; i++)
                         lengths[i++] = map.lengths[i] * scale;
                     path.lengths = lengths;
+                    var color = this.getValue(map, "color", null);
+                    if (color != null)
+                        path.color.setFromString(color);
                     return path;
                 }
             }
@@ -3849,6 +3861,10 @@ var spine;
         MathUtils.toInt = function (x) {
             return x > 0 ? Math.floor(x) : Math.ceil(x);
         };
+        MathUtils.cbrt = function (x) {
+            var y = Math.pow(Math.abs(x), 1 / 3);
+            return x < 0 ? -y : y;
+        };
         MathUtils.PI = 3.1415927;
         MathUtils.PI2 = MathUtils.PI * 2;
         MathUtils.radiansToDegrees = 180 / MathUtils.PI;
@@ -3947,6 +3963,19 @@ var spine;
             this.y = y;
             return this;
         };
+        Vector2.prototype.length = function () {
+            var x = this.x;
+            var y = this.y;
+            return Math.sqrt(x * x + y * y);
+        };
+        Vector2.prototype.normalize = function () {
+            var len = this.length();
+            if (len != 0) {
+                this.x /= len;
+                this.y /= len;
+            }
+            return this;
+        };
         return Vector2;
     }());
     spine.Vector2 = Vector2;
@@ -4055,6 +4084,7 @@ var spine;
         __extends(BoundingBoxAttachment, _super);
         function BoundingBoxAttachment(name) {
             _super.call(this, name);
+            this.color = new spine.Color(1, 1, 1, 1);
         }
         return BoundingBoxAttachment;
     }(spine.VertexAttachment));
@@ -4198,6 +4228,7 @@ var spine;
             _super.call(this, name);
             this.closed = false;
             this.constantSpeed = false;
+            this.color = new spine.Color(1, 1, 1, 1);
         }
         return PathAttachment;
     }(spine.VertexAttachment));
@@ -4751,7 +4782,7 @@ var spine;
                 this.indicesLength = indices.length;
             };
             Mesh.prototype.draw = function (shader, primitiveType) {
-                this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0 ? this.indicesLength : this.verticesLength);
+                this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0 ? this.indicesLength : this.verticesLength / this.elementsPerVertex);
             };
             Mesh.prototype.drawWithOffset = function (shader, primitiveType, offset, count) {
                 var gl = this.gl;
@@ -5094,6 +5125,489 @@ var spine;
     })(webgl = spine.webgl || (spine.webgl = {}));
 })(spine || (spine = {}));
 var spine;
+(function (spine) {
+    var webgl;
+    (function (webgl) {
+        var ShapeRenderer = (function () {
+            function ShapeRenderer(gl, maxVertices) {
+                if (maxVertices === void 0) { maxVertices = 10920; }
+                this.isDrawing = false;
+                this.shapeType = ShapeType.Filled;
+                this.color = new spine.Color(1, 1, 1, 1);
+                this.vertexIndex = 0;
+                this.tmp = new spine.Vector2();
+                if (maxVertices > 10920)
+                    throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
+                this.gl = gl;
+                this.mesh = new webgl.Mesh(gl, [new webgl.Position2Attribute(), new webgl.ColorAttribute()], maxVertices, 0);
+            }
+            ShapeRenderer.prototype.begin = function (shader) {
+                if (this.isDrawing)
+                    throw new Error("ShapeRenderer.begin() has already been called");
+                this.shader = shader;
+                this.vertexIndex = 0;
+                this.isDrawing = true;
+            };
+            ShapeRenderer.prototype.setColor = function (color) {
+                this.color.setFromColor(color);
+            };
+            ShapeRenderer.prototype.setColorWith = function (r, g, b, a) {
+                this.color.set(r, g, b, a);
+            };
+            ShapeRenderer.prototype.point = function (x, y, color) {
+                if (color === void 0) { color = null; }
+                this.check(ShapeType.Point, 1);
+                if (color === null)
+                    color = this.color;
+                this.vertex(x, y, color);
+            };
+            ShapeRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
+                if (color === void 0) { color = null; }
+                if (color2 === void 0) { color2 = null; }
+                this.check(ShapeType.Line, 2);
+                var vertices = this.mesh.getVertices();
+                var idx = this.vertexIndex;
+                if (color === null)
+                    color = this.color;
+                if (color2 === null)
+                    color2 = this.color;
+                this.vertex(x, y, color);
+                this.vertex(x2, y2, color2);
+            };
+            ShapeRenderer.prototype.triangle = function (filled, x, y, x2, y2, x3, y3, color, color2, color3) {
+                if (color === void 0) { color = null; }
+                if (color2 === void 0) { color2 = null; }
+                if (color3 === void 0) { color3 = null; }
+                this.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
+                var vertices = this.mesh.getVertices();
+                var idx = this.vertexIndex;
+                if (color === null)
+                    color = this.color;
+                if (color2 === null)
+                    color2 = this.color;
+                if (color3 === null)
+                    color3 = this.color;
+                if (filled) {
+                    this.vertex(x, y, color);
+                    this.vertex(x2, y2, color2);
+                    this.vertex(x3, y3, color3);
+                }
+                else {
+                    this.vertex(x, y, color);
+                    this.vertex(x2, y2, color2);
+                    this.vertex(x2, y2, color);
+                    this.vertex(x3, y3, color2);
+                    this.vertex(x3, y3, color);
+                    this.vertex(x, y, color2);
+                }
+            };
+            ShapeRenderer.prototype.quad = function (filled, x, y, x2, y2, x3, y3, x4, y4, color, color2, color3, color4) {
+                if (color === void 0) { color = null; }
+                if (color2 === void 0) { color2 = null; }
+                if (color3 === void 0) { color3 = null; }
+                if (color4 === void 0) { color4 = null; }
+                this.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
+                var vertices = this.mesh.getVertices();
+                var idx = this.vertexIndex;
+                if (color === null)
+                    color = this.color;
+                if (color2 === null)
+                    color2 = this.color;
+                if (color3 === null)
+                    color3 = this.color;
+                if (color4 === null)
+                    color4 = this.color;
+                if (filled) {
+                    this.vertex(x, y, color);
+                    this.vertex(x2, y2, color2);
+                    this.vertex(x3, y3, color3);
+                    this.vertex(x3, y3, color3);
+                    this.vertex(x4, y4, color4);
+                    this.vertex(x, y, color);
+                }
+                else {
+                    this.vertex(x, y, color);
+                    this.vertex(x2, y2, color2);
+                    this.vertex(x2, y2, color2);
+                    this.vertex(x3, y3, color3);
+                    this.vertex(x3, y3, color3);
+                    this.vertex(x4, y4, color4);
+                    this.vertex(x4, y4, color4);
+                    this.vertex(x, y, color);
+                }
+            };
+            ShapeRenderer.prototype.rect = function (filled, x, y, width, height, color) {
+                if (color === void 0) { color = null; }
+                this.quad(filled, x, y, x + width, y, x + width, y + height, x, y + height, color, color, color, color);
+            };
+            ShapeRenderer.prototype.rectLine = function (filled, x1, y1, x2, y2, width, color) {
+                if (color === void 0) { color = null; }
+                this.check(filled ? ShapeType.Filled : ShapeType.Line, 8);
+                if (color === null)
+                    color = this.color;
+                var t = this.tmp.set(y2 - y1, x1 - x2);
+                t.normalize();
+                width *= 0.5;
+                var tx = t.x * width;
+                var ty = t.y * width;
+                if (!filled) {
+                    this.vertex(x1 + tx, y1 + ty, color);
+                    this.vertex(x1 - tx, y1 - ty, color);
+                    this.vertex(x2 + tx, y2 + ty, color);
+                    this.vertex(x2 - tx, y2 - ty, color);
+                    this.vertex(x2 + tx, y2 + ty, color);
+                    this.vertex(x1 + tx, y1 + ty, color);
+                    this.vertex(x2 - tx, y2 - ty, color);
+                    this.vertex(x1 - tx, y1 - ty, color);
+                }
+                else {
+                    this.vertex(x1 + tx, y1 + ty, color);
+                    this.vertex(x1 - tx, y1 - ty, color);
+                    this.vertex(x2 + tx, y2 + ty, color);
+                    this.vertex(x2 - tx, y2 - ty, color);
+                    this.vertex(x2 + tx, y2 + ty, color);
+                    this.vertex(x1 - tx, y1 - ty, color);
+                }
+            };
+            ShapeRenderer.prototype.x = function (x, y, size) {
+                this.line(x - size, y - size, x + size, y + size);
+                this.line(x - size, y + size, x + size, y - size);
+            };
+            ShapeRenderer.prototype.polygon = function (polygonVertices, offset, count, color) {
+                if (color === void 0) { color = null; }
+                if (count < 3)
+                    throw new Error("Polygon must contain at least 3 vertices");
+                this.check(ShapeType.Line, count * 2);
+                if (color === null)
+                    color = this.color;
+                var vertices = this.mesh.getVertices();
+                var idx = this.vertexIndex;
+                offset <<= 1;
+                count <<= 1;
+                var firstX = polygonVertices[offset];
+                var firstY = polygonVertices[offset + 1];
+                var last = offset + count;
+                for (var i = offset, n = offset + count - 2; i < n; i += 2) {
+                    var x1 = polygonVertices[i];
+                    var y1 = polygonVertices[i + 1];
+                    var x2 = 0;
+                    var y2 = 0;
+                    if (i + 2 >= last) {
+                        x2 = firstX;
+                        y2 = firstY;
+                    }
+                    else {
+                        x2 = polygonVertices[i + 2];
+                        y2 = polygonVertices[i + 3];
+                    }
+                    this.vertex(x1, y1, color);
+                    this.vertex(x2, y2, color);
+                }
+            };
+            ShapeRenderer.prototype.circle = function (filled, x, y, radius, segments, color) {
+                if (color === void 0) { color = null; }
+                if (segments === 0)
+                    segments = Math.max(1, (6 * spine.MathUtils.cbrt(radius)) | 0);
+                if (segments <= 0)
+                    throw new Error("segments must be > 0.");
+                if (color === null)
+                    color = this.color;
+                var angle = 2 * spine.MathUtils.PI / segments;
+                var cos = Math.cos(angle);
+                var sin = Math.sin(angle);
+                var cx = radius, cy = 0;
+                if (!filled) {
+                    this.check(ShapeType.Line, segments * 2 + 2);
+                    for (var i = 0; i < segments; i++) {
+                        this.vertex(x + cx, y + cy, color);
+                        var temp_1 = cx;
+                        cx = cos * cx - sin * cy;
+                        cy = sin * temp_1 + cos * cy;
+                        this.vertex(x + cx, y + cy, color);
+                    }
+                    this.vertex(x + cx, y + cy, color);
+                }
+                else {
+                    this.check(ShapeType.Filled, segments * 3 + 3);
+                    segments--;
+                    for (var i = 0; i < segments; i++) {
+                        this.vertex(x, y, color);
+                        this.vertex(x + cx, y + cy, color);
+                        var temp_2 = cx;
+                        cx = cos * cx - sin * cy;
+                        cy = sin * temp_2 + cos * cy;
+                        this.vertex(x + cx, y + cy, color);
+                    }
+                    this.vertex(x, y, color);
+                    this.vertex(x + cx, y + cy, color);
+                }
+                var temp = cx;
+                cx = radius;
+                cy = 0;
+                this.vertex(x + cx, y + cy, color);
+            };
+            ShapeRenderer.prototype.curve = function (x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color) {
+                if (color === void 0) { color = null; }
+                this.check(ShapeType.Line, segments * 2 + 2);
+                if (color === null)
+                    color = this.color;
+                var subdiv_step = 1 / segments;
+                var subdiv_step2 = subdiv_step * subdiv_step;
+                var subdiv_step3 = subdiv_step * subdiv_step * subdiv_step;
+                var pre1 = 3 * subdiv_step;
+                var pre2 = 3 * subdiv_step2;
+                var pre4 = 6 * subdiv_step2;
+                var pre5 = 6 * subdiv_step3;
+                var tmp1x = x1 - cx1 * 2 + cx2;
+                var tmp1y = y1 - cy1 * 2 + cy2;
+                var tmp2x = (cx1 - cx2) * 3 - x1 + x2;
+                var tmp2y = (cy1 - cy2) * 3 - y1 + y2;
+                var fx = x1;
+                var fy = y1;
+                var dfx = (cx1 - x1) * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3;
+                var dfy = (cy1 - y1) * pre1 + tmp1y * pre2 + tmp2y * subdiv_step3;
+                var ddfx = tmp1x * pre4 + tmp2x * pre5;
+                var ddfy = tmp1y * pre4 + tmp2y * pre5;
+                var dddfx = tmp2x * pre5;
+                var dddfy = tmp2y * pre5;
+                while (segments-- > 0) {
+                    this.vertex(fx, fy, color);
+                    fx += dfx;
+                    fy += dfy;
+                    dfx += ddfx;
+                    dfy += ddfy;
+                    ddfx += dddfx;
+                    ddfy += dddfy;
+                    this.vertex(fx, fy, color);
+                }
+                this.vertex(fx, fy, color);
+                this.vertex(x2, y2, color);
+            };
+            ShapeRenderer.prototype.vertex = function (x, y, color) {
+                var idx = this.vertexIndex;
+                var vertices = this.mesh.getVertices();
+                vertices[idx++] = x;
+                vertices[idx++] = y;
+                vertices[idx++] = color.r;
+                vertices[idx++] = color.g;
+                vertices[idx++] = color.b;
+                vertices[idx++] = color.a;
+                this.vertexIndex = idx;
+            };
+            ShapeRenderer.prototype.end = function () {
+                if (!this.isDrawing)
+                    throw new Error("ShapeRenderer.begin() has not been called");
+                this.flush();
+                this.isDrawing = false;
+            };
+            ShapeRenderer.prototype.flush = function () {
+                if (this.vertexIndex == 0)
+                    return;
+                this.mesh.setVerticesLength(this.vertexIndex);
+                this.mesh.draw(this.shader, this.shapeType);
+                this.vertexIndex = 0;
+            };
+            ShapeRenderer.prototype.check = function (shapeType, numVertices) {
+                if (!this.isDrawing)
+                    throw new Error("ShapeRenderer.begin() has not been called");
+                if (this.shapeType == shapeType) {
+                    if (this.mesh.maxVertices() - this.mesh.numVertices() < numVertices)
+                        this.flush();
+                    else
+                        return;
+                }
+                else {
+                    this.flush();
+                    this.shapeType = shapeType;
+                }
+            };
+            ShapeRenderer.prototype.dispose = function () {
+                this.mesh.dispose();
+            };
+            return ShapeRenderer;
+        }());
+        webgl.ShapeRenderer = ShapeRenderer;
+        (function (ShapeType) {
+            ShapeType[ShapeType["Point"] = WebGLRenderingContext.POINTS] = "Point";
+            ShapeType[ShapeType["Line"] = WebGLRenderingContext.LINES] = "Line";
+            ShapeType[ShapeType["Filled"] = WebGLRenderingContext.TRIANGLES] = "Filled";
+        })(webgl.ShapeType || (webgl.ShapeType = {}));
+        var ShapeType = webgl.ShapeType;
+    })(webgl = spine.webgl || (spine.webgl = {}));
+})(spine || (spine = {}));
+var spine;
+(function (spine) {
+    var webgl;
+    (function (webgl) {
+        var SkeletonDebugRenderer = (function () {
+            function SkeletonDebugRenderer(gl) {
+                this.boneLineColor = new spine.Color(1, 0, 0, 1);
+                this.boneOriginColor = new spine.Color(0, 1, 0, 1);
+                this.attachmentLineColor = new spine.Color(0, 0, 1, 0.5);
+                this.triangleLineColor = new spine.Color(1, 0.64, 0, 0.5);
+                this.aabbColor = new spine.Color(0, 1, 0, 0.5);
+                this.drawBones = true;
+                this.drawRegionAttachments = true;
+                this.drawBoundingBoxes = true;
+                this.drawMeshHull = true;
+                this.drawMeshTriangles = true;
+                this.drawPaths = true;
+                this.premultipliedAlpha = false;
+                this.scale = 1;
+                this.boneWidth = 2;
+                this.bounds = new spine.SkeletonBounds();
+                this.temp = new Array();
+                this.gl = gl;
+                this.shapes = new webgl.ShapeRenderer(gl);
+            }
+            SkeletonDebugRenderer.prototype.draw = function (shader, skeleton) {
+                var skeletonX = skeleton.x;
+                var skeletonY = skeleton.y;
+                var gl = this.gl;
+                gl.enable(gl.BLEND);
+                var srcFunc = this.premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA;
+                gl.blendFunc(srcFunc, gl.ONE_MINUS_SRC_ALPHA);
+                var shapes = this.shapes;
+                var bones = skeleton.bones;
+                if (this.drawBones) {
+                    shapes.setColor(this.boneLineColor);
+                    shapes.begin(shader);
+                    for (var i = 0, n = bones.length; i < n; i++) {
+                        var bone = bones[i];
+                        if (bone.parent == null)
+                            continue;
+                        var x = skeletonX + bone.data.length * bone.a + bone.worldX;
+                        var y = skeletonY + bone.data.length * bone.c + bone.worldY;
+                        shapes.rectLine(true, skeletonX + bone.worldX, skeletonY + bone.worldY, x, y, this.boneWidth * this.scale);
+                    }
+                    shapes.end();
+                    shapes.begin(shader);
+                    shapes.x(skeletonX, skeletonY, 4 * this.scale);
+                }
+                else
+                    shapes.begin(shader);
+                if (this.drawRegionAttachments) {
+                    shapes.setColor(this.attachmentLineColor);
+                    var slots = skeleton.slots;
+                    for (var i = 0, n = slots.length; i < n; i++) {
+                        var slot = slots[i];
+                        var attachment = slot.getAttachment();
+                        if (attachment instanceof spine.RegionAttachment) {
+                            var regionAttachment = attachment;
+                            var vertices = regionAttachment.updateWorldVertices(slot, false);
+                            shapes.line(vertices[spine.RegionAttachment.X1], vertices[spine.RegionAttachment.Y1], vertices[spine.RegionAttachment.X2], vertices[spine.RegionAttachment.Y2]);
+                            shapes.line(vertices[spine.RegionAttachment.X2], vertices[spine.RegionAttachment.Y2], vertices[spine.RegionAttachment.X3], vertices[spine.RegionAttachment.Y3]);
+                            shapes.line(vertices[spine.RegionAttachment.X3], vertices[spine.RegionAttachment.Y3], vertices[spine.RegionAttachment.X4], vertices[spine.RegionAttachment.Y4]);
+                            shapes.line(vertices[spine.RegionAttachment.X4], vertices[spine.RegionAttachment.Y4], vertices[spine.RegionAttachment.X1], vertices[spine.RegionAttachment.Y1]);
+                        }
+                    }
+                }
+                if (this.drawMeshHull || this.drawMeshTriangles) {
+                    var slots = skeleton.slots;
+                    for (var i = 0, n = slots.length; i < n; i++) {
+                        var slot = slots[i];
+                        var attachment = slot.getAttachment();
+                        if (!(attachment instanceof spine.MeshAttachment))
+                            continue;
+                        var mesh = attachment;
+                        mesh.updateWorldVertices(slot, false);
+                        var vertices = mesh.worldVertices;
+                        var triangles = mesh.triangles;
+                        var hullLength = mesh.hullLength;
+                        if (this.drawMeshTriangles) {
+                            shapes.setColor(this.triangleLineColor);
+                            for (var ii = 0, nn = triangles.length; ii < nn; ii += 3) {
+                                var v1 = triangles[ii] * 8, v2 = triangles[ii + 1] * 8, v3 = triangles[ii + 2] * 8;
+                                shapes.triangle(false, vertices[v1], vertices[v1 + 1], vertices[v2], vertices[v2 + 1], vertices[v3], vertices[v3 + 1]);
+                            }
+                        }
+                        if (this.drawMeshHull && hullLength > 0) {
+                            shapes.setColor(this.attachmentLineColor);
+                            hullLength = (hullLength >> 1) * 8;
+                            var lastX = vertices[hullLength - 8], lastY = vertices[hullLength - 7];
+                            for (var ii = 0, nn = hullLength; ii < nn; ii += 8) {
+                                var x = vertices[ii], y = vertices[ii + 1];
+                                shapes.line(x, y, lastX, lastY);
+                                lastX = x;
+                                lastY = y;
+                            }
+                        }
+                    }
+                }
+                if (this.drawBoundingBoxes) {
+                    var bounds = this.bounds;
+                    bounds.update(skeleton, true);
+                    shapes.setColor(this.aabbColor);
+                    shapes.rect(false, bounds.minX, bounds.minY, bounds.getWidth(), bounds.getHeight());
+                    var polygons = bounds.polygons;
+                    var boxes = bounds.boundingBoxes;
+                    for (var i = 0, n = polygons.length; i < n; i++) {
+                        var polygon = polygons[i];
+                        shapes.setColor(boxes[i].color);
+                        shapes.polygon(polygon, 0, polygon.length);
+                    }
+                }
+                if (this.drawPaths) {
+                    var slots = skeleton.slots;
+                    for (var i = 0, n = slots.length; i < n; i++) {
+                        var slot = slots[i];
+                        var attachment = slot.getAttachment();
+                        if (!(attachment instanceof spine.PathAttachment))
+                            continue;
+                        var path = attachment;
+                        var nn = path.worldVerticesLength;
+                        var world = this.temp = spine.Utils.setArraySize(this.temp, nn, 0);
+                        path.computeWorldVertices(slot, world);
+                        var color = path.color;
+                        var x1 = world[2], y1 = world[3], x2 = 0, y2 = 0;
+                        if (path.closed) {
+                            shapes.setColor(color);
+                            var cx1 = world[0], cy1 = world[1], cx2 = world[nn - 2], cy2 = world[nn - 1];
+                            x2 = world[nn - 4];
+                            y2 = world[nn - 3];
+                            shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
+                            shapes.setColor(SkeletonDebugRenderer.LIGHT_GRAY);
+                            shapes.line(x1, y1, cx1, cy1);
+                            shapes.line(x2, y2, cx2, cy2);
+                        }
+                        nn -= 4;
+                        for (var ii = 4; ii < nn; ii += 6) {
+                            var cx1 = world[ii], cy1 = world[ii + 1], cx2 = world[ii + 2], cy2 = world[ii + 3];
+                            x2 = world[ii + 4];
+                            y2 = world[ii + 5];
+                            shapes.setColor(color);
+                            shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
+                            shapes.setColor(SkeletonDebugRenderer.LIGHT_GRAY);
+                            shapes.line(x1, y1, cx1, cy1);
+                            shapes.line(x2, y2, cx2, cy2);
+                            x1 = x2;
+                            y1 = y2;
+                        }
+                    }
+                }
+                shapes.end();
+                shapes.begin(shader);
+                if (this.drawBones) {
+                    shapes.setColor(this.boneOriginColor);
+                    for (var i = 0, n = bones.length; i < n; i++) {
+                        var bone = bones[i];
+                        shapes.setColor(SkeletonDebugRenderer.GREEN);
+                        shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, 8);
+                    }
+                }
+                shapes.end();
+            };
+            SkeletonDebugRenderer.prototype.dispose = function () {
+                this.shapes.dispose();
+            };
+            SkeletonDebugRenderer.LIGHT_GRAY = new spine.Color(192 / 255, 192 / 255, 192 / 255, 1);
+            SkeletonDebugRenderer.GREEN = new spine.Color(0, 1, 0, 1);
+            return SkeletonDebugRenderer;
+        }());
+        webgl.SkeletonDebugRenderer = SkeletonDebugRenderer;
+    })(webgl = spine.webgl || (spine.webgl = {}));
+})(spine || (spine = {}));
+var spine;
 (function (spine) {
     var webgl;
     (function (webgl) {

spine-ts/core/src/SkeletonBounds.ts

@@ -188,6 +188,14 @@ module spine {
 			let index = this.boundingBoxes.indexOf(boundingBox);
 			return index == -1 ? null : this.polygons[index];
 		}
+
+		getWidth () {
+			return this.maxX - this.minX;
+		}
+
+		getHeight () {
+			return this.maxY - this.minY;
+		}
 	}
 
 }

spine-ts/core/src/SkeletonJson.ts

@@ -273,6 +273,8 @@ module spine {
 					let box = this.attachmentLoader.newBoundingBoxAttachment(skin, name);
 					if (box == null) return null;
 					this.readVertices(map, box, map.vertexCount << 1);
+					let color: string = this.getValue(map, "color", null);
+					if (color != null) box.color.setFromString(color);
 					return box;
 				}
 				case "mesh":
@@ -314,6 +316,9 @@ module spine {
 					for (let i = 0; i < map.lengths.length; i++)
 						lengths[i++] = map.lengths[i] * scale;
 					path.lengths = lengths;
+
+					let color: string = this.getValue(map, "color", null);
+					if (color != null) path.color.setFromString(color);
 					return path;
 				}
 			}

spine-ts/core/src/Utils.ts

@@ -118,6 +118,11 @@ module spine {
 		static toInt (x: number) {
 			return x > 0 ? Math.floor(x) : Math.ceil(x);
 		}
+
+		static cbrt (x: number) {
+			var y = Math.pow(Math.abs(x), 1/3);
+  			return x < 0 ? -y : y;
+		}
 	}
 
 	export class Utils {
@@ -203,5 +208,20 @@ module spine {
 			this.y = y;
 			return this;
 		}
+
+		length () {
+			let x = this.x;
+			let y = this.y;
+			return Math.sqrt(x * x + y * y);
+		}
+
+		normalize () {
+			let len = this.length();
+			if (len != 0) {
+				this.x /= len;
+				this.y /= len;
+			}
+			return this;
+		}
 	}
 }

spine-ts/core/src/attachments/BoundingBoxAttachment.ts

@@ -31,6 +31,8 @@
 
 module spine {
 	export class BoundingBoxAttachment extends VertexAttachment {
+		color = new Color(1, 1, 1, 1);
+
 		constructor (name: string) {
 			super(name);
 		}

spine-ts/core/src/attachments/PathAttachment.ts

@@ -33,6 +33,7 @@ module spine {
 	export class PathAttachment extends VertexAttachment {
 		lengths: Array<number>;
 		closed = false; constantSpeed = false;
+		color = new Color(1, 1, 1, 1);
 
 		constructor (name: string) {
 			super(name);

spine-ts/webgl/example/index.html

@@ -26,8 +26,10 @@ var gl;
 var mvp = new spine.webgl.Matrix4();
 var assetManager;
 var skeletonRenderer;
+var debugRenderer;
+var debugShader;
 var skeletons = {};
-var activeSkeleton = "bunny";
+var activeSkeleton = "hero-mesh";
 
 function init () {
 	// Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when
@@ -43,6 +45,13 @@ function init () {
 	batcher = new spine.webgl.PolygonBatcher(gl);
 	mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
 	skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
+	debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
+	debugRenderer.drawRegionAttachments = false;
+	debugRenderer.drawBoundingBoxes = false;
+	debugRenderer.drawMeshHull = false;
+	debugRenderer.drawMeshTriangles = false;
+	debugRenderer.drawPaths = false;
+	debugShader = spine.webgl.Shader.newColored(gl);
 	assetManager = new spine.webgl.AssetManager(gl);
 
 	// Tell AssetManager to load the resources for each model, including the exported .json file, the .atlas file and the .png
@@ -229,6 +238,13 @@ function render () {
 		
 	shader.unbind();
 
+	// draw debug information
+	debugShader.bind();
+	debugShader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
+	debugRenderer.premultipliedAlpha = premultipliedAlpha;
+	debugRenderer.draw(debugShader, skeleton);
+	debugShader.unbind();
+
 	requestAnimationFrame(render);
 }
 

spine-ts/webgl/example/test.html

@@ -0,0 +1,65 @@
+<html>
+<script src="../../build/spine-webgl.js"></script>
+<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
+<style>
+	* { margin: 0; padding: 0; }
+	body, html { height: 100% }
+	canvas { position: absolute; width: 100% ;height: 100%; }
+</style>
+<body>
+<canvas id="canvas"></canvas>
+<script>
+
+var canvas, gl, shader, renderer, mvp, lastFrameTime = Date.now() / 1000;
+
+function init() {
+	canvas = document.getElementById("canvas");
+	canvas.width = window.innerWidth; canvas.height = window.innerHeight;	
+	gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
+
+	shader = spine.webgl.Shader.newColored(gl);
+	renderer = new spine.webgl.ShapeRenderer(gl);
+	mvp = new spine.webgl.Matrix4();
+
+	requestAnimationFrame(render);
+}
+
+function render() {
+	var now = Date.now() / 1000;
+	var delta = now - lastFrameTime;
+	lastFrameTime = now;
+
+	resize();
+	gl.clearColor(0.2, 0.2, 0.2, 1);
+	gl.clear(gl.COLOR_BUFFER_BIT);
+
+	shader.bind();
+	shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
+
+	renderer.begin(shader);
+	renderer.setColorWith(1, 0, 0, 1);
+	// renderer.line(0, 0, canvas.width, canvas.height);
+	renderer.triangle(true, 100, 100, 200, 100, 150, 200, new spine.Color(1, 0, 0, 1), new spine.Color(0, 1, 0, 1), new spine.Color(0, 0, 1, 1));	
+	renderer.end();
+	shader.unbind();
+
+	requestAnimationFrame(render);
+}
+
+function resize () {
+	var w = canvas.clientWidth;
+	var h = canvas.clientHeight;	
+	if (canvas.width != w || canvas.height != h) {
+		canvas.width = w;
+		canvas.height = h;
+	}
+	mvp.ortho2d(0, 0, w, h);
+	gl.viewport(0, 0, canvas.width, canvas.height);
+}
+
+(function() {
+	init();
+})();
+</script>
+</body>
+</html>

spine-ts/webgl/src/Mesh.ts

@@ -85,7 +85,7 @@ module spine.webgl {
 		}
 
 		draw (shader: Shader, primitiveType: number) {
-			this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0? this.indicesLength: this.verticesLength);
+			this.drawWithOffset(shader, primitiveType, 0, this.indicesLength > 0? this.indicesLength: this.verticesLength / this.elementsPerVertex);
 		}
 
 		drawWithOffset (shader: Shader, primitiveType: number, offset: number, count: number) {

spine-ts/webgl/src/ShapeRenderer.ts

@@ -0,0 +1,328 @@
+/******************************************************************************
+ * Spine Runtimes Software License
+ * Version 2.5
+ * 
+ * Copyright (c) 2013-2016, Esoteric Software
+ * All rights reserved.
+ * 
+ * You are granted a perpetual, non-exclusive, non-sublicensable, and
+ * non-transferable license to use, install, execute, and perform the Spine
+ * Runtimes software and derivative works solely for personal or internal
+ * use. Without the written permission of Esoteric Software (see Section 2 of
+ * the Spine Software License Agreement), you may not (a) modify, translate,
+ * adapt, or develop new applications using the Spine Runtimes or otherwise
+ * create derivative works or improvements of the Spine Runtimes or (b) remove,
+ * delete, alter, or obscure any trademarks or any copyright, trademark, patent,
+ * or other intellectual property or proprietary rights notices on or in the
+ * Software, including any copy thereof. Redistributions in binary or source
+ * form must include this license and terms.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE "AS IS" AND ANY EXPRESS OR
+ * IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
+ * EVENT SHALL ESOTERIC SOFTWARE BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, BUSINESS INTERRUPTION, OR LOSS OF
+ * USE, DATA, OR PROFITS) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+ * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+ * POSSIBILITY OF SUCH DAMAGE.
+ *****************************************************************************/
+
+module spine.webgl {
+	export class ShapeRenderer implements Disposable {
+		private gl: WebGLRenderingContext;
+		private isDrawing = false;
+		private mesh: Mesh;
+		private shapeType = ShapeType.Filled;
+		private color = new Color(1, 1, 1, 1);		
+		private shader: Shader;
+		private vertexIndex = 0;
+		private tmp = new Vector2();
+
+		constructor (gl: WebGLRenderingContext, maxVertices: number = 10920) {
+			if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
+			this.gl = gl;
+			this.mesh = new Mesh(gl, [new Position2Attribute(), new ColorAttribute()], maxVertices, 0);
+		}
+
+		begin (shader: Shader) {
+			if (this.isDrawing) throw new Error("ShapeRenderer.begin() has already been called");
+			this.shader = shader;
+			this.vertexIndex = 0;
+			this.isDrawing = true;
+		}
+
+		setColor (color: Color) {
+			this.color.setFromColor(color);
+		}
+
+		setColorWith (r: number, g: number, b: number, a: number) {
+			this.color.set(r, g, b, a);
+		}		
+
+		point (x: number, y: number, color: Color = null) {			
+			this.check(ShapeType.Point, 1);			
+			if (color === null) color = this.color;
+			this.vertex(x, y, color);						
+		}
+
+		line (x: number, y: number, x2: number, y2: number, color: Color = null, color2: Color = null) {			
+			this.check(ShapeType.Line, 2);
+			let vertices = this.mesh.getVertices();
+			let idx = this.vertexIndex;
+			if (color === null) color = this.color;
+			if (color2 === null) color2 = this.color;		
+			this.vertex(x, y, color);
+			this.vertex(x2, y2, color2);		
+		}
+
+		triangle (filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color: Color = null, color2: Color = null, color3: Color = null) {
+			this.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
+			let vertices = this.mesh.getVertices();
+			let idx = this.vertexIndex;
+			if (color === null) color = this.color;
+			if (color2 === null) color2 = this.color;
+			if (color3 === null) color3 = this.color;
+			if (filled) {		
+				this.vertex(x, y, color);
+				this.vertex(x2, y2, color2);
+				this.vertex(x3, y3, color3);
+			} else {
+				this.vertex(x, y, color);
+				this.vertex(x2, y2, color2);
+
+				this.vertex(x2, y2, color);
+				this.vertex(x3, y3, color2);
+
+				this.vertex(x3, y3, color);
+				this.vertex(x, y, color2);
+			}
+		}
+
+		quad (filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, color: Color = null, color2: Color = null, color3: Color = null, color4: Color = null) {
+			this.check(filled ? ShapeType.Filled : ShapeType.Line, 3);
+			let vertices = this.mesh.getVertices();
+			let idx = this.vertexIndex;
+			if (color === null) color = this.color;
+			if (color2 === null) color2 = this.color;
+			if (color3 === null) color3 = this.color;
+			if (color4 === null) color4 = this.color;
+			if (filled) {
+				this.vertex(x, y, color); this.vertex(x2, y2, color2); this.vertex(x3, y3, color3);
+				this.vertex(x3, y3, color3); this.vertex(x4, y4, color4); this.vertex(x, y, color);				
+			} else {
+				this.vertex(x, y, color); this.vertex(x2, y2, color2);
+				this.vertex(x2, y2, color2); this.vertex(x3, y3, color3);
+				this.vertex(x3, y3, color3); this.vertex(x4, y4, color4);
+				this.vertex(x4, y4, color4); this.vertex(x, y, color);
+			}			
+		}
+
+		rect (filled: boolean, x: number, y: number, width: number, height: number, color: Color = null) {
+			this.quad(filled, x, y, x + width, y, x + width, y + height, x, y + height, color, color, color, color);
+		}
+
+		rectLine (filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color: Color = null) {
+			this.check(filled ? ShapeType.Filled : ShapeType.Line, 8);
+			if (color === null) color = this.color;
+			let t = this.tmp.set(y2 - y1, x1 - x2);
+			t.normalize();		
+			width *= 0.5;
+			let tx = t.x * width;
+			let ty = t.y * width;
+			if (!filled) {
+				this.vertex(x1 + tx, y1 + ty, color);
+				this.vertex(x1 - tx, y1 - ty, color);																
+				this.vertex(x2 + tx, y2 + ty, color);				
+				this.vertex(x2 - tx, y2 - ty, color);
+				
+				this.vertex(x2 + tx, y2 + ty, color);				
+				this.vertex(x1 + tx, y1 + ty, color);
+				
+				this.vertex(x2 - tx, y2 - ty, color);				
+				this.vertex(x1 - tx, y1 - ty, color);
+			} else {				
+				this.vertex(x1 + tx, y1 + ty, color);				
+				this.vertex(x1 - tx, y1 - ty, color);				
+				this.vertex(x2 + tx, y2 + ty, color);
+				
+				this.vertex(x2 - tx, y2 - ty, color);
+				this.vertex(x2 + tx, y2 + ty, color);
+				this.vertex(x1 - tx, y1 - ty, color);
+			}
+		}
+
+		x (x: number, y: number, size: number) {
+			this.line(x - size, y - size, x + size, y + size);
+			this.line(x - size, y + size, x + size, y - size);
+		}
+
+		polygon (polygonVertices: ArrayLike<number>, offset: number, count: number, color: Color = null) {
+			if (count < 3) throw new Error("Polygon must contain at least 3 vertices");
+			this.check(ShapeType.Line, count * 2);
+			if (color === null) color = this.color;
+			let vertices = this.mesh.getVertices();
+			let idx = this.vertexIndex;
+
+			offset <<= 1;
+			count <<= 1;
+
+			let firstX = polygonVertices[offset];
+			let firstY = polygonVertices[offset + 1];
+			let last = offset + count;
+
+			for (let i = offset, n = offset + count - 2; i < n; i += 2) {
+				let x1 = polygonVertices[i];
+				let y1 = polygonVertices[i+1];
+
+				let x2 = 0;
+				let y2 = 0;
+
+				if (i + 2 >= last) {
+					x2 = firstX;
+					y2 = firstY;
+				} else {
+					x2 = polygonVertices[i + 2];
+					y2 = polygonVertices[i + 3];
+				}
+
+				this.vertex(x1, y1, color);
+				this.vertex(x2, y2, color);
+			}			
+		}
+
+		circle (filled: boolean, x: number, y: number, radius: number, segments: number, color: Color = null) {
+			if (segments === 0) segments = Math.max(1, (6 * MathUtils.cbrt(radius)) | 0);
+			if (segments <= 0) throw new Error("segments must be > 0.");
+			if (color === null) color = this.color;
+			let angle = 2 * MathUtils.PI / segments;
+			let cos = Math.cos(angle);
+			let sin = Math.sin(angle);
+			let cx = radius, cy = 0;
+			if (!filled) {
+				this.check(ShapeType.Line, segments * 2 + 2);
+				for (let i = 0; i < segments; i++) {
+					this.vertex(x + cx, y + cy, color);					
+					let temp = cx;
+					cx = cos * cx - sin * cy;
+					cy = sin * temp + cos * cy;
+					this.vertex(x + cx, y + cy, color);
+				}
+				// Ensure the last segment is identical to the first.
+				this.vertex(x + cx, y + cy, color);
+			} else {
+				this.check(ShapeType.Filled, segments * 3 + 3);
+				segments--;
+				for (let i = 0; i < segments; i++) {
+					this.vertex(x, y, color);					
+					this.vertex(x + cx, y + cy, color);					
+					let temp = cx;
+					cx = cos * cx - sin * cy;
+					cy = sin * temp + cos * cy;
+					this.vertex(x + cx, y + cy, color);
+				}
+				// Ensure the last segment is identical to the first.
+				this.vertex(x, y, color);
+				this.vertex(x + cx, y + cy, color);
+			}
+
+			let temp = cx;
+			cx = radius;
+			cy = 0;
+			this.vertex(x + cx, y + cy, color);
+		}
+
+		curve (x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color: Color = null) {
+			this.check(ShapeType.Line, segments * 2 + 2);
+			if (color === null) color = this.color;			
+			
+			// Algorithm from: http://www.antigrain.com/research/bezier_interpolation/index.html#PAGE_BEZIER_INTERPOLATION
+			let subdiv_step = 1 / segments;
+			let subdiv_step2 = subdiv_step * subdiv_step;
+			let subdiv_step3 = subdiv_step * subdiv_step * subdiv_step;
+
+			let pre1 = 3 * subdiv_step;
+			let pre2 = 3 * subdiv_step2;
+			let pre4 = 6 * subdiv_step2;
+			let pre5 = 6 * subdiv_step3;
+
+			let tmp1x = x1 - cx1 * 2 + cx2;
+			let tmp1y = y1 - cy1 * 2 + cy2;
+
+			let tmp2x = (cx1 - cx2) * 3 - x1 + x2;
+			let tmp2y = (cy1 - cy2) * 3 - y1 + y2;
+
+			let fx = x1;
+			let fy = y1;
+
+			let dfx = (cx1 - x1) * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3;
+			let dfy = (cy1 - y1) * pre1 + tmp1y * pre2 + tmp2y * subdiv_step3;
+
+			let ddfx = tmp1x * pre4 + tmp2x * pre5;
+			let ddfy = tmp1y * pre4 + tmp2y * pre5;
+
+			let dddfx = tmp2x * pre5;
+			let dddfy = tmp2y * pre5;
+
+			while (segments-- > 0) {
+				this.vertex(fx, fy, color);
+				fx += dfx;
+				fy += dfy;
+				dfx += ddfx;
+				dfy += ddfy;
+				ddfx += dddfx;
+				ddfy += dddfy;
+				this.vertex(fx, fy, color);
+			}
+			this.vertex(fx, fy, color);
+			this.vertex(x2, y2, color);
+		}
+
+		private vertex (x: number, y: number, color: Color) {
+			let idx = this.vertexIndex;
+			let vertices = this.mesh.getVertices();
+			vertices[idx++] = x;
+			vertices[idx++] = y;
+			vertices[idx++] = color.r;
+			vertices[idx++] = color.g;
+			vertices[idx++] = color.b;
+			vertices[idx++] = color.a;
+			this.vertexIndex = idx;			
+		}
+
+		end () {
+			if (!this.isDrawing) throw new Error("ShapeRenderer.begin() has not been called");
+			this.flush();
+			this.isDrawing = false;
+		}
+
+		private flush () {
+			if (this.vertexIndex == 0) return;
+			this.mesh.setVerticesLength(this.vertexIndex);
+			this.mesh.draw(this.shader, this.shapeType);
+			this.vertexIndex = 0;
+		}
+
+		private check(shapeType: ShapeType, numVertices: number) {
+			if (!this.isDrawing) throw new Error("ShapeRenderer.begin() has not been called");
+			if (this.shapeType == shapeType) {
+				if (this.mesh.maxVertices() - this.mesh.numVertices() < numVertices) this.flush();				
+				else return;
+			} else {
+				this.flush();
+				this.shapeType = shapeType;
+			}
+		}
+
+		dispose () {
+			this.mesh.dispose();
+		}
+	}
+
+	export enum ShapeType {
+		Point = WebGLRenderingContext.POINTS,
+		Line = WebGLRenderingContext.LINES,
+		Filled = WebGLRenderingContext.TRIANGLES
+	}
+}

spine-ts/webgl/src/SkeletonDebugRenderer.ts

@@ -0,0 +1,211 @@
+/******************************************************************************
+ * Spine Runtimes Software License
+ * Version 2.5
+ * 
+ * Copyright (c) 2013-2016, Esoteric Software
+ * All rights reserved.
+ * 
+ * You are granted a perpetual, non-exclusive, non-sublicensable, and
+ * non-transferable license to use, install, execute, and perform the Spine
+ * Runtimes software and derivative works solely for personal or internal
+ * use. Without the written permission of Esoteric Software (see Section 2 of
+ * the Spine Software License Agreement), you may not (a) modify, translate,
+ * adapt, or develop new applications using the Spine Runtimes or otherwise
+ * create derivative works or improvements of the Spine Runtimes or (b) remove,
+ * delete, alter, or obscure any trademarks or any copyright, trademark, patent,
+ * or other intellectual property or proprietary rights notices on or in the
+ * Software, including any copy thereof. Redistributions in binary or source
+ * form must include this license and terms.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE "AS IS" AND ANY EXPRESS OR
+ * IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
+ * EVENT SHALL ESOTERIC SOFTWARE BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, BUSINESS INTERRUPTION, OR LOSS OF
+ * USE, DATA, OR PROFITS) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+ * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+ * POSSIBILITY OF SUCH DAMAGE.
+ *****************************************************************************/
+
+module spine.webgl {
+	export class SkeletonDebugRenderer implements Disposable {
+		boneLineColor = new Color(1, 0, 0, 1);
+		boneOriginColor = new Color(0, 1, 0, 1);
+		attachmentLineColor = new Color(0, 0, 1, 0.5);
+		triangleLineColor = new Color(1, 0.64, 0, 0.5);
+		aabbColor = new Color(0, 1, 0, 0.5);
+		drawBones = true;
+		drawRegionAttachments = true;
+		drawBoundingBoxes = true;
+		drawMeshHull = true;
+		drawMeshTriangles = true;
+		drawPaths = true;
+		premultipliedAlpha = false;
+		scale = 1;
+		boneWidth = 2;
+		
+		private gl: WebGLRenderingContext;
+		private shapes: ShapeRenderer;
+		private bounds = new SkeletonBounds();
+		private temp = new Array<number>();
+		private static LIGHT_GRAY = new Color(192 / 255, 192 / 255, 192 / 255, 1);
+		private static GREEN = new Color(0, 1, 0, 1);
+		
+		constructor (gl: WebGLRenderingContext) {
+			this.gl = gl;
+			this.shapes = new ShapeRenderer(gl);
+		}
+
+		draw (shader: Shader, skeleton: Skeleton) {
+			let skeletonX = skeleton.x;
+			let skeletonY = skeleton.y;
+			let gl = this.gl;
+			gl.enable(gl.BLEND);			
+			let srcFunc = this.premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA;
+			gl.blendFunc(srcFunc, gl.ONE_MINUS_SRC_ALPHA);
+
+			let shapes = this.shapes;
+
+			let bones = skeleton.bones;
+			if (this.drawBones) {
+				shapes.setColor(this.boneLineColor);
+				shapes.begin(shader);
+				for (let i = 0, n = bones.length; i < n; i++) {
+					let bone = bones[i];
+					if (bone.parent == null) continue;
+					let x = skeletonX + bone.data.length * bone.a + bone.worldX;
+					let y = skeletonY + bone.data.length * bone.c + bone.worldY;
+					shapes.rectLine(true, skeletonX + bone.worldX, skeletonY + bone.worldY, x, y, this.boneWidth * this.scale);
+				}
+				shapes.end();
+				shapes.begin(shader);
+				shapes.x(skeletonX, skeletonY, 4 * this.scale);
+			} else
+				shapes.begin(shader);
+
+			if (this.drawRegionAttachments) {
+				shapes.setColor(this.attachmentLineColor);
+				let slots = skeleton.slots;
+				for (let i = 0, n = slots.length; i < n; i++) {
+					let slot = slots[i];
+					let attachment = slot.getAttachment();
+					if (attachment instanceof RegionAttachment) {
+						let regionAttachment = <RegionAttachment>attachment;
+						let vertices = regionAttachment.updateWorldVertices(slot, false);
+						shapes.line(vertices[RegionAttachment.X1], vertices[RegionAttachment.Y1], vertices[RegionAttachment.X2], vertices[RegionAttachment.Y2]);
+						shapes.line(vertices[RegionAttachment.X2], vertices[RegionAttachment.Y2], vertices[RegionAttachment.X3], vertices[RegionAttachment.Y3]);
+						shapes.line(vertices[RegionAttachment.X3], vertices[RegionAttachment.Y3], vertices[RegionAttachment.X4], vertices[RegionAttachment.Y4]);
+						shapes.line(vertices[RegionAttachment.X4], vertices[RegionAttachment.Y4], vertices[RegionAttachment.X1], vertices[RegionAttachment.Y1]);
+					}
+				}
+			}
+
+			if (this.drawMeshHull || this.drawMeshTriangles) {
+				let slots = skeleton.slots;
+				for (let i = 0, n = slots.length; i < n; i++) {
+					let slot = slots[i];
+					let attachment = slot.getAttachment();
+					if (!(attachment instanceof MeshAttachment)) continue;
+					let mesh = <MeshAttachment>attachment;
+					mesh.updateWorldVertices(slot, false);
+					let vertices = mesh.worldVertices;
+					let triangles = mesh.triangles;
+					let hullLength = mesh.hullLength;
+					if (this.drawMeshTriangles) {
+						shapes.setColor(this.triangleLineColor);
+						for (let ii = 0, nn = triangles.length; ii < nn; ii += 3) {
+							let v1 = triangles[ii] * 8, v2 = triangles[ii + 1] * 8, v3 = triangles[ii + 2] * 8;
+							shapes.triangle(false, vertices[v1], vertices[v1 + 1], //
+								vertices[v2], vertices[v2 + 1], //
+								vertices[v3], vertices[v3 + 1] //
+							);
+						}
+					}
+					if (this.drawMeshHull && hullLength > 0) {
+						shapes.setColor(this.attachmentLineColor);
+						hullLength = (hullLength >> 1) * 8;
+						let lastX = vertices[hullLength - 8], lastY = vertices[hullLength - 7];
+						for (let ii = 0, nn = hullLength; ii < nn; ii += 8) {
+							let x = vertices[ii], y = vertices[ii + 1];
+							shapes.line(x, y, lastX, lastY);
+							lastX = x;
+							lastY = y;
+						}
+					}
+				}
+			}
+
+			if (this.drawBoundingBoxes) {
+				let bounds = this.bounds;
+				bounds.update(skeleton, true);
+				shapes.setColor(this.aabbColor);
+				shapes.rect(false, bounds.minX, bounds.minY, bounds.getWidth(), bounds.getHeight());
+				let polygons = bounds.polygons;
+				let boxes = bounds.boundingBoxes;
+				for (let i = 0, n = polygons.length; i < n; i++) {
+					let polygon = polygons[i];
+					shapes.setColor(boxes[i].color);
+					shapes.polygon(polygon, 0, polygon.length);
+				}
+			}
+
+			if (this.drawPaths) {
+				let slots = skeleton.slots;
+				for (let i = 0, n = slots.length; i < n; i++) {
+					let slot = slots[i];
+					let attachment = slot.getAttachment();
+					if (!(attachment instanceof PathAttachment)) continue;
+					let path = <PathAttachment>attachment;
+					let nn = path.worldVerticesLength;
+					let world = this.temp = Utils.setArraySize(this.temp, nn, 0);
+					path.computeWorldVertices(slot, world);
+					let color = path.color;
+					let x1 = world[2], y1 = world[3], x2 = 0, y2 = 0;
+					if (path.closed) {
+						shapes.setColor(color);
+						let cx1 = world[0], cy1 = world[1], cx2 = world[nn - 2], cy2 = world[nn - 1];
+						x2 = world[nn - 4];
+						y2 = world[nn - 3];
+						shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
+						shapes.setColor(SkeletonDebugRenderer.LIGHT_GRAY);
+						shapes.line(x1, y1, cx1, cy1);
+						shapes.line(x2, y2, cx2, cy2);
+					}
+					nn -= 4;
+					for (let ii = 4; ii < nn; ii += 6) {
+						let cx1 = world[ii], cy1 = world[ii + 1], cx2 = world[ii + 2], cy2 = world[ii + 3];
+						x2 = world[ii + 4];
+						y2 = world[ii + 5];
+						shapes.setColor(color);
+						shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, 32);
+						shapes.setColor(SkeletonDebugRenderer.LIGHT_GRAY);
+						shapes.line(x1, y1, cx1, cy1);
+						shapes.line(x2, y2, cx2, cy2);
+						x1 = x2;
+						y1 = y2;
+					}
+				}
+			}
+
+			shapes.end();
+			shapes.begin(shader);
+
+			if (this.drawBones) {
+				shapes.setColor(this.boneOriginColor);
+				for (let i = 0, n = bones.length; i < n; i++) {
+					let bone = bones[i];
+					shapes.setColor(SkeletonDebugRenderer.GREEN);
+					shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, 8);
+				}
+			}
+
+			shapes.end();
+		}
+
+		dispose () {
+			this.shapes.dispose();
+		}
+	}
+}