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

[webgl] Updated pma tint black demo to include Ivan's shader from #993.

Browse Source
This commit is contained in:
badlogic 2017-09-25 15:02:46 +02:00
parent 1b9762a54f
commit 7652eb47ba
5 changed files with 831 additions and 743 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -399,156 +399,6 @@ declare module spine {
newClippingAttachment(skin: Skin, name: string): ClippingAttachment;
}
}
declare module spine {
abstract class Attachment {
name: string;
constructor(name: string);
}
abstract class VertexAttachment extends Attachment {
private static nextID;
id: number;
bones: Array<number>;
vertices: ArrayLike<number>;
worldVerticesLength: number;
constructor(name: string);
computeWorldVertices(slot: Slot, start: number, count: number, worldVertices: ArrayLike<number>, offset: number, stride: number): void;
applyDeform(sourceAttachment: VertexAttachment): boolean;
}
}
declare module spine {
interface AttachmentLoader {
newRegionAttachment(skin: Skin, name: string, path: string): RegionAttachment;
newMeshAttachment(skin: Skin, name: string, path: string): MeshAttachment;
newBoundingBoxAttachment(skin: Skin, name: string): BoundingBoxAttachment;
newPathAttachment(skin: Skin, name: string): PathAttachment;
newPointAttachment(skin: Skin, name: string): PointAttachment;
newClippingAttachment(skin: Skin, name: string): ClippingAttachment;
}
}
declare module spine {
enum AttachmentType {
Region = 0,
BoundingBox = 1,
Mesh = 2,
LinkedMesh = 3,
Path = 4,
Point = 5,
}
}
declare module spine {
class BoundingBoxAttachment extends VertexAttachment {
color: Color;
constructor(name: string);
}
}
declare module spine {
class ClippingAttachment extends VertexAttachment {
endSlot: SlotData;
color: Color;
constructor(name: string);
}
}
declare module spine {
class MeshAttachment extends VertexAttachment {
region: TextureRegion;
path: string;
regionUVs: ArrayLike<number>;
uvs: ArrayLike<number>;
triangles: Array<number>;
color: Color;
hullLength: number;
private parentMesh;
inheritDeform: boolean;
tempColor: Color;
constructor(name: string);
updateUVs(): void;
applyDeform(sourceAttachment: VertexAttachment): boolean;
getParentMesh(): MeshAttachment;
setParentMesh(parentMesh: MeshAttachment): void;
}
}
declare module spine {
class PathAttachment extends VertexAttachment {
lengths: Array<number>;
closed: boolean;
constantSpeed: boolean;
color: Color;
constructor(name: string);
}
}
declare module spine {
class PointAttachment extends VertexAttachment {
x: number;
y: number;
rotation: number;
color: Color;
constructor(name: string);
computeWorldPosition(bone: Bone, point: Vector2): Vector2;
computeWorldRotation(bone: Bone): number;
}
}
declare module spine {
class RegionAttachment extends Attachment {
static OX1: number;
static OY1: number;
static OX2: number;
static OY2: number;
static OX3: number;
static OY3: number;
static OX4: number;
static OY4: number;
static X1: number;
static Y1: number;
static C1R: number;
static C1G: number;
static C1B: number;
static C1A: number;
static U1: number;
static V1: number;
static X2: number;
static Y2: number;
static C2R: number;
static C2G: number;
static C2B: number;
static C2A: number;
static U2: number;
static V2: number;
static X3: number;
static Y3: number;
static C3R: number;
static C3G: number;
static C3B: number;
static C3A: number;
static U3: number;
static V3: number;
static X4: number;
static Y4: number;
static C4R: number;
static C4G: number;
static C4B: number;
static C4A: number;
static U4: number;
static V4: number;
x: number;
y: number;
scaleX: number;
scaleY: number;
rotation: number;
width: number;
height: number;
color: Color;
path: string;
rendererObject: any;
region: TextureRegion;
offset: ArrayLike<number>;
uvs: ArrayLike<number>;
tempColor: Color;
constructor(name: string);
updateOffset(): void;
setRegion(region: TextureRegion): void;
computeWorldVertices(bone: Bone, worldVertices: ArrayLike<number>, offset: number, stride: number): void;
}
}
declare module spine {
enum BlendMode {
Normal = 0,
@ -1195,6 +1045,156 @@ declare module spine {
end(): void;
}
}
declare module spine {
abstract class Attachment {
name: string;
constructor(name: string);
}
abstract class VertexAttachment extends Attachment {
private static nextID;
id: number;
bones: Array<number>;
vertices: ArrayLike<number>;
worldVerticesLength: number;
constructor(name: string);
computeWorldVertices(slot: Slot, start: number, count: number, worldVertices: ArrayLike<number>, offset: number, stride: number): void;
applyDeform(sourceAttachment: VertexAttachment): boolean;
}
}
declare module spine {
interface AttachmentLoader {
newRegionAttachment(skin: Skin, name: string, path: string): RegionAttachment;
newMeshAttachment(skin: Skin, name: string, path: string): MeshAttachment;
newBoundingBoxAttachment(skin: Skin, name: string): BoundingBoxAttachment;
newPathAttachment(skin: Skin, name: string): PathAttachment;
newPointAttachment(skin: Skin, name: string): PointAttachment;
newClippingAttachment(skin: Skin, name: string): ClippingAttachment;
}
}
declare module spine {
enum AttachmentType {
Region = 0,
BoundingBox = 1,
Mesh = 2,
LinkedMesh = 3,
Path = 4,
Point = 5,
}
}
declare module spine {
class BoundingBoxAttachment extends VertexAttachment {
color: Color;
constructor(name: string);
}
}
declare module spine {
class ClippingAttachment extends VertexAttachment {
endSlot: SlotData;
color: Color;
constructor(name: string);
}
}
declare module spine {
class MeshAttachment extends VertexAttachment {
region: TextureRegion;
path: string;
regionUVs: ArrayLike<number>;
uvs: ArrayLike<number>;
triangles: Array<number>;
color: Color;
hullLength: number;
private parentMesh;
inheritDeform: boolean;
tempColor: Color;
constructor(name: string);
updateUVs(): void;
applyDeform(sourceAttachment: VertexAttachment): boolean;
getParentMesh(): MeshAttachment;
setParentMesh(parentMesh: MeshAttachment): void;
}
}
declare module spine {
class PathAttachment extends VertexAttachment {
lengths: Array<number>;
closed: boolean;
constantSpeed: boolean;
color: Color;
constructor(name: string);
}
}
declare module spine {
class PointAttachment extends VertexAttachment {
x: number;
y: number;
rotation: number;
color: Color;
constructor(name: string);
computeWorldPosition(bone: Bone, point: Vector2): Vector2;
computeWorldRotation(bone: Bone): number;
}
}
declare module spine {
class RegionAttachment extends Attachment {
static OX1: number;
static OY1: number;
static OX2: number;
static OY2: number;
static OX3: number;
static OY3: number;
static OX4: number;
static OY4: number;
static X1: number;
static Y1: number;
static C1R: number;
static C1G: number;
static C1B: number;
static C1A: number;
static U1: number;
static V1: number;
static X2: number;
static Y2: number;
static C2R: number;
static C2G: number;
static C2B: number;
static C2A: number;
static U2: number;
static V2: number;
static X3: number;
static Y3: number;
static C3R: number;
static C3G: number;
static C3B: number;
static C3A: number;
static U3: number;
static V3: number;
static X4: number;
static Y4: number;
static C4R: number;
static C4G: number;
static C4B: number;
static C4A: number;
static U4: number;
static V4: number;
x: number;
y: number;
scaleX: number;
scaleY: number;
rotation: number;
width: number;
height: number;
color: Color;
path: string;
rendererObject: any;
region: TextureRegion;
offset: ArrayLike<number>;
uvs: ArrayLike<number>;
tempColor: Color;
constructor(name: string);
updateOffset(): void;
setRegion(region: TextureRegion): void;
computeWorldVertices(bone: Bone, worldVertices: ArrayLike<number>, offset: number, stride: number): void;
}
}
declare module spine {
class JitterEffect implements VertexEffect {
jitterX: number;
@ -1311,22 +1311,22 @@ declare module spine.webgl {
}
}
declare module spine.webgl {
const M00: number;
const M01: number;
const M02: number;
const M03: number;
const M10: number;
const M11: number;
const M12: number;
const M13: number;
const M20: number;
const M21: number;
const M22: number;
const M23: number;
const M30: number;
const M31: number;
const M32: number;
const M33: number;
const M00 = 0;
const M01 = 4;
const M02 = 8;
const M03 = 12;
const M10 = 1;
const M11 = 5;
const M12 = 9;
const M13 = 13;
const M20 = 2;
const M21 = 6;
const M22 = 10;
const M23 = 14;
const M30 = 3;
const M31 = 7;
const M32 = 11;
const M33 = 15;
class Matrix4 {
temp: Float32Array;
values: Float32Array;
@ -1486,7 +1486,9 @@ declare module spine.webgl {
static SAMPLER: string;
private context;
private vs;
private vsSource;
private fs;
private fsSource;
private program;
private tmp2x2;
private tmp3x3;
@ -1494,6 +1496,8 @@ declare module spine.webgl {
getProgram(): WebGLProgram;
getVertexShader(): string;
getFragmentShader(): string;
getVertexShaderSource(): string;
getFragmentSource(): string;
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, vertexShader: string, fragmentShader: string);
private compile();
private compileShader(type, source);

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

95
spine-ts/webgl/example/test-pma-tintblack.html
View File

@ -12,39 +12,61 @@
<div><label>Light: </label><input type="text" value="ffffffff" id="light"></div>
<div><label>Dark: </label><input type="text" value="000000" id="dark"></div>
<div><label>PMA blend:</label><input type="checkbox" id="pmaBlend"></div>
<div><label>PMA texture:</label><input type="checkbox" id="pmaTexture"></div>
<div><label>Ivan's shader:</label><input type="checkbox" id="ivan"></div>
</div>
</body>
<script>
$("#light").change(function() {
setColors();
});
$("#dark").change(function() {
setColors();
});
$("#pmaBlend").change(function() {
setColors();
});
function setColors() {
var light = $("#light").val();
var r = parseInt(light.substr(0,2),16) / 255;
var g = parseInt(light.substr(2,2),16) / 255;
var b = parseInt(light.substr(4,2),16) / 255;
var a = parseInt(light.substr(6,2),16) / 255;
for (var i = 0, j = 2; i < 4; i++, j+=12) {
var dark = $("#dark").val();
var dr = parseInt(dark.substr(0,2),16) / 255;
var dg = parseInt(dark.substr(2,2),16) / 255;
var db = parseInt(dark.substr(4,2),16) / 255;
var pma = $("#pmaBlend").prop("checked");
if (pma) {
r *= a;
g *= a;
b *= a;
dr *= a;
dg *= a;
db *= a;
da = 1;
} else {
da = 0;
}
for (var i = 0, j = 2, k = 8; i < 4; i++, j+=12, k+=12) {
vertices[j] = r;
vertices[j+1] = g;
vertices[j+2] = b;
vertices[j+3] = a;
}
})
$("#dark").change(function() {
var dark = $("#dark").val();
var r = parseInt(dark.substr(0,2),16) / 255;
var g = parseInt(dark.substr(2,2),16) / 255;
var b = parseInt(dark.substr(4,2),16) / 255;
for (var i = 0, j = 8; i < 4; i++, j+=12) {
vertices[j] = r;
vertices[j+1] = g;
vertices[j+2] = b;
vertices[k] = dr;
vertices[k+1] = dg;
vertices[k+2] = db;
vertices[k+3] = da;
}
})
}
var canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth;
@ -59,6 +81,7 @@
var indices = [ 0, 1, 2, 2, 3, 0 ];
var shader = spine.webgl.Shader.newTwoColoredTextured(context);
var ivanShader = loadIvanShader(context, shader);
var assetManager = new spine.webgl.AssetManager(context);
assetManager.loadTexture("assets/spineboy.png");
@ -82,17 +105,45 @@
gl.clearColor(1, 0, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
shader.bind();
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, camMatrix.values);
shader.setUniformi("u_texture", 0);
var pma = $("#pmaBlend").prop("checked");
var ivan = $("#ivan").prop("checked")
var s = ivan ? ivanShader : shader;
s.bind();
s.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, camMatrix.values);
s.setUniformi("u_texture", 0);
if (texture != null) {
batcher.setBlendMode($("#pmaBlend").prop("checked") ? context.gl.ONE : context.gl.SRC_ALPHA, context.gl.ONE_MINUS_SRC_ALPHA)
batcher.begin(shader);
batcher.draw($("#pmaTexture").prop("checked") ? texturePma : texture, vertices, indices);
batcher.setBlendMode(pma ? context.gl.ONE : context.gl.SRC_ALPHA, context.gl.ONE_MINUS_SRC_ALPHA)
batcher.begin(s);
batcher.draw(pma ? texturePma : texture, vertices, indices);
batcher.end();
}
shader.unbind();
s.unbind();
requestAnimationFrame(render);
}
function loadIvanShader (context, shader) {
var vs = shader.getVertexShaderSource();
let fs = `
#ifdef GL_ES
#define LOWP lowp
precision mediump float;
#else
#define LOWP
#endif
varying LOWP vec4 v_light;
varying LOWP vec4 v_dark;
varying vec2 v_texCoords;
uniform sampler2D u_texture;
void main () {
vec4 texColor = texture2D(u_texture, v_texCoords);
gl_FragColor.a = texColor.a * v_light.a;
gl_FragColor.rgb = ((texColor.a - 1.0) * v_dark.a + 1.0 - texColor.rgb) * v_dark.rgb + texColor.rgb * v_light.rgb;
}
`;
return new spine.webgl.Shader(context, vs, fs);
}
</script>

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

@ -39,7 +39,9 @@ module spine.webgl {
private context: ManagedWebGLRenderingContext;
private vs: WebGLShader = null;
private vsSource: string;
private fs: WebGLShader = null;
private fsSource: string;
private program: WebGLProgram = null;
private tmp2x2: Float32Array = new Float32Array(2 * 2);
private tmp3x3: Float32Array = new Float32Array(3 * 3);
@ -48,8 +50,12 @@ module spine.webgl {
public getProgram () { return this.program; }
public getVertexShader () { return this.vertexShader; }
public getFragmentShader () { return this.fragmentShader; }
public getVertexShaderSource () { return this.vsSource; }
public getFragmentSource () { return this.fsSource; }
constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, private vertexShader: string, private fragmentShader: string) {
this.vsSource = vertexShader;
this.fsSource = fragmentShader;
this.context = context instanceof ManagedWebGLRenderingContext? context : new ManagedWebGLRenderingContext(context);
this.context.addRestorable(this);
this.compile();