[ts] Updated README.md describing compatibility and how to disable two color tinting in WebGL backend.

spine-ts/README.md

@@ -18,9 +18,13 @@ The Spine Runtimes are developed with the intent to be used with data exported f
 
 ## Spine version
 
-spine-ts works with data exported from Spine 3.5.xx.
+spine-ts works with data exported from Spine 3.6.xx
 
-spine-ts WebGL & Widget backends supports all Spine features. The spine-ts Canvas backend does not support color tinting, mesh attachments or shearing. Mesh attachments are supported by setting `spine.canvas.SkeletonRenderer.useTriangleRendering` to true. Note that this method is slow and may lead to artifacts on some browsers. The spine-ts THREE.JS backend does not support color tinting and blend modes. The THREE.JS backend provides `SkeletonMesh.zOffset` to avoid z-fighting. Adjust to your near/far plane settings.
+spine-ts WebGL & Widget backends supports all Spine features. 
+
+The spine-ts Canvas backend does not support color tinting, mesh attachments or shearing. Mesh attachments are supported by setting `spine.canvas.SkeletonRenderer.useTriangleRendering` to true. Note that this method is slow and may lead to artifacts on some browsers. 
+
+The spine-ts THREE.JS backend does not support color tinting and blend modes. The THREE.JS backend provides `SkeletonMesh.zOffset` to avoid z-fighting. Adjust to your near/far plane settings.
 
 spine-ts does not yet support loading the binary format.
 
@@ -89,6 +93,24 @@ python -m SimpleHTTPServer
 
 Then navigate to `http://localhost:8000/webgl/example`, `http://localhost:8000/canvas/example`, `http://localhost:8000/threejs/example` or `http://localhost:8000/widget/example`
 
+### Spine-ts WebGL backend
+By default, the spine-ts WebGL backend supports two-color tinting. This has a neglible effect on performance, as more per vertex data has to be submitted to the GPU, and the fragment shader has to do a few more arithmetic operations.
+
+You can disable two-color tinting like this:
+
+```javascript
+// If you use SceneRenderer, disable two-color tinting via the last constructor argument
+var sceneRenderer = new spine.SceneRenderer(canvas, gl, false);
+
+// If you use SkeletonRenderer and PolygonBatcher directly, 
+// disable two-color tinting in the respective constructor
+// and use the shader returned by Shader.newColoredTextured()
+// instead of Shader.newTwoColoredTextured()
+var batcher = new spine.PolygonBatcher(gl, false);
+var skeletonRenderer = new spine.SkeletonRenderer(gl, false);
+var shader = Shader.newColoredTextured();
+```
+
 ### Using the Widget
 To easily display Spine animations on your website, you can use the spine-ts Widget backend.
 

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

@@ -1470,7 +1470,7 @@ declare module spine.webgl {
 		getAttributeLocation(attribute: string): number;
 		dispose(): void;
 		static newColoredTextured(gl: WebGLRenderingContext): Shader;
-		static newTwoColorTextured(gl: WebGLRenderingContext): Shader;
+		static newTwoColoredTextured(gl: WebGLRenderingContext): Shader;
 		static newColored(gl: WebGLRenderingContext): Shader;
 	}
 }

spine-ts/build/spine-all.js

@@ -7146,7 +7146,7 @@ var spine;
 				this.canvas = canvas;
 				this.gl = gl;
 				this.camera = new webgl.OrthoCamera(canvas.width, canvas.height);
-				this.batcherShader = twoColorTint ? webgl.Shader.newTwoColorTextured(gl) : webgl.Shader.newColoredTextured(gl);
+				this.batcherShader = twoColorTint ? webgl.Shader.newTwoColoredTextured(gl) : webgl.Shader.newColoredTextured(gl);
 				this.batcher = new webgl.PolygonBatcher(gl, twoColorTint);
 				this.shapesShader = webgl.Shader.newColored(gl);
 				this.shapes = new webgl.ShapeRenderer(gl);
@@ -7588,7 +7588,7 @@ var spine;
 				var fs = "\n\t\t\t\t#ifdef GL_ES\n\t\t\t\t\t#define LOWP lowp\n\t\t\t\t\tprecision mediump float;\n\t\t\t\t#else\n\t\t\t\t\t#define LOWP\n\t\t\t\t#endif\n\t\t\t\tvarying LOWP vec4 v_color;\n\t\t\t\tvarying vec2 v_texCoords;\n\t\t\t\tuniform sampler2D u_texture;\n\n\t\t\t\tvoid main () {\n\t\t\t\t\tgl_FragColor = v_color * texture2D(u_texture, v_texCoords);\n\t\t\t\t}\n\t\t\t";
 				return new Shader(gl, vs, fs);
 			};
-			Shader.newTwoColorTextured = function (gl) {
+			Shader.newTwoColoredTextured = function (gl) {
 				var vs = "\n\t\t\t\tattribute vec4 " + Shader.POSITION + ";\n\t\t\t\tattribute vec4 " + Shader.COLOR + ";\n\t\t\t\tattribute vec4 " + Shader.COLOR2 + ";\n\t\t\t\tattribute vec2 " + Shader.TEXCOORDS + ";\n\t\t\t\tuniform mat4 " + Shader.MVP_MATRIX + ";\n\t\t\t\tvarying vec4 v_light;\n\t\t\t\tvarying vec4 v_dark;\n\t\t\t\tvarying vec2 v_texCoords;\n\n\t\t\t\tvoid main () {\n\t\t\t\t\tv_light = " + Shader.COLOR + ";\n\t\t\t\t\tv_dark = " + Shader.COLOR2 + ";\n\t\t\t\t\tv_texCoords = " + Shader.TEXCOORDS + ";\n\t\t\t\t\tgl_Position = " + Shader.MVP_MATRIX + " * " + Shader.POSITION + ";\n\t\t\t\t}\n\t\t\t";
 				var fs = "\n\t\t\t\t#ifdef GL_ES\n\t\t\t\t\t#define LOWP lowp\n\t\t\t\t\tprecision mediump float;\n\t\t\t\t#else\n\t\t\t\t\t#define LOWP\n\t\t\t\t#endif\n\t\t\t\tvarying LOWP vec4 v_light;\n\t\t\t\tvarying LOWP vec4 v_dark;\n\t\t\t\tvarying vec2 v_texCoords;\n\t\t\t\tuniform sampler2D u_texture;\n\n\t\t\t\tvoid main () {\n\t\t\t\t\tvec4 texColor = texture2D(u_texture, v_texCoords);\n\t\t\t\t\tfloat alpha = texColor.a * v_light.a;\n\t\t\t\t\tgl_FragColor.a = alpha;\n\t\t\t\t\tgl_FragColor.rgb = (1.0 - texColor.rgb) * v_dark.rgb * alpha + texColor.rgb * v_light.rgb;\n\t\t\t\t}\n\t\t\t";
 				return new Shader(gl, vs, fs);

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

@@ -1391,7 +1391,7 @@ declare module spine.webgl {
 		getAttributeLocation(attribute: string): number;
 		dispose(): void;
 		static newColoredTextured(gl: WebGLRenderingContext): Shader;
-		static newTwoColorTextured(gl: WebGLRenderingContext): Shader;
+		static newTwoColoredTextured(gl: WebGLRenderingContext): Shader;
 		static newColored(gl: WebGLRenderingContext): Shader;
 	}
 }

spine-ts/build/spine-webgl.js

@@ -6617,7 +6617,7 @@ var spine;
 				this.canvas = canvas;
 				this.gl = gl;
 				this.camera = new webgl.OrthoCamera(canvas.width, canvas.height);
-				this.batcherShader = twoColorTint ? webgl.Shader.newTwoColorTextured(gl) : webgl.Shader.newColoredTextured(gl);
+				this.batcherShader = twoColorTint ? webgl.Shader.newTwoColoredTextured(gl) : webgl.Shader.newColoredTextured(gl);
 				this.batcher = new webgl.PolygonBatcher(gl, twoColorTint);
 				this.shapesShader = webgl.Shader.newColored(gl);
 				this.shapes = new webgl.ShapeRenderer(gl);
@@ -7059,7 +7059,7 @@ var spine;
 				var fs = "\n\t\t\t\t#ifdef GL_ES\n\t\t\t\t\t#define LOWP lowp\n\t\t\t\t\tprecision mediump float;\n\t\t\t\t#else\n\t\t\t\t\t#define LOWP\n\t\t\t\t#endif\n\t\t\t\tvarying LOWP vec4 v_color;\n\t\t\t\tvarying vec2 v_texCoords;\n\t\t\t\tuniform sampler2D u_texture;\n\n\t\t\t\tvoid main () {\n\t\t\t\t\tgl_FragColor = v_color * texture2D(u_texture, v_texCoords);\n\t\t\t\t}\n\t\t\t";
 				return new Shader(gl, vs, fs);
 			};
-			Shader.newTwoColorTextured = function (gl) {
+			Shader.newTwoColoredTextured = function (gl) {
 				var vs = "\n\t\t\t\tattribute vec4 " + Shader.POSITION + ";\n\t\t\t\tattribute vec4 " + Shader.COLOR + ";\n\t\t\t\tattribute vec4 " + Shader.COLOR2 + ";\n\t\t\t\tattribute vec2 " + Shader.TEXCOORDS + ";\n\t\t\t\tuniform mat4 " + Shader.MVP_MATRIX + ";\n\t\t\t\tvarying vec4 v_light;\n\t\t\t\tvarying vec4 v_dark;\n\t\t\t\tvarying vec2 v_texCoords;\n\n\t\t\t\tvoid main () {\n\t\t\t\t\tv_light = " + Shader.COLOR + ";\n\t\t\t\t\tv_dark = " + Shader.COLOR2 + ";\n\t\t\t\t\tv_texCoords = " + Shader.TEXCOORDS + ";\n\t\t\t\t\tgl_Position = " + Shader.MVP_MATRIX + " * " + Shader.POSITION + ";\n\t\t\t\t}\n\t\t\t";
 				var fs = "\n\t\t\t\t#ifdef GL_ES\n\t\t\t\t\t#define LOWP lowp\n\t\t\t\t\tprecision mediump float;\n\t\t\t\t#else\n\t\t\t\t\t#define LOWP\n\t\t\t\t#endif\n\t\t\t\tvarying LOWP vec4 v_light;\n\t\t\t\tvarying LOWP vec4 v_dark;\n\t\t\t\tvarying vec2 v_texCoords;\n\t\t\t\tuniform sampler2D u_texture;\n\n\t\t\t\tvoid main () {\n\t\t\t\t\tvec4 texColor = texture2D(u_texture, v_texCoords);\n\t\t\t\t\tfloat alpha = texColor.a * v_light.a;\n\t\t\t\t\tgl_FragColor.a = alpha;\n\t\t\t\t\tgl_FragColor.rgb = (1.0 - texColor.rgb) * v_dark.rgb * alpha + texColor.rgb * v_light.rgb;\n\t\t\t\t}\n\t\t\t";
 				return new Shader(gl, vs, fs);

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

@@ -1391,7 +1391,7 @@ declare module spine.webgl {
 		getAttributeLocation(attribute: string): number;
 		dispose(): void;
 		static newColoredTextured(gl: WebGLRenderingContext): Shader;
-		static newTwoColorTextured(gl: WebGLRenderingContext): Shader;
+		static newTwoColoredTextured(gl: WebGLRenderingContext): Shader;
 		static newColored(gl: WebGLRenderingContext): Shader;
 	}
 }

spine-ts/build/spine-widget.js

@@ -6617,7 +6617,7 @@ var spine;
 				this.canvas = canvas;
 				this.gl = gl;
 				this.camera = new webgl.OrthoCamera(canvas.width, canvas.height);
-				this.batcherShader = twoColorTint ? webgl.Shader.newTwoColorTextured(gl) : webgl.Shader.newColoredTextured(gl);
+				this.batcherShader = twoColorTint ? webgl.Shader.newTwoColoredTextured(gl) : webgl.Shader.newColoredTextured(gl);
 				this.batcher = new webgl.PolygonBatcher(gl, twoColorTint);
 				this.shapesShader = webgl.Shader.newColored(gl);
 				this.shapes = new webgl.ShapeRenderer(gl);
@@ -7059,7 +7059,7 @@ var spine;
 				var fs = "\n\t\t\t\t#ifdef GL_ES\n\t\t\t\t\t#define LOWP lowp\n\t\t\t\t\tprecision mediump float;\n\t\t\t\t#else\n\t\t\t\t\t#define LOWP\n\t\t\t\t#endif\n\t\t\t\tvarying LOWP vec4 v_color;\n\t\t\t\tvarying vec2 v_texCoords;\n\t\t\t\tuniform sampler2D u_texture;\n\n\t\t\t\tvoid main () {\n\t\t\t\t\tgl_FragColor = v_color * texture2D(u_texture, v_texCoords);\n\t\t\t\t}\n\t\t\t";
 				return new Shader(gl, vs, fs);
 			};
-			Shader.newTwoColorTextured = function (gl) {
+			Shader.newTwoColoredTextured = function (gl) {
 				var vs = "\n\t\t\t\tattribute vec4 " + Shader.POSITION + ";\n\t\t\t\tattribute vec4 " + Shader.COLOR + ";\n\t\t\t\tattribute vec4 " + Shader.COLOR2 + ";\n\t\t\t\tattribute vec2 " + Shader.TEXCOORDS + ";\n\t\t\t\tuniform mat4 " + Shader.MVP_MATRIX + ";\n\t\t\t\tvarying vec4 v_light;\n\t\t\t\tvarying vec4 v_dark;\n\t\t\t\tvarying vec2 v_texCoords;\n\n\t\t\t\tvoid main () {\n\t\t\t\t\tv_light = " + Shader.COLOR + ";\n\t\t\t\t\tv_dark = " + Shader.COLOR2 + ";\n\t\t\t\t\tv_texCoords = " + Shader.TEXCOORDS + ";\n\t\t\t\t\tgl_Position = " + Shader.MVP_MATRIX + " * " + Shader.POSITION + ";\n\t\t\t\t}\n\t\t\t";
 				var fs = "\n\t\t\t\t#ifdef GL_ES\n\t\t\t\t\t#define LOWP lowp\n\t\t\t\t\tprecision mediump float;\n\t\t\t\t#else\n\t\t\t\t\t#define LOWP\n\t\t\t\t#endif\n\t\t\t\tvarying LOWP vec4 v_light;\n\t\t\t\tvarying LOWP vec4 v_dark;\n\t\t\t\tvarying vec2 v_texCoords;\n\t\t\t\tuniform sampler2D u_texture;\n\n\t\t\t\tvoid main () {\n\t\t\t\t\tvec4 texColor = texture2D(u_texture, v_texCoords);\n\t\t\t\t\tfloat alpha = texColor.a * v_light.a;\n\t\t\t\t\tgl_FragColor.a = alpha;\n\t\t\t\t\tgl_FragColor.rgb = (1.0 - texColor.rgb) * v_dark.rgb * alpha + texColor.rgb * v_light.rgb;\n\t\t\t\t}\n\t\t\t";
 				return new Shader(gl, vs, fs);

spine-ts/webgl/src/SceneRenderer.ts

@@ -53,7 +53,7 @@ module spine.webgl {
 			this.canvas = canvas;
 			this.gl = gl;
 			this.camera = new OrthoCamera(canvas.width, canvas.height);
-			this.batcherShader = twoColorTint ? Shader.newTwoColorTextured(gl) : Shader.newColoredTextured(gl);
+			this.batcherShader = twoColorTint ? Shader.newTwoColoredTextured(gl) : Shader.newColoredTextured(gl);
 			this.batcher = new PolygonBatcher(gl, twoColorTint);
 			this.shapesShader = Shader.newColored(gl);
 			this.shapes = new ShapeRenderer(gl);

spine-ts/webgl/src/Shader.ts

@@ -207,7 +207,7 @@ module spine.webgl {
 			return new Shader(gl, vs, fs);
 		}
 
-		public static newTwoColorTextured (gl: WebGLRenderingContext): Shader {
+		public static newTwoColoredTextured (gl: WebGLRenderingContext): Shader {
 			let vs = `
 				attribute vec4 ${Shader.POSITION};
 				attribute vec4 ${Shader.COLOR};