[ts] Added various helper classes to make writing demos easier

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

@@ -730,6 +730,11 @@ declare module spine {
         g: number;
         b: number;
         a: number;
+        static WHITE: Color;
+        static RED: Color;
+        static GREEN: Color;
+        static BLUE: Color;
+        static MAGENTA: Color;
         constructor(r?: number, g?: number, b?: number, a?: number);
         set(r: number, g: number, b: number, a: number): void;
         setFromColor(c: Color): void;
@@ -958,6 +963,27 @@ declare module spine.webgl {
         constructor(gl: WebGLRenderingContext);
     }
 }
+declare module spine.webgl {
+    class OrthoCamera {
+        position: Vector3;
+        direction: Vector3;
+        up: Vector3;
+        near: number;
+        far: number;
+        zoom: number;
+        viewportWidth: number;
+        viewportHeight: number;
+        projectionView: Matrix4;
+        inverseProjectionView: Matrix4;
+        projection: Matrix4;
+        view: Matrix4;
+        private tmp;
+        constructor(viewportWidth: number, viewportHeight: number);
+        update(): void;
+        unproject(screenCoords: Vector3): Vector3;
+        setViewport(viewportWidth: number, viewportHeight: number): void;
+    }
+}
 declare module spine.webgl {
     class GLTexture extends Texture implements Disposable {
         private gl;
@@ -972,6 +998,24 @@ declare module spine.webgl {
         dispose(): void;
     }
 }
+declare module spine.webgl {
+    class Input {
+        element: HTMLElement;
+        lastX: number;
+        lastY: number;
+        buttonDown: boolean;
+        private listeners;
+        constructor(element: HTMLElement);
+        private setupCallbacks(element);
+        addListener(listener: InputListener): void;
+        removeListener(listener: InputListener): void;
+    }
+    interface InputListener {
+        down(x: number, y: number): void;
+        up(x: number, y: number): void;
+        moved(x: number, y: number): void;
+    }
+}
 declare module spine.webgl {
     const M00: number;
     const M01: number;
@@ -992,6 +1036,10 @@ declare module spine.webgl {
     class Matrix4 {
         temp: Float32Array;
         values: Float32Array;
+        private static xAxis;
+        private static yAxis;
+        private static zAxis;
+        private static tmpMatrix;
         constructor();
         set(values: ArrayLike<number>): Matrix4;
         transpose(): Matrix4;
@@ -1005,6 +1053,8 @@ declare module spine.webgl {
         ortho(left: number, right: number, bottom: number, top: number, near: number, far: number): Matrix4;
         multiply(matrix: Matrix4): Matrix4;
         multiplyLeft(matrix: Matrix4): Matrix4;
+        lookAt(position: Vector3, direction: Vector3, up: Vector3): this;
+        static initTemps(): void;
     }
 }
 declare module spine.webgl {
@@ -1062,10 +1112,10 @@ declare module spine.webgl {
     }
 }
 declare module spine.webgl {
-    class PolygonBatcher {
+    class PolygonBatcher implements Disposable {
         private gl;
         private drawCalls;
-        private drawing;
+        private isDrawing;
         private mesh;
         private shader;
         private lastTexture;
@@ -1080,6 +1130,39 @@ declare module spine.webgl {
         private flush();
         end(): void;
         getDrawCalls(): number;
+        dispose(): void;
+    }
+}
+declare module spine.webgl {
+    class SceneRenderer implements Disposable {
+        gl: WebGLRenderingContext;
+        canvas: HTMLCanvasElement;
+        camera: OrthoCamera;
+        private batcherShader;
+        private batcher;
+        private shapes;
+        private shapesShader;
+        private activeRenderer;
+        private skeletonRenderer;
+        private QUAD;
+        private QUAD_TRIANGLES;
+        private WHITE;
+        constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext);
+        begin(): void;
+        drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
+        drawTexture(texture: GLTexture, x: number, y: number, width: number, height: 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;
+        polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color?: Color): void;
+        circle(filled: boolean, x: number, y: number, radius: number, color?: Color, segments?: number): void;
+        curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
+        end(): void;
+        resize(): void;
+        private enableRenderer(renderer);
+        dispose(): void;
     }
 }
 declare module spine.webgl {
@@ -1132,19 +1215,22 @@ declare module spine.webgl {
         private shader;
         private vertexIndex;
         private tmp;
+        private srcBlend;
+        private dstBlend;
         constructor(gl: WebGLRenderingContext, maxVertices?: number);
         begin(shader: Shader): void;
+        setBlendMode(srcBlend: number, dstBlend: number): 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;
+        line(x: number, y: number, x2: number, y2: number, color?: 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;
+        circle(filled: boolean, x: number, y: number, radius: number, color?: Color, segments?: number): 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;
@@ -1199,6 +1285,8 @@ declare module spine.webgl {
         x: number;
         y: number;
         z: number;
+        constructor(x?: number, y?: number, z?: number);
+        setFrom(v: Vector3): Vector3;
         set(x: number, y: number, z: number): Vector3;
         add(v: Vector3): Vector3;
         sub(v: Vector3): Vector3;

spine-ts/build/spine-all.js

@@ -4012,6 +4012,11 @@ var spine;
                 this.a = 1;
             return this;
         };
+        Color.WHITE = new Color(1, 1, 1, 1);
+        Color.RED = new Color(1, 0, 0, 1);
+        Color.GREEN = new Color(0, 1, 0, 1);
+        Color.BLUE = new Color(0, 0, 1, 1);
+        Color.MAGENTA = new Color(1, 0, 1, 1);
         return Color;
     }());
     spine.Color = Color;
@@ -4824,7 +4829,9 @@ var spine;
         var AssetManager = (function (_super) {
             __extends(AssetManager, _super);
             function AssetManager(gl) {
-                _super.call(this, function (image) { return new spine.webgl.GLTexture(gl, image); });
+                _super.call(this, function (image) {
+                    return new spine.webgl.GLTexture(gl, image);
+                });
             }
             return AssetManager;
         }(spine.AssetManager));
@@ -4832,6 +4839,60 @@ var spine;
     })(webgl = spine.webgl || (spine.webgl = {}));
 })(spine || (spine = {}));
 var spine;
+(function (spine) {
+    var webgl;
+    (function (webgl) {
+        var OrthoCamera = (function () {
+            function OrthoCamera(viewportWidth, viewportHeight) {
+                this.position = new webgl.Vector3(0, 0, 0);
+                this.direction = new webgl.Vector3(0, 0, -1);
+                this.up = new webgl.Vector3(0, 1, 0);
+                this.near = 0;
+                this.far = 100;
+                this.zoom = 1;
+                this.viewportWidth = 0;
+                this.viewportHeight = 0;
+                this.projectionView = new webgl.Matrix4();
+                this.inverseProjectionView = new webgl.Matrix4();
+                this.projection = new webgl.Matrix4();
+                this.view = new webgl.Matrix4();
+                this.tmp = new webgl.Vector3();
+                this.viewportWidth = viewportWidth;
+                this.viewportHeight = viewportHeight;
+                this.update();
+            }
+            OrthoCamera.prototype.update = function () {
+                var projection = this.projection;
+                var view = this.view;
+                var projectionView = this.projectionView;
+                var inverseProjectionView = this.inverseProjectionView;
+                var zoom = this.zoom, viewportWidth = this.viewportWidth, viewportHeight = this.viewportHeight;
+                projection.ortho(zoom * (-viewportWidth / 2), zoom * (viewportWidth / 2), zoom * (-viewportHeight / 2), zoom * (viewportHeight / 2), this.near, this.far);
+                view.lookAt(this.position, this.direction, this.up);
+                projectionView.set(projection.values);
+                projectionView.multiply(view);
+                inverseProjectionView.set(projectionView.values).invert();
+            };
+            OrthoCamera.prototype.unproject = function (screenCoords) {
+                var x = screenCoords.x, y = this.viewportHeight - screenCoords.y - 1;
+                var tmp = this.tmp;
+                tmp.x = (2 * x) / this.viewportWidth - 1;
+                tmp.y = (2 * y) / this.viewportHeight - 1;
+                tmp.z = (2 * screenCoords.z) - 1;
+                tmp.project(this.inverseProjectionView);
+                screenCoords.set(tmp.x, tmp.y, tmp.z);
+                return screenCoords;
+            };
+            OrthoCamera.prototype.setViewport = function (viewportWidth, viewportHeight) {
+                this.viewportWidth = viewportWidth;
+                this.viewportHeight = viewportHeight;
+            };
+            return OrthoCamera;
+        }());
+        webgl.OrthoCamera = OrthoCamera;
+    })(webgl = spine.webgl || (spine.webgl = {}));
+})(spine || (spine = {}));
+var spine;
 (function (spine) {
     var webgl;
     (function (webgl) {
@@ -4890,6 +4951,80 @@ var spine;
     })(webgl = spine.webgl || (spine.webgl = {}));
 })(spine || (spine = {}));
 var spine;
+(function (spine) {
+    var webgl;
+    (function (webgl) {
+        var Input = (function () {
+            function Input(element) {
+                this.lastX = 0;
+                this.lastY = 0;
+                this.buttonDown = false;
+                this.listeners = new Array();
+                this.element = element;
+                this.setupCallbacks(element);
+            }
+            Input.prototype.setupCallbacks = function (element) {
+                var _this = this;
+                element.addEventListener("mousedown", function (ev) {
+                    if (ev instanceof MouseEvent) {
+                        var rect = element.getBoundingClientRect();
+                        var x = ev.clientX - rect.left;
+                        var y = ev.clientY - rect.top;
+                        var listeners = _this.listeners;
+                        for (var i = 0; i < listeners.length; i++) {
+                            listeners[i].down(x, y);
+                        }
+                        _this.lastX = x;
+                        _this.lastY = y;
+                        _this.buttonDown = true;
+                    }
+                }, true);
+                element.addEventListener("mousemove", function (ev) {
+                    if (ev instanceof MouseEvent) {
+                        var rect = element.getBoundingClientRect();
+                        var x = ev.clientX - rect.left;
+                        var y = ev.clientY - rect.top;
+                        var listeners = _this.listeners;
+                        for (var i = 0; i < listeners.length; i++) {
+                            listeners[i].moved(x, y);
+                        }
+                        _this.lastX = x;
+                        _this.lastY = y;
+                        _this.buttonDown = true;
+                    }
+                }, true);
+                element.addEventListener("mouseup", function (ev) {
+                    if (ev instanceof MouseEvent) {
+                        var rect = element.getBoundingClientRect();
+                        var x = ev.clientX - rect.left;
+                        var y = ev.clientY - rect.top;
+                        var listeners = _this.listeners;
+                        for (var i = 0; i < listeners.length; i++) {
+                            listeners[i].up(x, y);
+                        }
+                        _this.lastX = x;
+                        _this.lastY = y;
+                        _this.buttonDown = true;
+                    }
+                }, true);
+                element.addEventListener(navigator.userAgent.toLowerCase().indexOf('firefox') != -1 ? "DOMMouseScroll" : "mousewheel", function (ev) {
+                }, true);
+            };
+            Input.prototype.addListener = function (listener) {
+                this.listeners.push(listener);
+            };
+            Input.prototype.removeListener = function (listener) {
+                var idx = this.listeners.indexOf(listener);
+                if (idx > -1) {
+                    this.listeners.splice(idx, 1);
+                }
+            };
+            return Input;
+        }());
+        webgl.Input = Input;
+    })(webgl = spine.webgl || (spine.webgl = {}));
+})(spine || (spine = {}));
+var spine;
 (function (spine) {
     var webgl;
     (function (webgl) {
@@ -5147,6 +5282,43 @@ var spine;
                 t[webgl.M33] = m[webgl.M30] * v[webgl.M03] + m[webgl.M31] * v[webgl.M13] + m[webgl.M32] * v[webgl.M23] + m[webgl.M33] * v[webgl.M33];
                 return this.set(this.temp);
             };
+            Matrix4.prototype.lookAt = function (position, direction, up) {
+                Matrix4.initTemps();
+                var xAxis = Matrix4.xAxis, yAxis = Matrix4.yAxis, zAxis = Matrix4.zAxis;
+                zAxis.setFrom(direction).normalize();
+                xAxis.setFrom(direction).normalize();
+                xAxis.cross(up).normalize();
+                yAxis.setFrom(xAxis).cross(zAxis).normalize();
+                this.identity();
+                var val = this.values;
+                val[webgl.M00] = xAxis.x;
+                val[webgl.M01] = xAxis.y;
+                val[webgl.M02] = xAxis.z;
+                val[webgl.M10] = yAxis.x;
+                val[webgl.M11] = yAxis.y;
+                val[webgl.M12] = yAxis.z;
+                val[webgl.M20] = -zAxis.x;
+                val[webgl.M21] = -zAxis.y;
+                val[webgl.M22] = -zAxis.z;
+                Matrix4.tmpMatrix.identity();
+                Matrix4.tmpMatrix.values[webgl.M03] = -position.x;
+                Matrix4.tmpMatrix.values[webgl.M13] = -position.y;
+                Matrix4.tmpMatrix.values[webgl.M23] = -position.z;
+                this.multiply(Matrix4.tmpMatrix);
+                return this;
+            };
+            Matrix4.initTemps = function () {
+                if (Matrix4.xAxis === null)
+                    Matrix4.xAxis = new webgl.Vector3();
+                if (Matrix4.yAxis === null)
+                    Matrix4.yAxis = new webgl.Vector3();
+                if (Matrix4.zAxis === null)
+                    Matrix4.zAxis = new webgl.Vector3();
+            };
+            Matrix4.xAxis = null;
+            Matrix4.yAxis = null;
+            Matrix4.zAxis = null;
+            Matrix4.tmpMatrix = new Matrix4();
             return Matrix4;
         }());
         webgl.Matrix4 = Matrix4;
@@ -5323,7 +5495,7 @@ var spine;
         var PolygonBatcher = (function () {
             function PolygonBatcher(gl, maxVertices) {
                 if (maxVertices === void 0) { maxVertices = 10920; }
-                this.drawing = false;
+                this.isDrawing = false;
                 this.shader = null;
                 this.lastTexture = null;
                 this.verticesLength = 0;
@@ -5337,12 +5509,12 @@ var spine;
             }
             PolygonBatcher.prototype.begin = function (shader) {
                 var gl = this.gl;
-                if (this.drawing)
+                if (this.isDrawing)
                     throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
                 this.drawCalls = 0;
                 this.shader = shader;
                 this.lastTexture = null;
-                this.drawing = true;
+                this.isDrawing = true;
                 gl.enable(gl.BLEND);
                 gl.blendFunc(this.srcBlend, this.dstBlend);
             };
@@ -5350,7 +5522,7 @@ var spine;
                 var gl = this.gl;
                 this.srcBlend = srcBlend;
                 this.dstBlend = dstBlend;
-                if (this.drawing) {
+                if (this.isDrawing) {
                     this.flush();
                     gl.blendFunc(this.srcBlend, this.dstBlend);
                 }
@@ -5388,22 +5560,193 @@ var spine;
             };
             PolygonBatcher.prototype.end = function () {
                 var gl = this.gl;
-                if (!this.drawing)
+                if (!this.isDrawing)
                     throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
                 if (this.verticesLength > 0 || this.indicesLength > 0)
                     this.flush();
                 this.shader = null;
                 this.lastTexture = null;
-                this.drawing = false;
+                this.isDrawing = false;
                 gl.disable(gl.BLEND);
             };
             PolygonBatcher.prototype.getDrawCalls = function () { return this.drawCalls; };
+            PolygonBatcher.prototype.dispose = function () {
+                this.mesh.dispose();
+            };
             return PolygonBatcher;
         }());
         webgl.PolygonBatcher = PolygonBatcher;
     })(webgl = spine.webgl || (spine.webgl = {}));
 })(spine || (spine = {}));
 var spine;
+(function (spine) {
+    var webgl;
+    (function (webgl) {
+        var SceneRenderer = (function () {
+            function SceneRenderer(canvas, gl) {
+                this.activeRenderer = null;
+                this.QUAD = [
+                    0, 0, 1, 1, 1, 1, 0, 0,
+                    0, 0, 1, 1, 1, 1, 0, 0,
+                    0, 0, 1, 1, 1, 1, 0, 0,
+                    0, 0, 1, 1, 1, 1, 0, 0,
+                ];
+                this.QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
+                this.WHITE = new spine.Color(1, 1, 1, 1);
+                this.canvas = canvas;
+                this.gl = gl;
+                this.camera = new webgl.OrthoCamera(canvas.width, canvas.height);
+                this.batcherShader = webgl.Shader.newColoredTextured(gl);
+                this.batcher = new webgl.PolygonBatcher(gl);
+                this.shapesShader = webgl.Shader.newColored(gl);
+                this.shapes = new webgl.ShapeRenderer(gl);
+                this.skeletonRenderer = new webgl.SkeletonRenderer(gl);
+            }
+            SceneRenderer.prototype.begin = function () {
+                this.camera.update();
+                this.enableRenderer(this.batcher);
+            };
+            SceneRenderer.prototype.drawSkeleton = function (skeleton, premultipliedAlpha) {
+                if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
+                this.enableRenderer(this.batcher);
+                this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
+                this.skeletonRenderer.draw(this.batcher, skeleton);
+            };
+            SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
+                if (color === void 0) { color = null; }
+                this.enableRenderer(this.batcher);
+                if (color === null)
+                    color = this.WHITE;
+                var quad = this.QUAD;
+                quad[0] = x;
+                quad[1] = y;
+                quad[2] = color.r;
+                quad[3] = color.g;
+                quad[4] = color.b;
+                quad[5] = color.a;
+                quad[6] = 0;
+                quad[7] = 1;
+                quad[8] = x + width;
+                quad[9] = y;
+                quad[10] = color.r;
+                quad[11] = color.g;
+                quad[12] = color.b;
+                quad[13] = color.a;
+                quad[14] = 1;
+                quad[15] = 1;
+                quad[16] = x + width;
+                quad[17] = y + height;
+                quad[18] = color.r;
+                quad[19] = color.g;
+                quad[20] = color.b;
+                quad[21] = color.a;
+                quad[22] = 1;
+                quad[23] = 0;
+                quad[24] = x;
+                quad[25] = y + height;
+                quad[26] = color.r;
+                quad[27] = color.g;
+                quad[28] = color.b;
+                quad[29] = color.a;
+                quad[30] = 0;
+                quad[31] = 0;
+                this.batcher.draw(texture, quad, this.QUAD_TRIANGLES);
+            };
+            SceneRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
+                if (color === void 0) { color = null; }
+                if (color2 === void 0) { color2 = null; }
+                this.enableRenderer(this.shapes);
+                this.shapes.line(x, y, x2, y2, color);
+            };
+            SceneRenderer.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.enableRenderer(this.shapes);
+                this.shapes.triangle(filled, x, y, x2, y2, x3, y3, color, color2, color3);
+            };
+            SceneRenderer.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.enableRenderer(this.shapes);
+                this.shapes.quad(filled, x, y, x2, y2, x3, y3, x4, y4, color, color2, color3, color4);
+            };
+            SceneRenderer.prototype.rect = function (filled, x, y, width, height, color) {
+                if (color === void 0) { color = null; }
+                this.enableRenderer(this.shapes);
+                this.shapes.rect(filled, x, y, width, height, color);
+            };
+            SceneRenderer.prototype.rectLine = function (filled, x1, y1, x2, y2, width, color) {
+                if (color === void 0) { color = null; }
+                this.enableRenderer(this.shapes);
+                this.shapes.rectLine(filled, x1, y1, x2, y2, width, color);
+            };
+            SceneRenderer.prototype.polygon = function (polygonVertices, offset, count, color) {
+                if (color === void 0) { color = null; }
+                this.enableRenderer(this.shapes);
+                this.shapes.polygon(polygonVertices, offset, count, color);
+            };
+            SceneRenderer.prototype.circle = function (filled, x, y, radius, color, segments) {
+                if (color === void 0) { color = null; }
+                if (segments === void 0) { segments = 0; }
+                this.enableRenderer(this.shapes);
+                this.shapes.circle(filled, x, y, radius, color, segments);
+            };
+            SceneRenderer.prototype.curve = function (x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color) {
+                if (color === void 0) { color = null; }
+                this.enableRenderer(this.shapes);
+                this.shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color);
+            };
+            SceneRenderer.prototype.end = function () {
+                if (this.activeRenderer === this.batcher)
+                    this.batcher.end();
+                else if (this.activeRenderer === this.shapes)
+                    this.shapes.end();
+                this.activeRenderer = null;
+            };
+            SceneRenderer.prototype.resize = function () {
+                var canvas = this.canvas;
+                var w = canvas.clientWidth;
+                var h = canvas.clientHeight;
+                if (canvas.width != w || canvas.height != h) {
+                    canvas.width = w;
+                    canvas.height = h;
+                }
+                this.camera.setViewport(w, h);
+                this.camera.update();
+                this.gl.viewport(0, 0, canvas.width, canvas.height);
+            };
+            SceneRenderer.prototype.enableRenderer = function (renderer) {
+                if (this.activeRenderer === renderer)
+                    return;
+                this.end();
+                if (renderer instanceof webgl.PolygonBatcher) {
+                    this.batcherShader.bind();
+                    this.batcherShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
+                    this.batcher.begin(this.batcherShader);
+                    this.activeRenderer = this.batcher;
+                }
+                else {
+                    this.shapesShader.bind();
+                    this.shapesShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
+                    this.shapes.begin(this.shapesShader);
+                    this.activeRenderer = this.shapes;
+                }
+            };
+            SceneRenderer.prototype.dispose = function () {
+                this.batcher.dispose();
+                this.batcherShader.dispose();
+                this.shapes.dispose();
+                this.shapesShader.dispose();
+            };
+            return SceneRenderer;
+        }());
+        webgl.SceneRenderer = SceneRenderer;
+    })(webgl = spine.webgl || (spine.webgl = {}));
+})(spine || (spine = {}));
+var spine;
 (function (spine) {
     var webgl;
     (function (webgl) {
@@ -5557,6 +5900,8 @@ var spine;
                 this.color = new spine.Color(1, 1, 1, 1);
                 this.vertexIndex = 0;
                 this.tmp = new spine.Vector2();
+                this.srcBlend = WebGLRenderingContext.SRC_ALPHA;
+                this.dstBlend = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
                 if (maxVertices > 10920)
                     throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
                 this.gl = gl;
@@ -5568,6 +5913,18 @@ var spine;
                 this.shader = shader;
                 this.vertexIndex = 0;
                 this.isDrawing = true;
+                var gl = this.gl;
+                gl.enable(gl.BLEND);
+                gl.blendFunc(this.srcBlend, this.dstBlend);
+            };
+            ShapeRenderer.prototype.setBlendMode = function (srcBlend, dstBlend) {
+                var gl = this.gl;
+                this.srcBlend = srcBlend;
+                this.dstBlend = dstBlend;
+                if (this.isDrawing) {
+                    this.flush();
+                    gl.blendFunc(this.srcBlend, this.dstBlend);
+                }
             };
             ShapeRenderer.prototype.setColor = function (color) {
                 this.color.setFromColor(color);
@@ -5582,18 +5939,15 @@ var spine;
                     color = this.color;
                 this.vertex(x, y, color);
             };
-            ShapeRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
+            ShapeRenderer.prototype.line = function (x, y, x2, y2, color) {
                 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);
+                this.vertex(x2, y2, color);
             };
             ShapeRenderer.prototype.triangle = function (filled, x, y, x2, y2, x3, y3, color, color2, color3) {
                 if (color === void 0) { color = null; }
@@ -5725,8 +6079,9 @@ var spine;
                     this.vertex(x2, y2, color);
                 }
             };
-            ShapeRenderer.prototype.circle = function (filled, x, y, radius, segments, color) {
+            ShapeRenderer.prototype.circle = function (filled, x, y, radius, color, segments) {
                 if (color === void 0) { color = null; }
+                if (segments === void 0) { segments = 0; }
                 if (segments === 0)
                     segments = Math.max(1, (6 * spine.MathUtils.cbrt(radius)) | 0);
                 if (segments <= 0)
@@ -5827,6 +6182,7 @@ var spine;
                 this.mesh.setVerticesLength(this.vertexIndex);
                 this.mesh.draw(this.shader, this.shapeType);
                 this.vertexIndex = 0;
+                this.gl.disable(this.gl.BLEND);
             };
             ShapeRenderer.prototype.check = function (shapeType, numVertices) {
                 if (!this.isDrawing)
@@ -6012,8 +6368,7 @@ var spine;
                     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, SkeletonDebugRenderer.GREEN, 8);
-                        shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, 8);
                     }
                 }
                 shapes.end();
@@ -6082,11 +6437,23 @@ var spine;
     var webgl;
     (function (webgl) {
         var Vector3 = (function () {
-            function Vector3() {
+            function Vector3(x, y, z) {
+                if (x === void 0) { x = 0; }
+                if (y === void 0) { y = 0; }
+                if (z === void 0) { z = 0; }
                 this.x = 0;
                 this.y = 0;
                 this.z = 0;
+                this.x = x;
+                this.y = y;
+                this.z = z;
             }
+            Vector3.prototype.setFrom = function (v) {
+                this.x = v.x;
+                this.y = v.y;
+                this.z = v.z;
+                return this;
+            };
             Vector3.prototype.set = function (x, y, z) {
                 this.x = x;
                 this.y = y;

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

@@ -704,6 +704,11 @@ declare module spine {
         g: number;
         b: number;
         a: number;
+        static WHITE: Color;
+        static RED: Color;
+        static GREEN: Color;
+        static BLUE: Color;
+        static MAGENTA: Color;
         constructor(r?: number, g?: number, b?: number, a?: number);
         set(r: number, g: number, b: number, a: number): void;
         setFromColor(c: Color): void;

spine-ts/build/spine-core.js

@@ -3836,6 +3836,11 @@ var spine;
                 this.a = 1;
             return this;
         };
+        Color.WHITE = new Color(1, 1, 1, 1);
+        Color.RED = new Color(1, 0, 0, 1);
+        Color.GREEN = new Color(0, 1, 0, 1);
+        Color.BLUE = new Color(0, 0, 1, 1);
+        Color.MAGENTA = new Color(1, 0, 1, 1);
         return Color;
     }());
     spine.Color = Color;

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

@@ -704,6 +704,11 @@ declare module spine {
         g: number;
         b: number;
         a: number;
+        static WHITE: Color;
+        static RED: Color;
+        static GREEN: Color;
+        static BLUE: Color;
+        static MAGENTA: Color;
         constructor(r?: number, g?: number, b?: number, a?: number);
         set(r: number, g: number, b: number, a: number): void;
         setFromColor(c: Color): void;

spine-ts/build/spine-threejs.js

@@ -3836,6 +3836,11 @@ var spine;
                 this.a = 1;
             return this;
         };
+        Color.WHITE = new Color(1, 1, 1, 1);
+        Color.RED = new Color(1, 0, 0, 1);
+        Color.GREEN = new Color(0, 1, 0, 1);
+        Color.BLUE = new Color(0, 0, 1, 1);
+        Color.MAGENTA = new Color(1, 0, 1, 1);
         return Color;
     }());
     spine.Color = Color;

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

@@ -704,6 +704,11 @@ declare module spine {
         g: number;
         b: number;
         a: number;
+        static WHITE: Color;
+        static RED: Color;
+        static GREEN: Color;
+        static BLUE: Color;
+        static MAGENTA: Color;
         constructor(r?: number, g?: number, b?: number, a?: number);
         set(r: number, g: number, b: number, a: number): void;
         setFromColor(c: Color): void;
@@ -888,6 +893,27 @@ declare module spine.webgl {
         constructor(gl: WebGLRenderingContext);
     }
 }
+declare module spine.webgl {
+    class OrthoCamera {
+        position: Vector3;
+        direction: Vector3;
+        up: Vector3;
+        near: number;
+        far: number;
+        zoom: number;
+        viewportWidth: number;
+        viewportHeight: number;
+        projectionView: Matrix4;
+        inverseProjectionView: Matrix4;
+        projection: Matrix4;
+        view: Matrix4;
+        private tmp;
+        constructor(viewportWidth: number, viewportHeight: number);
+        update(): void;
+        unproject(screenCoords: Vector3): Vector3;
+        setViewport(viewportWidth: number, viewportHeight: number): void;
+    }
+}
 declare module spine.webgl {
     class GLTexture extends Texture implements Disposable {
         private gl;
@@ -902,6 +928,24 @@ declare module spine.webgl {
         dispose(): void;
     }
 }
+declare module spine.webgl {
+    class Input {
+        element: HTMLElement;
+        lastX: number;
+        lastY: number;
+        buttonDown: boolean;
+        private listeners;
+        constructor(element: HTMLElement);
+        private setupCallbacks(element);
+        addListener(listener: InputListener): void;
+        removeListener(listener: InputListener): void;
+    }
+    interface InputListener {
+        down(x: number, y: number): void;
+        up(x: number, y: number): void;
+        moved(x: number, y: number): void;
+    }
+}
 declare module spine.webgl {
     const M00: number;
     const M01: number;
@@ -922,6 +966,10 @@ declare module spine.webgl {
     class Matrix4 {
         temp: Float32Array;
         values: Float32Array;
+        private static xAxis;
+        private static yAxis;
+        private static zAxis;
+        private static tmpMatrix;
         constructor();
         set(values: ArrayLike<number>): Matrix4;
         transpose(): Matrix4;
@@ -935,6 +983,8 @@ declare module spine.webgl {
         ortho(left: number, right: number, bottom: number, top: number, near: number, far: number): Matrix4;
         multiply(matrix: Matrix4): Matrix4;
         multiplyLeft(matrix: Matrix4): Matrix4;
+        lookAt(position: Vector3, direction: Vector3, up: Vector3): this;
+        static initTemps(): void;
     }
 }
 declare module spine.webgl {
@@ -992,10 +1042,10 @@ declare module spine.webgl {
     }
 }
 declare module spine.webgl {
-    class PolygonBatcher {
+    class PolygonBatcher implements Disposable {
         private gl;
         private drawCalls;
-        private drawing;
+        private isDrawing;
         private mesh;
         private shader;
         private lastTexture;
@@ -1010,6 +1060,39 @@ declare module spine.webgl {
         private flush();
         end(): void;
         getDrawCalls(): number;
+        dispose(): void;
+    }
+}
+declare module spine.webgl {
+    class SceneRenderer implements Disposable {
+        gl: WebGLRenderingContext;
+        canvas: HTMLCanvasElement;
+        camera: OrthoCamera;
+        private batcherShader;
+        private batcher;
+        private shapes;
+        private shapesShader;
+        private activeRenderer;
+        private skeletonRenderer;
+        private QUAD;
+        private QUAD_TRIANGLES;
+        private WHITE;
+        constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext);
+        begin(): void;
+        drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
+        drawTexture(texture: GLTexture, x: number, y: number, width: number, height: 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;
+        polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color?: Color): void;
+        circle(filled: boolean, x: number, y: number, radius: number, color?: Color, segments?: number): void;
+        curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
+        end(): void;
+        resize(): void;
+        private enableRenderer(renderer);
+        dispose(): void;
     }
 }
 declare module spine.webgl {
@@ -1062,19 +1145,22 @@ declare module spine.webgl {
         private shader;
         private vertexIndex;
         private tmp;
+        private srcBlend;
+        private dstBlend;
         constructor(gl: WebGLRenderingContext, maxVertices?: number);
         begin(shader: Shader): void;
+        setBlendMode(srcBlend: number, dstBlend: number): 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;
+        line(x: number, y: number, x2: number, y2: number, color?: 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;
+        circle(filled: boolean, x: number, y: number, radius: number, color?: Color, segments?: number): 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;
@@ -1129,6 +1215,8 @@ declare module spine.webgl {
         x: number;
         y: number;
         z: number;
+        constructor(x?: number, y?: number, z?: number);
+        setFrom(v: Vector3): Vector3;
         set(x: number, y: number, z: number): Vector3;
         add(v: Vector3): Vector3;
         sub(v: Vector3): Vector3;

spine-ts/build/spine-webgl.js

@@ -3836,6 +3836,11 @@ var spine;
                 this.a = 1;
             return this;
         };
+        Color.WHITE = new Color(1, 1, 1, 1);
+        Color.RED = new Color(1, 0, 0, 1);
+        Color.GREEN = new Color(0, 1, 0, 1);
+        Color.BLUE = new Color(0, 0, 1, 1);
+        Color.MAGENTA = new Color(1, 0, 1, 1);
         return Color;
     }());
     spine.Color = Color;
@@ -4403,7 +4408,9 @@ var spine;
         var AssetManager = (function (_super) {
             __extends(AssetManager, _super);
             function AssetManager(gl) {
-                _super.call(this, function (image) { return new spine.webgl.GLTexture(gl, image); });
+                _super.call(this, function (image) {
+                    return new spine.webgl.GLTexture(gl, image);
+                });
             }
             return AssetManager;
         }(spine.AssetManager));
@@ -4411,6 +4418,60 @@ var spine;
     })(webgl = spine.webgl || (spine.webgl = {}));
 })(spine || (spine = {}));
 var spine;
+(function (spine) {
+    var webgl;
+    (function (webgl) {
+        var OrthoCamera = (function () {
+            function OrthoCamera(viewportWidth, viewportHeight) {
+                this.position = new webgl.Vector3(0, 0, 0);
+                this.direction = new webgl.Vector3(0, 0, -1);
+                this.up = new webgl.Vector3(0, 1, 0);
+                this.near = 0;
+                this.far = 100;
+                this.zoom = 1;
+                this.viewportWidth = 0;
+                this.viewportHeight = 0;
+                this.projectionView = new webgl.Matrix4();
+                this.inverseProjectionView = new webgl.Matrix4();
+                this.projection = new webgl.Matrix4();
+                this.view = new webgl.Matrix4();
+                this.tmp = new webgl.Vector3();
+                this.viewportWidth = viewportWidth;
+                this.viewportHeight = viewportHeight;
+                this.update();
+            }
+            OrthoCamera.prototype.update = function () {
+                var projection = this.projection;
+                var view = this.view;
+                var projectionView = this.projectionView;
+                var inverseProjectionView = this.inverseProjectionView;
+                var zoom = this.zoom, viewportWidth = this.viewportWidth, viewportHeight = this.viewportHeight;
+                projection.ortho(zoom * (-viewportWidth / 2), zoom * (viewportWidth / 2), zoom * (-viewportHeight / 2), zoom * (viewportHeight / 2), this.near, this.far);
+                view.lookAt(this.position, this.direction, this.up);
+                projectionView.set(projection.values);
+                projectionView.multiply(view);
+                inverseProjectionView.set(projectionView.values).invert();
+            };
+            OrthoCamera.prototype.unproject = function (screenCoords) {
+                var x = screenCoords.x, y = this.viewportHeight - screenCoords.y - 1;
+                var tmp = this.tmp;
+                tmp.x = (2 * x) / this.viewportWidth - 1;
+                tmp.y = (2 * y) / this.viewportHeight - 1;
+                tmp.z = (2 * screenCoords.z) - 1;
+                tmp.project(this.inverseProjectionView);
+                screenCoords.set(tmp.x, tmp.y, tmp.z);
+                return screenCoords;
+            };
+            OrthoCamera.prototype.setViewport = function (viewportWidth, viewportHeight) {
+                this.viewportWidth = viewportWidth;
+                this.viewportHeight = viewportHeight;
+            };
+            return OrthoCamera;
+        }());
+        webgl.OrthoCamera = OrthoCamera;
+    })(webgl = spine.webgl || (spine.webgl = {}));
+})(spine || (spine = {}));
+var spine;
 (function (spine) {
     var webgl;
     (function (webgl) {
@@ -4469,6 +4530,80 @@ var spine;
     })(webgl = spine.webgl || (spine.webgl = {}));
 })(spine || (spine = {}));
 var spine;
+(function (spine) {
+    var webgl;
+    (function (webgl) {
+        var Input = (function () {
+            function Input(element) {
+                this.lastX = 0;
+                this.lastY = 0;
+                this.buttonDown = false;
+                this.listeners = new Array();
+                this.element = element;
+                this.setupCallbacks(element);
+            }
+            Input.prototype.setupCallbacks = function (element) {
+                var _this = this;
+                element.addEventListener("mousedown", function (ev) {
+                    if (ev instanceof MouseEvent) {
+                        var rect = element.getBoundingClientRect();
+                        var x = ev.clientX - rect.left;
+                        var y = ev.clientY - rect.top;
+                        var listeners = _this.listeners;
+                        for (var i = 0; i < listeners.length; i++) {
+                            listeners[i].down(x, y);
+                        }
+                        _this.lastX = x;
+                        _this.lastY = y;
+                        _this.buttonDown = true;
+                    }
+                }, true);
+                element.addEventListener("mousemove", function (ev) {
+                    if (ev instanceof MouseEvent) {
+                        var rect = element.getBoundingClientRect();
+                        var x = ev.clientX - rect.left;
+                        var y = ev.clientY - rect.top;
+                        var listeners = _this.listeners;
+                        for (var i = 0; i < listeners.length; i++) {
+                            listeners[i].moved(x, y);
+                        }
+                        _this.lastX = x;
+                        _this.lastY = y;
+                        _this.buttonDown = true;
+                    }
+                }, true);
+                element.addEventListener("mouseup", function (ev) {
+                    if (ev instanceof MouseEvent) {
+                        var rect = element.getBoundingClientRect();
+                        var x = ev.clientX - rect.left;
+                        var y = ev.clientY - rect.top;
+                        var listeners = _this.listeners;
+                        for (var i = 0; i < listeners.length; i++) {
+                            listeners[i].up(x, y);
+                        }
+                        _this.lastX = x;
+                        _this.lastY = y;
+                        _this.buttonDown = true;
+                    }
+                }, true);
+                element.addEventListener(navigator.userAgent.toLowerCase().indexOf('firefox') != -1 ? "DOMMouseScroll" : "mousewheel", function (ev) {
+                }, true);
+            };
+            Input.prototype.addListener = function (listener) {
+                this.listeners.push(listener);
+            };
+            Input.prototype.removeListener = function (listener) {
+                var idx = this.listeners.indexOf(listener);
+                if (idx > -1) {
+                    this.listeners.splice(idx, 1);
+                }
+            };
+            return Input;
+        }());
+        webgl.Input = Input;
+    })(webgl = spine.webgl || (spine.webgl = {}));
+})(spine || (spine = {}));
+var spine;
 (function (spine) {
     var webgl;
     (function (webgl) {
@@ -4726,6 +4861,43 @@ var spine;
                 t[webgl.M33] = m[webgl.M30] * v[webgl.M03] + m[webgl.M31] * v[webgl.M13] + m[webgl.M32] * v[webgl.M23] + m[webgl.M33] * v[webgl.M33];
                 return this.set(this.temp);
             };
+            Matrix4.prototype.lookAt = function (position, direction, up) {
+                Matrix4.initTemps();
+                var xAxis = Matrix4.xAxis, yAxis = Matrix4.yAxis, zAxis = Matrix4.zAxis;
+                zAxis.setFrom(direction).normalize();
+                xAxis.setFrom(direction).normalize();
+                xAxis.cross(up).normalize();
+                yAxis.setFrom(xAxis).cross(zAxis).normalize();
+                this.identity();
+                var val = this.values;
+                val[webgl.M00] = xAxis.x;
+                val[webgl.M01] = xAxis.y;
+                val[webgl.M02] = xAxis.z;
+                val[webgl.M10] = yAxis.x;
+                val[webgl.M11] = yAxis.y;
+                val[webgl.M12] = yAxis.z;
+                val[webgl.M20] = -zAxis.x;
+                val[webgl.M21] = -zAxis.y;
+                val[webgl.M22] = -zAxis.z;
+                Matrix4.tmpMatrix.identity();
+                Matrix4.tmpMatrix.values[webgl.M03] = -position.x;
+                Matrix4.tmpMatrix.values[webgl.M13] = -position.y;
+                Matrix4.tmpMatrix.values[webgl.M23] = -position.z;
+                this.multiply(Matrix4.tmpMatrix);
+                return this;
+            };
+            Matrix4.initTemps = function () {
+                if (Matrix4.xAxis === null)
+                    Matrix4.xAxis = new webgl.Vector3();
+                if (Matrix4.yAxis === null)
+                    Matrix4.yAxis = new webgl.Vector3();
+                if (Matrix4.zAxis === null)
+                    Matrix4.zAxis = new webgl.Vector3();
+            };
+            Matrix4.xAxis = null;
+            Matrix4.yAxis = null;
+            Matrix4.zAxis = null;
+            Matrix4.tmpMatrix = new Matrix4();
             return Matrix4;
         }());
         webgl.Matrix4 = Matrix4;
@@ -4902,7 +5074,7 @@ var spine;
         var PolygonBatcher = (function () {
             function PolygonBatcher(gl, maxVertices) {
                 if (maxVertices === void 0) { maxVertices = 10920; }
-                this.drawing = false;
+                this.isDrawing = false;
                 this.shader = null;
                 this.lastTexture = null;
                 this.verticesLength = 0;
@@ -4916,12 +5088,12 @@ var spine;
             }
             PolygonBatcher.prototype.begin = function (shader) {
                 var gl = this.gl;
-                if (this.drawing)
+                if (this.isDrawing)
                     throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
                 this.drawCalls = 0;
                 this.shader = shader;
                 this.lastTexture = null;
-                this.drawing = true;
+                this.isDrawing = true;
                 gl.enable(gl.BLEND);
                 gl.blendFunc(this.srcBlend, this.dstBlend);
             };
@@ -4929,7 +5101,7 @@ var spine;
                 var gl = this.gl;
                 this.srcBlend = srcBlend;
                 this.dstBlend = dstBlend;
-                if (this.drawing) {
+                if (this.isDrawing) {
                     this.flush();
                     gl.blendFunc(this.srcBlend, this.dstBlend);
                 }
@@ -4967,22 +5139,193 @@ var spine;
             };
             PolygonBatcher.prototype.end = function () {
                 var gl = this.gl;
-                if (!this.drawing)
+                if (!this.isDrawing)
                     throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
                 if (this.verticesLength > 0 || this.indicesLength > 0)
                     this.flush();
                 this.shader = null;
                 this.lastTexture = null;
-                this.drawing = false;
+                this.isDrawing = false;
                 gl.disable(gl.BLEND);
             };
             PolygonBatcher.prototype.getDrawCalls = function () { return this.drawCalls; };
+            PolygonBatcher.prototype.dispose = function () {
+                this.mesh.dispose();
+            };
             return PolygonBatcher;
         }());
         webgl.PolygonBatcher = PolygonBatcher;
     })(webgl = spine.webgl || (spine.webgl = {}));
 })(spine || (spine = {}));
 var spine;
+(function (spine) {
+    var webgl;
+    (function (webgl) {
+        var SceneRenderer = (function () {
+            function SceneRenderer(canvas, gl) {
+                this.activeRenderer = null;
+                this.QUAD = [
+                    0, 0, 1, 1, 1, 1, 0, 0,
+                    0, 0, 1, 1, 1, 1, 0, 0,
+                    0, 0, 1, 1, 1, 1, 0, 0,
+                    0, 0, 1, 1, 1, 1, 0, 0,
+                ];
+                this.QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
+                this.WHITE = new spine.Color(1, 1, 1, 1);
+                this.canvas = canvas;
+                this.gl = gl;
+                this.camera = new webgl.OrthoCamera(canvas.width, canvas.height);
+                this.batcherShader = webgl.Shader.newColoredTextured(gl);
+                this.batcher = new webgl.PolygonBatcher(gl);
+                this.shapesShader = webgl.Shader.newColored(gl);
+                this.shapes = new webgl.ShapeRenderer(gl);
+                this.skeletonRenderer = new webgl.SkeletonRenderer(gl);
+            }
+            SceneRenderer.prototype.begin = function () {
+                this.camera.update();
+                this.enableRenderer(this.batcher);
+            };
+            SceneRenderer.prototype.drawSkeleton = function (skeleton, premultipliedAlpha) {
+                if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
+                this.enableRenderer(this.batcher);
+                this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
+                this.skeletonRenderer.draw(this.batcher, skeleton);
+            };
+            SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
+                if (color === void 0) { color = null; }
+                this.enableRenderer(this.batcher);
+                if (color === null)
+                    color = this.WHITE;
+                var quad = this.QUAD;
+                quad[0] = x;
+                quad[1] = y;
+                quad[2] = color.r;
+                quad[3] = color.g;
+                quad[4] = color.b;
+                quad[5] = color.a;
+                quad[6] = 0;
+                quad[7] = 1;
+                quad[8] = x + width;
+                quad[9] = y;
+                quad[10] = color.r;
+                quad[11] = color.g;
+                quad[12] = color.b;
+                quad[13] = color.a;
+                quad[14] = 1;
+                quad[15] = 1;
+                quad[16] = x + width;
+                quad[17] = y + height;
+                quad[18] = color.r;
+                quad[19] = color.g;
+                quad[20] = color.b;
+                quad[21] = color.a;
+                quad[22] = 1;
+                quad[23] = 0;
+                quad[24] = x;
+                quad[25] = y + height;
+                quad[26] = color.r;
+                quad[27] = color.g;
+                quad[28] = color.b;
+                quad[29] = color.a;
+                quad[30] = 0;
+                quad[31] = 0;
+                this.batcher.draw(texture, quad, this.QUAD_TRIANGLES);
+            };
+            SceneRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
+                if (color === void 0) { color = null; }
+                if (color2 === void 0) { color2 = null; }
+                this.enableRenderer(this.shapes);
+                this.shapes.line(x, y, x2, y2, color);
+            };
+            SceneRenderer.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.enableRenderer(this.shapes);
+                this.shapes.triangle(filled, x, y, x2, y2, x3, y3, color, color2, color3);
+            };
+            SceneRenderer.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.enableRenderer(this.shapes);
+                this.shapes.quad(filled, x, y, x2, y2, x3, y3, x4, y4, color, color2, color3, color4);
+            };
+            SceneRenderer.prototype.rect = function (filled, x, y, width, height, color) {
+                if (color === void 0) { color = null; }
+                this.enableRenderer(this.shapes);
+                this.shapes.rect(filled, x, y, width, height, color);
+            };
+            SceneRenderer.prototype.rectLine = function (filled, x1, y1, x2, y2, width, color) {
+                if (color === void 0) { color = null; }
+                this.enableRenderer(this.shapes);
+                this.shapes.rectLine(filled, x1, y1, x2, y2, width, color);
+            };
+            SceneRenderer.prototype.polygon = function (polygonVertices, offset, count, color) {
+                if (color === void 0) { color = null; }
+                this.enableRenderer(this.shapes);
+                this.shapes.polygon(polygonVertices, offset, count, color);
+            };
+            SceneRenderer.prototype.circle = function (filled, x, y, radius, color, segments) {
+                if (color === void 0) { color = null; }
+                if (segments === void 0) { segments = 0; }
+                this.enableRenderer(this.shapes);
+                this.shapes.circle(filled, x, y, radius, color, segments);
+            };
+            SceneRenderer.prototype.curve = function (x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color) {
+                if (color === void 0) { color = null; }
+                this.enableRenderer(this.shapes);
+                this.shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color);
+            };
+            SceneRenderer.prototype.end = function () {
+                if (this.activeRenderer === this.batcher)
+                    this.batcher.end();
+                else if (this.activeRenderer === this.shapes)
+                    this.shapes.end();
+                this.activeRenderer = null;
+            };
+            SceneRenderer.prototype.resize = function () {
+                var canvas = this.canvas;
+                var w = canvas.clientWidth;
+                var h = canvas.clientHeight;
+                if (canvas.width != w || canvas.height != h) {
+                    canvas.width = w;
+                    canvas.height = h;
+                }
+                this.camera.setViewport(w, h);
+                this.camera.update();
+                this.gl.viewport(0, 0, canvas.width, canvas.height);
+            };
+            SceneRenderer.prototype.enableRenderer = function (renderer) {
+                if (this.activeRenderer === renderer)
+                    return;
+                this.end();
+                if (renderer instanceof webgl.PolygonBatcher) {
+                    this.batcherShader.bind();
+                    this.batcherShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
+                    this.batcher.begin(this.batcherShader);
+                    this.activeRenderer = this.batcher;
+                }
+                else {
+                    this.shapesShader.bind();
+                    this.shapesShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
+                    this.shapes.begin(this.shapesShader);
+                    this.activeRenderer = this.shapes;
+                }
+            };
+            SceneRenderer.prototype.dispose = function () {
+                this.batcher.dispose();
+                this.batcherShader.dispose();
+                this.shapes.dispose();
+                this.shapesShader.dispose();
+            };
+            return SceneRenderer;
+        }());
+        webgl.SceneRenderer = SceneRenderer;
+    })(webgl = spine.webgl || (spine.webgl = {}));
+})(spine || (spine = {}));
+var spine;
 (function (spine) {
     var webgl;
     (function (webgl) {
@@ -5136,6 +5479,8 @@ var spine;
                 this.color = new spine.Color(1, 1, 1, 1);
                 this.vertexIndex = 0;
                 this.tmp = new spine.Vector2();
+                this.srcBlend = WebGLRenderingContext.SRC_ALPHA;
+                this.dstBlend = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
                 if (maxVertices > 10920)
                     throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
                 this.gl = gl;
@@ -5147,6 +5492,18 @@ var spine;
                 this.shader = shader;
                 this.vertexIndex = 0;
                 this.isDrawing = true;
+                var gl = this.gl;
+                gl.enable(gl.BLEND);
+                gl.blendFunc(this.srcBlend, this.dstBlend);
+            };
+            ShapeRenderer.prototype.setBlendMode = function (srcBlend, dstBlend) {
+                var gl = this.gl;
+                this.srcBlend = srcBlend;
+                this.dstBlend = dstBlend;
+                if (this.isDrawing) {
+                    this.flush();
+                    gl.blendFunc(this.srcBlend, this.dstBlend);
+                }
             };
             ShapeRenderer.prototype.setColor = function (color) {
                 this.color.setFromColor(color);
@@ -5161,18 +5518,15 @@ var spine;
                     color = this.color;
                 this.vertex(x, y, color);
             };
-            ShapeRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
+            ShapeRenderer.prototype.line = function (x, y, x2, y2, color) {
                 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);
+                this.vertex(x2, y2, color);
             };
             ShapeRenderer.prototype.triangle = function (filled, x, y, x2, y2, x3, y3, color, color2, color3) {
                 if (color === void 0) { color = null; }
@@ -5304,8 +5658,9 @@ var spine;
                     this.vertex(x2, y2, color);
                 }
             };
-            ShapeRenderer.prototype.circle = function (filled, x, y, radius, segments, color) {
+            ShapeRenderer.prototype.circle = function (filled, x, y, radius, color, segments) {
                 if (color === void 0) { color = null; }
+                if (segments === void 0) { segments = 0; }
                 if (segments === 0)
                     segments = Math.max(1, (6 * spine.MathUtils.cbrt(radius)) | 0);
                 if (segments <= 0)
@@ -5406,6 +5761,7 @@ var spine;
                 this.mesh.setVerticesLength(this.vertexIndex);
                 this.mesh.draw(this.shader, this.shapeType);
                 this.vertexIndex = 0;
+                this.gl.disable(this.gl.BLEND);
             };
             ShapeRenderer.prototype.check = function (shapeType, numVertices) {
                 if (!this.isDrawing)
@@ -5591,8 +5947,7 @@ var spine;
                     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, SkeletonDebugRenderer.GREEN, 8);
-                        shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, 8);
                     }
                 }
                 shapes.end();
@@ -5661,11 +6016,23 @@ var spine;
     var webgl;
     (function (webgl) {
         var Vector3 = (function () {
-            function Vector3() {
+            function Vector3(x, y, z) {
+                if (x === void 0) { x = 0; }
+                if (y === void 0) { y = 0; }
+                if (z === void 0) { z = 0; }
                 this.x = 0;
                 this.y = 0;
                 this.z = 0;
+                this.x = x;
+                this.y = y;
+                this.z = z;
             }
+            Vector3.prototype.setFrom = function (v) {
+                this.x = v.x;
+                this.y = v.y;
+                this.z = v.z;
+                return this;
+            };
             Vector3.prototype.set = function (x, y, z) {
                 this.x = x;
                 this.y = y;

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

@@ -704,6 +704,11 @@ declare module spine {
         g: number;
         b: number;
         a: number;
+        static WHITE: Color;
+        static RED: Color;
+        static GREEN: Color;
+        static BLUE: Color;
+        static MAGENTA: Color;
         constructor(r?: number, g?: number, b?: number, a?: number);
         set(r: number, g: number, b: number, a: number): void;
         setFromColor(c: Color): void;
@@ -888,6 +893,27 @@ declare module spine.webgl {
         constructor(gl: WebGLRenderingContext);
     }
 }
+declare module spine.webgl {
+    class OrthoCamera {
+        position: Vector3;
+        direction: Vector3;
+        up: Vector3;
+        near: number;
+        far: number;
+        zoom: number;
+        viewportWidth: number;
+        viewportHeight: number;
+        projectionView: Matrix4;
+        inverseProjectionView: Matrix4;
+        projection: Matrix4;
+        view: Matrix4;
+        private tmp;
+        constructor(viewportWidth: number, viewportHeight: number);
+        update(): void;
+        unproject(screenCoords: Vector3): Vector3;
+        setViewport(viewportWidth: number, viewportHeight: number): void;
+    }
+}
 declare module spine.webgl {
     class GLTexture extends Texture implements Disposable {
         private gl;
@@ -902,6 +928,24 @@ declare module spine.webgl {
         dispose(): void;
     }
 }
+declare module spine.webgl {
+    class Input {
+        element: HTMLElement;
+        lastX: number;
+        lastY: number;
+        buttonDown: boolean;
+        private listeners;
+        constructor(element: HTMLElement);
+        private setupCallbacks(element);
+        addListener(listener: InputListener): void;
+        removeListener(listener: InputListener): void;
+    }
+    interface InputListener {
+        down(x: number, y: number): void;
+        up(x: number, y: number): void;
+        moved(x: number, y: number): void;
+    }
+}
 declare module spine.webgl {
     const M00: number;
     const M01: number;
@@ -922,6 +966,10 @@ declare module spine.webgl {
     class Matrix4 {
         temp: Float32Array;
         values: Float32Array;
+        private static xAxis;
+        private static yAxis;
+        private static zAxis;
+        private static tmpMatrix;
         constructor();
         set(values: ArrayLike<number>): Matrix4;
         transpose(): Matrix4;
@@ -935,6 +983,8 @@ declare module spine.webgl {
         ortho(left: number, right: number, bottom: number, top: number, near: number, far: number): Matrix4;
         multiply(matrix: Matrix4): Matrix4;
         multiplyLeft(matrix: Matrix4): Matrix4;
+        lookAt(position: Vector3, direction: Vector3, up: Vector3): this;
+        static initTemps(): void;
     }
 }
 declare module spine.webgl {
@@ -992,10 +1042,10 @@ declare module spine.webgl {
     }
 }
 declare module spine.webgl {
-    class PolygonBatcher {
+    class PolygonBatcher implements Disposable {
         private gl;
         private drawCalls;
-        private drawing;
+        private isDrawing;
         private mesh;
         private shader;
         private lastTexture;
@@ -1010,6 +1060,39 @@ declare module spine.webgl {
         private flush();
         end(): void;
         getDrawCalls(): number;
+        dispose(): void;
+    }
+}
+declare module spine.webgl {
+    class SceneRenderer implements Disposable {
+        gl: WebGLRenderingContext;
+        canvas: HTMLCanvasElement;
+        camera: OrthoCamera;
+        private batcherShader;
+        private batcher;
+        private shapes;
+        private shapesShader;
+        private activeRenderer;
+        private skeletonRenderer;
+        private QUAD;
+        private QUAD_TRIANGLES;
+        private WHITE;
+        constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext);
+        begin(): void;
+        drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
+        drawTexture(texture: GLTexture, x: number, y: number, width: number, height: 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;
+        polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color?: Color): void;
+        circle(filled: boolean, x: number, y: number, radius: number, color?: Color, segments?: number): void;
+        curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
+        end(): void;
+        resize(): void;
+        private enableRenderer(renderer);
+        dispose(): void;
     }
 }
 declare module spine.webgl {
@@ -1062,19 +1145,22 @@ declare module spine.webgl {
         private shader;
         private vertexIndex;
         private tmp;
+        private srcBlend;
+        private dstBlend;
         constructor(gl: WebGLRenderingContext, maxVertices?: number);
         begin(shader: Shader): void;
+        setBlendMode(srcBlend: number, dstBlend: number): 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;
+        line(x: number, y: number, x2: number, y2: number, color?: 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;
+        circle(filled: boolean, x: number, y: number, radius: number, color?: Color, segments?: number): 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;
@@ -1129,6 +1215,8 @@ declare module spine.webgl {
         x: number;
         y: number;
         z: number;
+        constructor(x?: number, y?: number, z?: number);
+        setFrom(v: Vector3): Vector3;
         set(x: number, y: number, z: number): Vector3;
         add(v: Vector3): Vector3;
         sub(v: Vector3): Vector3;

spine-ts/build/spine-widget.js

@@ -3836,6 +3836,11 @@ var spine;
                 this.a = 1;
             return this;
         };
+        Color.WHITE = new Color(1, 1, 1, 1);
+        Color.RED = new Color(1, 0, 0, 1);
+        Color.GREEN = new Color(0, 1, 0, 1);
+        Color.BLUE = new Color(0, 0, 1, 1);
+        Color.MAGENTA = new Color(1, 0, 1, 1);
         return Color;
     }());
     spine.Color = Color;
@@ -4403,7 +4408,9 @@ var spine;
         var AssetManager = (function (_super) {
             __extends(AssetManager, _super);
             function AssetManager(gl) {
-                _super.call(this, function (image) { return new spine.webgl.GLTexture(gl, image); });
+                _super.call(this, function (image) {
+                    return new spine.webgl.GLTexture(gl, image);
+                });
             }
             return AssetManager;
         }(spine.AssetManager));
@@ -4411,6 +4418,60 @@ var spine;
     })(webgl = spine.webgl || (spine.webgl = {}));
 })(spine || (spine = {}));
 var spine;
+(function (spine) {
+    var webgl;
+    (function (webgl) {
+        var OrthoCamera = (function () {
+            function OrthoCamera(viewportWidth, viewportHeight) {
+                this.position = new webgl.Vector3(0, 0, 0);
+                this.direction = new webgl.Vector3(0, 0, -1);
+                this.up = new webgl.Vector3(0, 1, 0);
+                this.near = 0;
+                this.far = 100;
+                this.zoom = 1;
+                this.viewportWidth = 0;
+                this.viewportHeight = 0;
+                this.projectionView = new webgl.Matrix4();
+                this.inverseProjectionView = new webgl.Matrix4();
+                this.projection = new webgl.Matrix4();
+                this.view = new webgl.Matrix4();
+                this.tmp = new webgl.Vector3();
+                this.viewportWidth = viewportWidth;
+                this.viewportHeight = viewportHeight;
+                this.update();
+            }
+            OrthoCamera.prototype.update = function () {
+                var projection = this.projection;
+                var view = this.view;
+                var projectionView = this.projectionView;
+                var inverseProjectionView = this.inverseProjectionView;
+                var zoom = this.zoom, viewportWidth = this.viewportWidth, viewportHeight = this.viewportHeight;
+                projection.ortho(zoom * (-viewportWidth / 2), zoom * (viewportWidth / 2), zoom * (-viewportHeight / 2), zoom * (viewportHeight / 2), this.near, this.far);
+                view.lookAt(this.position, this.direction, this.up);
+                projectionView.set(projection.values);
+                projectionView.multiply(view);
+                inverseProjectionView.set(projectionView.values).invert();
+            };
+            OrthoCamera.prototype.unproject = function (screenCoords) {
+                var x = screenCoords.x, y = this.viewportHeight - screenCoords.y - 1;
+                var tmp = this.tmp;
+                tmp.x = (2 * x) / this.viewportWidth - 1;
+                tmp.y = (2 * y) / this.viewportHeight - 1;
+                tmp.z = (2 * screenCoords.z) - 1;
+                tmp.project(this.inverseProjectionView);
+                screenCoords.set(tmp.x, tmp.y, tmp.z);
+                return screenCoords;
+            };
+            OrthoCamera.prototype.setViewport = function (viewportWidth, viewportHeight) {
+                this.viewportWidth = viewportWidth;
+                this.viewportHeight = viewportHeight;
+            };
+            return OrthoCamera;
+        }());
+        webgl.OrthoCamera = OrthoCamera;
+    })(webgl = spine.webgl || (spine.webgl = {}));
+})(spine || (spine = {}));
+var spine;
 (function (spine) {
     var webgl;
     (function (webgl) {
@@ -4469,6 +4530,80 @@ var spine;
     })(webgl = spine.webgl || (spine.webgl = {}));
 })(spine || (spine = {}));
 var spine;
+(function (spine) {
+    var webgl;
+    (function (webgl) {
+        var Input = (function () {
+            function Input(element) {
+                this.lastX = 0;
+                this.lastY = 0;
+                this.buttonDown = false;
+                this.listeners = new Array();
+                this.element = element;
+                this.setupCallbacks(element);
+            }
+            Input.prototype.setupCallbacks = function (element) {
+                var _this = this;
+                element.addEventListener("mousedown", function (ev) {
+                    if (ev instanceof MouseEvent) {
+                        var rect = element.getBoundingClientRect();
+                        var x = ev.clientX - rect.left;
+                        var y = ev.clientY - rect.top;
+                        var listeners = _this.listeners;
+                        for (var i = 0; i < listeners.length; i++) {
+                            listeners[i].down(x, y);
+                        }
+                        _this.lastX = x;
+                        _this.lastY = y;
+                        _this.buttonDown = true;
+                    }
+                }, true);
+                element.addEventListener("mousemove", function (ev) {
+                    if (ev instanceof MouseEvent) {
+                        var rect = element.getBoundingClientRect();
+                        var x = ev.clientX - rect.left;
+                        var y = ev.clientY - rect.top;
+                        var listeners = _this.listeners;
+                        for (var i = 0; i < listeners.length; i++) {
+                            listeners[i].moved(x, y);
+                        }
+                        _this.lastX = x;
+                        _this.lastY = y;
+                        _this.buttonDown = true;
+                    }
+                }, true);
+                element.addEventListener("mouseup", function (ev) {
+                    if (ev instanceof MouseEvent) {
+                        var rect = element.getBoundingClientRect();
+                        var x = ev.clientX - rect.left;
+                        var y = ev.clientY - rect.top;
+                        var listeners = _this.listeners;
+                        for (var i = 0; i < listeners.length; i++) {
+                            listeners[i].up(x, y);
+                        }
+                        _this.lastX = x;
+                        _this.lastY = y;
+                        _this.buttonDown = true;
+                    }
+                }, true);
+                element.addEventListener(navigator.userAgent.toLowerCase().indexOf('firefox') != -1 ? "DOMMouseScroll" : "mousewheel", function (ev) {
+                }, true);
+            };
+            Input.prototype.addListener = function (listener) {
+                this.listeners.push(listener);
+            };
+            Input.prototype.removeListener = function (listener) {
+                var idx = this.listeners.indexOf(listener);
+                if (idx > -1) {
+                    this.listeners.splice(idx, 1);
+                }
+            };
+            return Input;
+        }());
+        webgl.Input = Input;
+    })(webgl = spine.webgl || (spine.webgl = {}));
+})(spine || (spine = {}));
+var spine;
 (function (spine) {
     var webgl;
     (function (webgl) {
@@ -4726,6 +4861,43 @@ var spine;
                 t[webgl.M33] = m[webgl.M30] * v[webgl.M03] + m[webgl.M31] * v[webgl.M13] + m[webgl.M32] * v[webgl.M23] + m[webgl.M33] * v[webgl.M33];
                 return this.set(this.temp);
             };
+            Matrix4.prototype.lookAt = function (position, direction, up) {
+                Matrix4.initTemps();
+                var xAxis = Matrix4.xAxis, yAxis = Matrix4.yAxis, zAxis = Matrix4.zAxis;
+                zAxis.setFrom(direction).normalize();
+                xAxis.setFrom(direction).normalize();
+                xAxis.cross(up).normalize();
+                yAxis.setFrom(xAxis).cross(zAxis).normalize();
+                this.identity();
+                var val = this.values;
+                val[webgl.M00] = xAxis.x;
+                val[webgl.M01] = xAxis.y;
+                val[webgl.M02] = xAxis.z;
+                val[webgl.M10] = yAxis.x;
+                val[webgl.M11] = yAxis.y;
+                val[webgl.M12] = yAxis.z;
+                val[webgl.M20] = -zAxis.x;
+                val[webgl.M21] = -zAxis.y;
+                val[webgl.M22] = -zAxis.z;
+                Matrix4.tmpMatrix.identity();
+                Matrix4.tmpMatrix.values[webgl.M03] = -position.x;
+                Matrix4.tmpMatrix.values[webgl.M13] = -position.y;
+                Matrix4.tmpMatrix.values[webgl.M23] = -position.z;
+                this.multiply(Matrix4.tmpMatrix);
+                return this;
+            };
+            Matrix4.initTemps = function () {
+                if (Matrix4.xAxis === null)
+                    Matrix4.xAxis = new webgl.Vector3();
+                if (Matrix4.yAxis === null)
+                    Matrix4.yAxis = new webgl.Vector3();
+                if (Matrix4.zAxis === null)
+                    Matrix4.zAxis = new webgl.Vector3();
+            };
+            Matrix4.xAxis = null;
+            Matrix4.yAxis = null;
+            Matrix4.zAxis = null;
+            Matrix4.tmpMatrix = new Matrix4();
             return Matrix4;
         }());
         webgl.Matrix4 = Matrix4;
@@ -4902,7 +5074,7 @@ var spine;
         var PolygonBatcher = (function () {
             function PolygonBatcher(gl, maxVertices) {
                 if (maxVertices === void 0) { maxVertices = 10920; }
-                this.drawing = false;
+                this.isDrawing = false;
                 this.shader = null;
                 this.lastTexture = null;
                 this.verticesLength = 0;
@@ -4916,12 +5088,12 @@ var spine;
             }
             PolygonBatcher.prototype.begin = function (shader) {
                 var gl = this.gl;
-                if (this.drawing)
+                if (this.isDrawing)
                     throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
                 this.drawCalls = 0;
                 this.shader = shader;
                 this.lastTexture = null;
-                this.drawing = true;
+                this.isDrawing = true;
                 gl.enable(gl.BLEND);
                 gl.blendFunc(this.srcBlend, this.dstBlend);
             };
@@ -4929,7 +5101,7 @@ var spine;
                 var gl = this.gl;
                 this.srcBlend = srcBlend;
                 this.dstBlend = dstBlend;
-                if (this.drawing) {
+                if (this.isDrawing) {
                     this.flush();
                     gl.blendFunc(this.srcBlend, this.dstBlend);
                 }
@@ -4967,22 +5139,193 @@ var spine;
             };
             PolygonBatcher.prototype.end = function () {
                 var gl = this.gl;
-                if (!this.drawing)
+                if (!this.isDrawing)
                     throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
                 if (this.verticesLength > 0 || this.indicesLength > 0)
                     this.flush();
                 this.shader = null;
                 this.lastTexture = null;
-                this.drawing = false;
+                this.isDrawing = false;
                 gl.disable(gl.BLEND);
             };
             PolygonBatcher.prototype.getDrawCalls = function () { return this.drawCalls; };
+            PolygonBatcher.prototype.dispose = function () {
+                this.mesh.dispose();
+            };
             return PolygonBatcher;
         }());
         webgl.PolygonBatcher = PolygonBatcher;
     })(webgl = spine.webgl || (spine.webgl = {}));
 })(spine || (spine = {}));
 var spine;
+(function (spine) {
+    var webgl;
+    (function (webgl) {
+        var SceneRenderer = (function () {
+            function SceneRenderer(canvas, gl) {
+                this.activeRenderer = null;
+                this.QUAD = [
+                    0, 0, 1, 1, 1, 1, 0, 0,
+                    0, 0, 1, 1, 1, 1, 0, 0,
+                    0, 0, 1, 1, 1, 1, 0, 0,
+                    0, 0, 1, 1, 1, 1, 0, 0,
+                ];
+                this.QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
+                this.WHITE = new spine.Color(1, 1, 1, 1);
+                this.canvas = canvas;
+                this.gl = gl;
+                this.camera = new webgl.OrthoCamera(canvas.width, canvas.height);
+                this.batcherShader = webgl.Shader.newColoredTextured(gl);
+                this.batcher = new webgl.PolygonBatcher(gl);
+                this.shapesShader = webgl.Shader.newColored(gl);
+                this.shapes = new webgl.ShapeRenderer(gl);
+                this.skeletonRenderer = new webgl.SkeletonRenderer(gl);
+            }
+            SceneRenderer.prototype.begin = function () {
+                this.camera.update();
+                this.enableRenderer(this.batcher);
+            };
+            SceneRenderer.prototype.drawSkeleton = function (skeleton, premultipliedAlpha) {
+                if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
+                this.enableRenderer(this.batcher);
+                this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
+                this.skeletonRenderer.draw(this.batcher, skeleton);
+            };
+            SceneRenderer.prototype.drawTexture = function (texture, x, y, width, height, color) {
+                if (color === void 0) { color = null; }
+                this.enableRenderer(this.batcher);
+                if (color === null)
+                    color = this.WHITE;
+                var quad = this.QUAD;
+                quad[0] = x;
+                quad[1] = y;
+                quad[2] = color.r;
+                quad[3] = color.g;
+                quad[4] = color.b;
+                quad[5] = color.a;
+                quad[6] = 0;
+                quad[7] = 1;
+                quad[8] = x + width;
+                quad[9] = y;
+                quad[10] = color.r;
+                quad[11] = color.g;
+                quad[12] = color.b;
+                quad[13] = color.a;
+                quad[14] = 1;
+                quad[15] = 1;
+                quad[16] = x + width;
+                quad[17] = y + height;
+                quad[18] = color.r;
+                quad[19] = color.g;
+                quad[20] = color.b;
+                quad[21] = color.a;
+                quad[22] = 1;
+                quad[23] = 0;
+                quad[24] = x;
+                quad[25] = y + height;
+                quad[26] = color.r;
+                quad[27] = color.g;
+                quad[28] = color.b;
+                quad[29] = color.a;
+                quad[30] = 0;
+                quad[31] = 0;
+                this.batcher.draw(texture, quad, this.QUAD_TRIANGLES);
+            };
+            SceneRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
+                if (color === void 0) { color = null; }
+                if (color2 === void 0) { color2 = null; }
+                this.enableRenderer(this.shapes);
+                this.shapes.line(x, y, x2, y2, color);
+            };
+            SceneRenderer.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.enableRenderer(this.shapes);
+                this.shapes.triangle(filled, x, y, x2, y2, x3, y3, color, color2, color3);
+            };
+            SceneRenderer.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.enableRenderer(this.shapes);
+                this.shapes.quad(filled, x, y, x2, y2, x3, y3, x4, y4, color, color2, color3, color4);
+            };
+            SceneRenderer.prototype.rect = function (filled, x, y, width, height, color) {
+                if (color === void 0) { color = null; }
+                this.enableRenderer(this.shapes);
+                this.shapes.rect(filled, x, y, width, height, color);
+            };
+            SceneRenderer.prototype.rectLine = function (filled, x1, y1, x2, y2, width, color) {
+                if (color === void 0) { color = null; }
+                this.enableRenderer(this.shapes);
+                this.shapes.rectLine(filled, x1, y1, x2, y2, width, color);
+            };
+            SceneRenderer.prototype.polygon = function (polygonVertices, offset, count, color) {
+                if (color === void 0) { color = null; }
+                this.enableRenderer(this.shapes);
+                this.shapes.polygon(polygonVertices, offset, count, color);
+            };
+            SceneRenderer.prototype.circle = function (filled, x, y, radius, color, segments) {
+                if (color === void 0) { color = null; }
+                if (segments === void 0) { segments = 0; }
+                this.enableRenderer(this.shapes);
+                this.shapes.circle(filled, x, y, radius, color, segments);
+            };
+            SceneRenderer.prototype.curve = function (x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color) {
+                if (color === void 0) { color = null; }
+                this.enableRenderer(this.shapes);
+                this.shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color);
+            };
+            SceneRenderer.prototype.end = function () {
+                if (this.activeRenderer === this.batcher)
+                    this.batcher.end();
+                else if (this.activeRenderer === this.shapes)
+                    this.shapes.end();
+                this.activeRenderer = null;
+            };
+            SceneRenderer.prototype.resize = function () {
+                var canvas = this.canvas;
+                var w = canvas.clientWidth;
+                var h = canvas.clientHeight;
+                if (canvas.width != w || canvas.height != h) {
+                    canvas.width = w;
+                    canvas.height = h;
+                }
+                this.camera.setViewport(w, h);
+                this.camera.update();
+                this.gl.viewport(0, 0, canvas.width, canvas.height);
+            };
+            SceneRenderer.prototype.enableRenderer = function (renderer) {
+                if (this.activeRenderer === renderer)
+                    return;
+                this.end();
+                if (renderer instanceof webgl.PolygonBatcher) {
+                    this.batcherShader.bind();
+                    this.batcherShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
+                    this.batcher.begin(this.batcherShader);
+                    this.activeRenderer = this.batcher;
+                }
+                else {
+                    this.shapesShader.bind();
+                    this.shapesShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
+                    this.shapes.begin(this.shapesShader);
+                    this.activeRenderer = this.shapes;
+                }
+            };
+            SceneRenderer.prototype.dispose = function () {
+                this.batcher.dispose();
+                this.batcherShader.dispose();
+                this.shapes.dispose();
+                this.shapesShader.dispose();
+            };
+            return SceneRenderer;
+        }());
+        webgl.SceneRenderer = SceneRenderer;
+    })(webgl = spine.webgl || (spine.webgl = {}));
+})(spine || (spine = {}));
+var spine;
 (function (spine) {
     var webgl;
     (function (webgl) {
@@ -5136,6 +5479,8 @@ var spine;
                 this.color = new spine.Color(1, 1, 1, 1);
                 this.vertexIndex = 0;
                 this.tmp = new spine.Vector2();
+                this.srcBlend = WebGLRenderingContext.SRC_ALPHA;
+                this.dstBlend = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
                 if (maxVertices > 10920)
                     throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
                 this.gl = gl;
@@ -5147,6 +5492,18 @@ var spine;
                 this.shader = shader;
                 this.vertexIndex = 0;
                 this.isDrawing = true;
+                var gl = this.gl;
+                gl.enable(gl.BLEND);
+                gl.blendFunc(this.srcBlend, this.dstBlend);
+            };
+            ShapeRenderer.prototype.setBlendMode = function (srcBlend, dstBlend) {
+                var gl = this.gl;
+                this.srcBlend = srcBlend;
+                this.dstBlend = dstBlend;
+                if (this.isDrawing) {
+                    this.flush();
+                    gl.blendFunc(this.srcBlend, this.dstBlend);
+                }
             };
             ShapeRenderer.prototype.setColor = function (color) {
                 this.color.setFromColor(color);
@@ -5161,18 +5518,15 @@ var spine;
                     color = this.color;
                 this.vertex(x, y, color);
             };
-            ShapeRenderer.prototype.line = function (x, y, x2, y2, color, color2) {
+            ShapeRenderer.prototype.line = function (x, y, x2, y2, color) {
                 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);
+                this.vertex(x2, y2, color);
             };
             ShapeRenderer.prototype.triangle = function (filled, x, y, x2, y2, x3, y3, color, color2, color3) {
                 if (color === void 0) { color = null; }
@@ -5304,8 +5658,9 @@ var spine;
                     this.vertex(x2, y2, color);
                 }
             };
-            ShapeRenderer.prototype.circle = function (filled, x, y, radius, segments, color) {
+            ShapeRenderer.prototype.circle = function (filled, x, y, radius, color, segments) {
                 if (color === void 0) { color = null; }
+                if (segments === void 0) { segments = 0; }
                 if (segments === 0)
                     segments = Math.max(1, (6 * spine.MathUtils.cbrt(radius)) | 0);
                 if (segments <= 0)
@@ -5406,6 +5761,7 @@ var spine;
                 this.mesh.setVerticesLength(this.vertexIndex);
                 this.mesh.draw(this.shader, this.shapeType);
                 this.vertexIndex = 0;
+                this.gl.disable(this.gl.BLEND);
             };
             ShapeRenderer.prototype.check = function (shapeType, numVertices) {
                 if (!this.isDrawing)
@@ -5591,8 +5947,7 @@ var spine;
                     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, SkeletonDebugRenderer.GREEN, 8);
-                        shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, 8);
                     }
                 }
                 shapes.end();
@@ -5661,11 +6016,23 @@ var spine;
     var webgl;
     (function (webgl) {
         var Vector3 = (function () {
-            function Vector3() {
+            function Vector3(x, y, z) {
+                if (x === void 0) { x = 0; }
+                if (y === void 0) { y = 0; }
+                if (z === void 0) { z = 0; }
                 this.x = 0;
                 this.y = 0;
                 this.z = 0;
+                this.x = x;
+                this.y = y;
+                this.z = z;
             }
+            Vector3.prototype.setFrom = function (v) {
+                this.x = v.x;
+                this.y = v.y;
+                this.z = v.z;
+                return this;
+            };
             Vector3.prototype.set = function (x, y, z) {
                 this.x = x;
                 this.y = y;

spine-ts/core/src/Utils.ts

@@ -39,6 +39,12 @@ module spine {
 	}
 
 	export class Color {
+		public static WHITE = new Color(1, 1, 1, 1);
+		public static RED = new Color(1, 0, 0, 1);
+		public static GREEN = new Color(0, 1, 0, 1);
+		public static BLUE = new Color(0, 0, 1, 1);
+		public static MAGENTA = new Color(1, 0, 1, 1);
+
 		constructor (public r: number = 0, public g: number = 0, public b: number = 0, public a: number = 0) {
 		}
 

spine-ts/webgl/example/test.html

@@ -8,55 +8,100 @@
 </style>
 <body>
 <canvas id="canvas"></canvas>
+<center><div id="info" style="color: #fff; position: fixed; top: 0; width: 100%"></div></center>
 <script>
 
-var canvas, gl, shader, renderer, mvp, lastFrameTime = Date.now() / 1000;
+var info, canvas;
+var gl, renderer, input, assetManager;
+var skeleton;
+var coords = new spine.webgl.Vector3();
+var temp = new spine.webgl.Vector3();
+var temp2 = new spine.Vector2();
+var lastFrameTime = Date.now() / 1000;
+var target = null;
+var boneName = "hip";
 
-function init() {
+function init () {
+	info = document.getElementById("info");
 	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.SceneRenderer(canvas, gl);
-	renderer = new spine.webgl.ShapeRenderer(gl);
+	assetManager = new spine.webgl.AssetManager(gl);
-	mvp = new spine.webgl.Matrix4();
+	input = new spine.webgl.Input(canvas);
-
+	input.addListener({
-	requestAnimationFrame(render);
+		down: function(x, y) {
+			renderer.camera.unproject(coords.set(x, y, 0));
+			var bone = skeleton.findBone(boneName);
+			temp.set(bone.worldX, bone.worldY, 0);
+			console.log(temp.x + ", " + temp.y + "; " + coords.x + ", " + coords.y);
+			if (temp.distance(coords) < 20) {
+				target = bone;
+			}			
+		},
+		up: function(x, y) {
+			target = null;
+		},
+		moved: function(x, y) {
+			if (target != null) {
+				renderer.camera.unproject(coords.set(x, y, 0));
+				/*target.worldToLocal(temp2.set(coords.x, coords.y));
+				target.x = temp2.x;
+				target.y = temp2.y;
+				console.log(temp2.x + ", " + temp2.y + "; " + coords.x + ", " + coords.y);
+				skeleton.updateWorldTransform();*/
+				skeleton.x = coords.x;
+				skeleton.y = coords.y;
+			}
+		}
+	})
+	assetManager.loadTexture("assets/spineboy.png");
+	assetManager.loadText("assets/spineboy.json");
+	assetManager.loadText("assets/spineboy.atlas");
+	requestAnimationFrame(loading);
 }
 
-function render() {
+function loading () {
+	if (assetManager.isLoadingComplete()) {
+		var atlas = new spine.TextureAtlas(assetManager.get("assets/spineboy.atlas"), function(path) {
+			return assetManager.get("assets/" + path);		
+		});
+		var atlasLoader = new spine.TextureAtlasAttachmentLoader(atlas);
+		var skeletonJson = new spine.SkeletonJson(atlasLoader);
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.get("assets/spineboy.json"));
+		skeleton = new spine.Skeleton(skeletonData);
+		skeleton.setToSetupPose();
+		skeleton.updateWorldTransform();	
+		requestAnimationFrame(render);
+	} else requestAnimationFrame(loading);
+}
+
+function render () {
 	var now = Date.now() / 1000;
 	var delta = now - lastFrameTime;
 	lastFrameTime = now;
 
-	resize();
+	renderer.resize();
 	gl.clearColor(0.2, 0.2, 0.2, 1);
 	gl.clear(gl.COLOR_BUFFER_BIT);
 
-	shader.bind();
+	renderer.begin();
-	shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
+	renderer.line(-canvas.width, 0, canvas.width, 0, spine.Color.RED);	
-
+	renderer.triangle(true, 100, 100, 200, 100, 150, 200, spine.Color.RED, spine.Color.GREEN, spine.Color.BLUE);
-	renderer.begin(shader);
+	renderer.drawTexture(assetManager.get("assets/spineboy.png"), -200, 100, 200, 200);		
-	renderer.setColorWith(1, 0, 0, 1);
+	renderer.line(0, -canvas.height, 0, canvas.height, spine.Color.GREEN);
-	// renderer.line(0, 0, canvas.width, canvas.height);
+	renderer.rect(false, -200, 100, 200, 200, spine.Color.BLUE);
-	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.line(0, 0, 400, 400, spine.Color.BLUE);
+	skeleton.updateWorldTransform();
+	renderer.drawSkeleton(skeleton);
+	var bone = skeleton.findBone(boneName);
+	renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, spine.Color.MAGENTA);
 	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();
 })();

spine-ts/webgl/src/AssetManager.ts

@@ -32,7 +32,9 @@
 module spine.webgl {
 	export class AssetManager extends spine.AssetManager {
 		constructor (gl: WebGLRenderingContext) {
-			super((image: HTMLImageElement) => { return new spine.webgl.GLTexture(gl, image); });
+			super((image: HTMLImageElement) => { 
+				return new spine.webgl.GLTexture(gl, image); 
+			});
 		}
 	}
 }

spine-ts/webgl/src/Camera.ts

@@ -0,0 +1,86 @@
+/******************************************************************************
+ * 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 OrthoCamera {
+		position = new Vector3(0, 0, 0);
+		direction = new Vector3(0, 0, -1);
+		up = new Vector3(0, 1, 0);
+		near = 0;
+		far = 100;
+		zoom = 1;
+		viewportWidth = 0;
+		viewportHeight = 0;		
+		projectionView = new Matrix4();
+		inverseProjectionView = new Matrix4();
+		projection = new Matrix4();
+		view = new Matrix4();		
+
+		private tmp = new Vector3();
+
+		constructor (viewportWidth: number, viewportHeight: number) {
+			this.viewportWidth = viewportWidth;
+			this.viewportHeight = viewportHeight;
+			this.update();
+		}
+
+		update () {
+			let projection = this.projection;
+			let view = this.view;
+			let projectionView = this.projectionView;
+			let inverseProjectionView = this.inverseProjectionView;
+			let zoom = this.zoom, viewportWidth = this.viewportWidth, viewportHeight = this.viewportHeight;			
+			projection.ortho(zoom * (-viewportWidth / 2), zoom * (viewportWidth / 2),
+							 zoom * (-viewportHeight / 2), zoom * (viewportHeight / 2),
+							 this.near, this.far);						
+			view.lookAt(this.position, this.direction, this.up);
+			projectionView.set(projection.values);
+			projectionView.multiply(view);
+			inverseProjectionView.set(projectionView.values).invert();			
+		}
+
+		unproject (screenCoords: Vector3) {
+			let x = screenCoords.x, y = this.viewportHeight - screenCoords.y - 1;			
+			let tmp = this.tmp;			
+			tmp.x = (2 * x) / this.viewportWidth - 1;
+			tmp.y = (2 * y) / this.viewportHeight - 1;
+			tmp.z = (2 * screenCoords.z) - 1;			
+			tmp.project(this.inverseProjectionView);
+			screenCoords.set(tmp.x, tmp.y, tmp.z);
+			return screenCoords;
+		}
+
+		setViewport(viewportWidth: number, viewportHeight: number) {
+			this.viewportWidth = viewportWidth;
+			this.viewportHeight = viewportHeight;
+		}
+	}
+}

spine-ts/webgl/src/Input.ts

@@ -0,0 +1,116 @@
+/******************************************************************************
+ * 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 Input {
+		element: HTMLElement;
+		lastX = 0;
+		lastY = 0;
+		buttonDown = false;	
+
+		private listeners = new Array<InputListener>();
+		constructor (element: HTMLElement) {
+			this.element = element;
+			this.setupCallbacks(element);
+		}
+
+		private setupCallbacks(element: HTMLElement) {
+			element.addEventListener("mousedown", (ev: UIEvent) => {
+				if (ev instanceof MouseEvent) {
+					let rect = element.getBoundingClientRect();
+					let x = ev.clientX - rect.left;
+					let y = ev.clientY - rect.top;					
+
+					let listeners = this.listeners;
+					for (let i = 0; i < listeners.length; i++) {
+						listeners[i].down(x, y);
+					}
+
+					this.lastX = x;
+					this.lastY = y;
+					this.buttonDown = true;
+				}
+			}, true);
+			element.addEventListener("mousemove", (ev: UIEvent) => {
+				if (ev instanceof MouseEvent) {
+					let rect = element.getBoundingClientRect();
+					let x = ev.clientX - rect.left;
+					let y = ev.clientY - rect.top;					
+
+					let listeners = this.listeners;
+					for (let i = 0; i < listeners.length; i++) {
+						listeners[i].moved(x, y);
+					}
+
+					this.lastX = x;
+					this.lastY = y;
+					this.buttonDown = true;
+				}
+			}, true);
+			element.addEventListener("mouseup", (ev: UIEvent) => {
+				if (ev instanceof MouseEvent) {
+					let rect = element.getBoundingClientRect();
+					let x = ev.clientX - rect.left;
+					let y = ev.clientY - rect.top;					
+
+					let listeners = this.listeners;
+					for (let i = 0; i < listeners.length; i++) {
+						listeners[i].up(x, y);
+					}
+
+					this.lastX = x;
+					this.lastY = y;
+					this.buttonDown = true;
+				}
+			}, true);
+			element.addEventListener(navigator.userAgent.toLowerCase().indexOf('firefox') != -1 ? "DOMMouseScroll" : "mousewheel", (ev: UIEvent) => {
+
+			}, true);
+		}
+
+		addListener(listener: InputListener) {
+			this.listeners.push(listener);
+		}
+
+		removeListener(listener: InputListener) {
+			let idx = this.listeners.indexOf(listener);
+			if (idx > -1) {
+				this.listeners.splice(idx, 1);
+			}
+		}
+	}
+
+	export interface InputListener {
+		down(x: number, y: number): void;
+		up(x: number, y: number): void;
+		moved(x: number, y: number): void;		
+	}
+}

spine-ts/webgl/src/Matrix4.ts

@@ -51,6 +51,11 @@ module spine.webgl {
 		temp: Float32Array = new Float32Array(16);
 		values: Float32Array = new Float32Array(16);
 				
+		private static xAxis: Vector3 = null;
+		private static yAxis: Vector3 = null;
+		private static zAxis: Vector3 = null;
+		private static tmpMatrix = new Matrix4();
+
 		constructor () {
 			let v = this.values;
 			v[M00] = 1;
@@ -299,5 +304,39 @@ module spine.webgl {
 			t[M33] = m[M30] * v[M03] + m[M31] * v[M13] + m[M32] * v[M23] + m[M33] * v[M33];
 			return this.set(this.temp);
 		}
+
+		lookAt (position: Vector3, direction: Vector3, up: Vector3) {
+			Matrix4.initTemps();
+			let xAxis = Matrix4.xAxis, yAxis = Matrix4.yAxis, zAxis = Matrix4.zAxis;
+			zAxis.setFrom(direction).normalize();
+			xAxis.setFrom(direction).normalize();
+			xAxis.cross(up).normalize();
+			yAxis.setFrom(xAxis).cross(zAxis).normalize();
+			this.identity();
+			let val = this.values;
+			val[M00] = xAxis.x;
+			val[M01] = xAxis.y;
+			val[M02] = xAxis.z;
+			val[M10] = yAxis.x;
+			val[M11] = yAxis.y;
+			val[M12] = yAxis.z;
+			val[M20] = -zAxis.x;
+			val[M21] = -zAxis.y;
+			val[M22] = -zAxis.z;
+
+			Matrix4.tmpMatrix.identity();
+			Matrix4.tmpMatrix.values[M03] = -position.x;
+			Matrix4.tmpMatrix.values[M13] = -position.y;
+			Matrix4.tmpMatrix.values[M23] = -position.z;
+			this.multiply(Matrix4.tmpMatrix)
+
+			return this;
+		}
+
+		static initTemps() {
+			if (Matrix4.xAxis === null) Matrix4.xAxis = new Vector3();
+			if (Matrix4.yAxis === null) Matrix4.yAxis = new Vector3();
+			if (Matrix4.zAxis === null) Matrix4.zAxis = new Vector3();
+		}
 	}
 }

spine-ts/webgl/src/PolygonBatcher.ts

@@ -30,10 +30,10 @@
  *****************************************************************************/
 
 module spine.webgl {
-	export class PolygonBatcher {
+	export class PolygonBatcher implements Disposable {
 		private gl: WebGLRenderingContext;
 		private drawCalls: number;
-		private drawing = false;
+		private isDrawing = false;
 		private mesh: Mesh;
 		private shader: Shader = null;		
 		private lastTexture: GLTexture = null;
@@ -50,11 +50,11 @@ module spine.webgl {
 
 		begin (shader: Shader) {			
 			let gl = this.gl;
-			if (this.drawing) throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
+			if (this.isDrawing) throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
 			this.drawCalls = 0;
 			this.shader = shader;
 			this.lastTexture = null;
-			this.drawing = true;
+			this.isDrawing = true;
 
 			gl.enable(gl.BLEND);
 			gl.blendFunc(this.srcBlend, this.dstBlend);
@@ -64,7 +64,7 @@ module spine.webgl {
 			let gl = this.gl;
 			this.srcBlend = srcBlend;
 			this.dstBlend = dstBlend;
-			if (this.drawing) {
+			if (this.isDrawing) {
 				this.flush();
 				gl.blendFunc(this.srcBlend, this.dstBlend);
 			}
@@ -107,15 +107,19 @@ module spine.webgl {
 
 		end () {
 			let gl = this.gl;
-			if (!this.drawing) throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
+			if (!this.isDrawing) throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
 			if (this.verticesLength > 0 || this.indicesLength > 0) this.flush();
 			this.shader = null;
 			this.lastTexture = null;
-			this.drawing = false;
+			this.isDrawing = false;
 
 			gl.disable(gl.BLEND);
 		}
 
 		getDrawCalls () { return this.drawCalls; }
+
+		dispose () {
+			this.mesh.dispose();			
+		}
 	}
 }

spine-ts/webgl/src/SceneRenderer.ts

@@ -0,0 +1,195 @@
+/******************************************************************************
+ * 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 SceneRenderer implements Disposable {
+		gl: WebGLRenderingContext;
+		canvas: HTMLCanvasElement;
+		camera: OrthoCamera;		
+		private batcherShader: Shader;
+		private batcher: PolygonBatcher;
+		private shapes: ShapeRenderer;
+		private shapesShader: Shader;
+		private activeRenderer: PolygonBatcher | ShapeRenderer = null;
+		private skeletonRenderer: SkeletonRenderer;
+		private QUAD = [
+			0, 0, 1, 1, 1, 1, 0, 0,
+			0, 0, 1, 1, 1, 1, 0, 0,
+			0, 0, 1, 1, 1, 1, 0, 0,
+			0, 0, 1, 1, 1, 1, 0, 0,
+		];
+		private QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
+		private WHITE = new Color(1, 1, 1, 1);
+
+		constructor (canvas: HTMLCanvasElement, gl: WebGLRenderingContext) {
+			this.canvas = canvas;
+			this.gl = gl;			
+			this.camera = new OrthoCamera(canvas.width, canvas.height);
+			this.batcherShader = Shader.newColoredTextured(gl);
+			this.batcher = new PolygonBatcher(gl);
+			this.shapesShader = Shader.newColored(gl);
+			this.shapes = new ShapeRenderer(gl); 
+			this.skeletonRenderer = new SkeletonRenderer(gl);
+		}
+
+		begin () {
+			this.camera.update();
+			this.enableRenderer(this.batcher);
+		}
+
+		drawSkeleton (skeleton: Skeleton, premultipliedAlpha = false) {
+			this.enableRenderer(this.batcher);
+			this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
+			this.skeletonRenderer.draw(this.batcher, skeleton);
+		}
+
+		drawTexture (texture: GLTexture, x: number, y: number, width: number, height: number, color: Color = null) {
+			this.enableRenderer(this.batcher);
+			if (color === null) color = this.WHITE;
+			let quad = this.QUAD;
+			quad[0] = x;
+			quad[1] = y;
+			quad[2] = color.r;
+			quad[3] = color.g;
+			quad[4] = color.b;
+			quad[5] = color.a;
+			quad[6] = 0;
+			quad[7] = 1;
+			quad[8] = x + width;
+			quad[9] = y;
+			quad[10] = color.r;
+			quad[11] = color.g;
+			quad[12] = color.b;
+			quad[13] = color.a;
+			quad[14] = 1;
+			quad[15] = 1;
+			quad[16] = x + width;
+			quad[17] = y + height;
+			quad[18] = color.r;
+			quad[19] = color.g;
+			quad[20] = color.b;
+			quad[21] = color.a;
+			quad[22] = 1;
+			quad[23] = 0;
+			quad[24] = x;
+			quad[25] = y + height;
+			quad[26] = color.r;
+			quad[27] = color.g;
+			quad[28] = color.b;
+			quad[29] = color.a;
+			quad[30] = 0;
+			quad[31] = 0;
+			this.batcher.draw(texture, quad, this.QUAD_TRIANGLES);
+		}
+
+		line (x: number, y: number, x2: number, y2: number, color: Color = null, color2: Color = null) {
+			this.enableRenderer(this.shapes);
+			this.shapes.line(x, y, x2, y2, color);
+		}
+
+		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.enableRenderer(this.shapes);
+			this.shapes.triangle(filled, x, y, x2, y2, x3, y3, color, color2, color3);
+		}
+
+		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.enableRenderer(this.shapes);
+			this.shapes.quad(filled, x, y, x2, y2, x3, y3, x4, y4, color, color2, color3, color4);
+		}
+
+		rect (filled: boolean, x: number, y: number, width: number, height: number, color: Color = null) {
+			this.enableRenderer(this.shapes);
+			this.shapes.rect(filled, x, y, width, height, color);
+		}
+
+		rectLine (filled: boolean, x1: number, y1: number, x2: number, y2: number, width: number, color: Color = null) {
+			this.enableRenderer(this.shapes);
+			this.shapes.rectLine(filled, x1, y1, x2, y2, width, color);
+		}
+
+		polygon (polygonVertices: ArrayLike<number>, offset: number, count: number, color: Color = null) {
+			this.enableRenderer(this.shapes);
+			this.shapes.polygon(polygonVertices, offset, count, color);
+		}
+
+		circle (filled: boolean, x: number, y: number, radius: number, color: Color = null, segments: number = 0) {
+			this.enableRenderer(this.shapes);
+			this.shapes.circle(filled, x, y, radius, color, segments);
+		}
+
+		curve (x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color: Color = null) {
+			this.enableRenderer(this.shapes);
+			this.shapes.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments, color);
+		}
+
+		end () {
+			if (this.activeRenderer === this.batcher) this.batcher.end();
+			else if (this.activeRenderer === this.shapes) this.shapes.end();
+			this.activeRenderer = null;		
+		}
+
+		resize () {
+			let canvas = this.canvas;
+			var w = canvas.clientWidth;
+			var h = canvas.clientHeight;	
+			if (canvas.width != w || canvas.height != h) {
+				canvas.width = w;
+				canvas.height = h;
+			}
+			this.camera.setViewport(w, h);
+			this.camera.update();	
+			this.gl.viewport(0, 0, canvas.width, canvas.height);
+		}
+
+		private enableRenderer(renderer: PolygonBatcher | ShapeRenderer) {
+			if (this.activeRenderer === renderer) return;
+			this.end();
+			if (renderer instanceof PolygonBatcher) {
+				this.batcherShader.bind();
+				this.batcherShader.setUniform4x4f(Shader.MVP_MATRIX, this.camera.projectionView.values);
+				this.batcher.begin(this.batcherShader);
+				this.activeRenderer = this.batcher;
+			} else {
+				this.shapesShader.bind();
+				this.shapesShader.setUniform4x4f(Shader.MVP_MATRIX, this.camera.projectionView.values);
+				this.shapes.begin(this.shapesShader);
+				this.activeRenderer = this.shapes;
+			}
+		}
+
+		dispose () {
+			this.batcher.dispose();
+			this.batcherShader.dispose();
+			this.shapes.dispose();
+			this.shapesShader.dispose();			
+		}
+	}
+}

spine-ts/webgl/src/ShapeRenderer.ts

@@ -39,6 +39,8 @@ module spine.webgl {
 		private shader: Shader;		
 		private vertexIndex = 0;
 		private tmp = new Vector2();
+		private srcBlend: number = WebGLRenderingContext.SRC_ALPHA;
+		private dstBlend: number = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
 
 		constructor (gl: WebGLRenderingContext, maxVertices: number = 10920) {
 			if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
@@ -51,6 +53,20 @@ module spine.webgl {
 			this.shader = shader;
 			this.vertexIndex = 0;
 			this.isDrawing = true;
+
+			let gl = this.gl;
+			gl.enable(gl.BLEND);
+			gl.blendFunc(this.srcBlend, this.dstBlend);
+		}		
+
+		setBlendMode (srcBlend: number, dstBlend: number) {
+			let gl = this.gl;
+			this.srcBlend = srcBlend;
+			this.dstBlend = dstBlend;
+			if (this.isDrawing) {
+				this.flush();
+				gl.blendFunc(this.srcBlend, this.dstBlend);
+			}
 		}
 
 		setColor (color: Color) {
@@ -67,14 +83,13 @@ module spine.webgl {
 			this.vertex(x, y, color);						
 		}
 
-		line (x: number, y: number, x2: number, y2: number, color: Color = null, color2: Color = null) {			
+		line (x: number, y: number, x2: number, y2: number, color: 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);		
+			this.vertex(x2, y2, color);		
 		}
 
 		triangle (filled: boolean, x: number, y: number, x2: number, y2: number, x3: number, y3: number, color: Color = null, color2: Color = null, color3: Color = null) {
@@ -192,7 +207,7 @@ module spine.webgl {
 			}			
 		}
 
-		circle (filled: boolean, x: number, y: number, radius: number, segments: number, color: Color = null) {
+		circle (filled: boolean, x: number, y: number, radius: number, color: Color = null, segments: number = 0) {
 			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;
@@ -302,6 +317,7 @@ module spine.webgl {
 			this.mesh.setVerticesLength(this.vertexIndex);
 			this.mesh.draw(this.shader, this.shapeType);
 			this.vertexIndex = 0;
+			this.gl.disable(this.gl.BLEND);
 		}
 
 		private check(shapeType: ShapeType, numVertices: number) {

spine-ts/webgl/src/SkeletonDebugRenderer.ts

@@ -196,8 +196,7 @@ module spine.webgl {
 				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, SkeletonDebugRenderer.GREEN, 8);
-					shapes.circle(true, skeletonX + bone.worldX, skeletonY + bone.worldY, 3 * this.scale, 8);
 				}
 			}
 

spine-ts/webgl/src/Vector3.ts

@@ -35,6 +35,19 @@ module spine.webgl {
 		y = 0;
 		z = 0;
 
+		constructor (x: number = 0, y: number = 0, z: number = 0) {
+			this.x = x;
+			this.y = y;
+			this.z = z;
+		}
+
+		setFrom(v: Vector3): Vector3 {
+			this.x = v.x;
+			this.y = v.y;
+			this.z = v.z;
+			return this;
+		}
+
 		set (x: number, y: number, z: number): Vector3 {
 			this.x = x;
 			this.y = y;