UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-06 23:34:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
badlogic 2017-02-24 15:18:30 +01:00
parent 10a11fd74b
commit be9b522237
12 changed files with 38 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
spine-ts/README.md
View File

@ -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.

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

@ -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;
}
}

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

@ -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);

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

File diff suppressed because one or more lines are too long

2
spine-ts/build/spine-webgl.d.ts vendored
View File

@ -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;
}
}

4
spine-ts/build/spine-webgl.js
View File

@ -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);

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

File diff suppressed because one or more lines are too long

2
spine-ts/build/spine-widget.d.ts vendored
View File

@ -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;
}
}

4
spine-ts/build/spine-widget.js
View File

@ -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);

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

File diff suppressed because one or more lines are too long

2
spine-ts/webgl/src/SceneRenderer.ts
View File

@ -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);

2
spine-ts/webgl/src/Shader.ts
View File

@ -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};