[ts][widget] Enabled two color tinting by default. Fixed WebGL warnings

spine-ts/build/spine-all.js

@@ -8491,7 +8491,7 @@ var spine;
 			canvas.height = element.clientHeight;
 			var webglConfig = { alpha: config.alpha };
 			var gl = this.gl = (canvas.getContext("webgl", webglConfig) || canvas.getContext("experimental-webgl", webglConfig));
-			this.shader = spine.webgl.Shader.newColoredTextured(gl);
+			this.shader = spine.webgl.Shader.newTwoColoredTextured(gl);
 			this.batcher = new spine.webgl.PolygonBatcher(gl);
 			this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
 			this.skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);

spine-ts/build/spine-widget.js

@@ -7953,7 +7953,7 @@ var spine;
 			canvas.height = element.clientHeight;
 			var webglConfig = { alpha: config.alpha };
 			var gl = this.gl = (canvas.getContext("webgl", webglConfig) || canvas.getContext("experimental-webgl", webglConfig));
-			this.shader = spine.webgl.Shader.newColoredTextured(gl);
+			this.shader = spine.webgl.Shader.newTwoColoredTextured(gl);
 			this.batcher = new spine.webgl.PolygonBatcher(gl);
 			this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
 			this.skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);

spine-ts/canvas/example/index.html

@@ -154,7 +154,7 @@ function resize () {
 	var width = canvas.width * scale;
 	var height = canvas.height * scale;
 
-	context.resetTransform();
+	context.setTransform(1, 0, 0, 1, 0, 0);
 	context.scale(1 / scale, 1 / scale);
 	context.translate(-centerX, -centerY);
 	context.translate(width / 2, height / 2);

spine-ts/webgl/example/index.html

@@ -39,6 +39,10 @@ function init () {
 	canvas.height = window.innerHeight;
 	var config = { alpha: false };
 	gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
+	if (!gl) {
+		alert('WebGL is unavailable.');
+		return;
+	}
 
 	// Create a simple shader, mesh, model-view-projection matrix and SkeletonRenderer.
 	shader = spine.webgl.Shader.newTwoColoredTextured(gl);

spine-ts/widget/example/index.html

@@ -71,6 +71,20 @@ data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAABACAYAAADS1n9/AAAFLElEQVR42u
 </script>
 
 <script>
+function supportsWebGL() {
+	try {
+		var canvas = document.createElement("canvas");
+		var ctx = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+		return ctx != null;
+	} catch(e) {
+		return false;
+	}
+}
+
+if (!supportsWebGL()) {
+	alert('WebGL is unavailable.');
+}
+
 new spine.SpineWidget("spine-widget", {
 	json: "assets/spineboy.json",
 	atlas: "assets/spineboy.atlas",

spine-ts/widget/src/Widget.ts

@@ -69,7 +69,7 @@ module spine {
 			var webglConfig = { alpha: config.alpha };
 			let gl = this.gl = <WebGLRenderingContext> (canvas.getContext("webgl", webglConfig) || canvas.getContext("experimental-webgl", webglConfig));
 
-			this.shader = spine.webgl.Shader.newColoredTextured(gl);
+			this.shader = spine.webgl.Shader.newTwoColoredTextured(gl);
 			this.batcher = new spine.webgl.PolygonBatcher(gl);
 			this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
 			this.skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);