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

[ts][webgl][widget] Fixed issues in Safari. Constants like SRC_ALPHA seem to no longer be exposed in Safari through WebGLRenderingContext properties. Closes #886

Browse Source
This commit is contained in:
badlogic 2017-04-26 15:56:52 +02:00
parent 59eb90eb66
commit 6a5e035cb5
24 changed files with 318 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1516,9 +1516,9 @@ declare module spine.webgl {
dispose(): void; dispose(): void;
} }
enum ShapeType { enum ShapeType {
Point, Point = 0,
Line, Line = 1,
Filled, Filled = 4,
} }
} }
declare module spine.webgl { declare module spine.webgl {
@ -1596,8 +1596,19 @@ declare module spine.webgl {
addRestorable(restorable: Restorable): void; addRestorable(restorable: Restorable): void;
removeRestorable(restorable: Restorable): void; removeRestorable(restorable: Restorable): void;
} }
function getSourceGLBlendMode(blendMode: BlendMode, premultipliedAlpha?: boolean): number; class WebGLBlendModeConverter {
function getDestGLBlendMode(blendMode: BlendMode): number; static ZERO: number;
static ONE: number;
static SRC_COLOR: number;
static ONE_MINUS_SRC_COLOR: number;
static SRC_ALPHA: number;
static ONE_MINUS_SRC_ALPHA: number;
static DST_ALPHA: number;
static ONE_MINUS_DST_ALPHA: number;
static DST_COLOR: number;
static getDestGLBlendMode(blendMode: BlendMode): number;
static getSourceGLBlendMode(blendMode: BlendMode, premultipliedAlpha?: boolean): number;
}
} }
declare module spine.threejs { declare module spine.threejs {
class AssetManager extends spine.AssetManager { class AssetManager extends spine.AssetManager {

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

@ -1821,7 +1821,6 @@ var spine;
this.toLoad++; this.toLoad++;
var img = new Image(); var img = new Image();
img.crossOrigin = "anonymous"; img.crossOrigin = "anonymous";
img.src = path;
img.onload = function (ev) { img.onload = function (ev) {
var texture = _this.textureLoader(img); var texture = _this.textureLoader(img);
_this.assets[path] = texture; _this.assets[path] = texture;
@ -1837,6 +1836,7 @@ var spine;
if (error) if (error)
error(path, "Couldn't load image " + path); error(path, "Couldn't load image " + path);
}; };
img.src = path;
}; };
AssetManager.prototype.loadTextureData = function (path, data, success, error) { AssetManager.prototype.loadTextureData = function (path, data, success, error) {
var _this = this; var _this = this;
@ -1845,7 +1845,6 @@ var spine;
path = this.pathPrefix + path; path = this.pathPrefix + path;
this.toLoad++; this.toLoad++;
var img = new Image(); var img = new Image();
img.src = data;
img.onload = function (ev) { img.onload = function (ev) {
var texture = _this.textureLoader(img); var texture = _this.textureLoader(img);
_this.assets[path] = texture; _this.assets[path] = texture;
@ -1861,6 +1860,7 @@ var spine;
if (error) if (error)
error(path, "Couldn't load image " + path); error(path, "Couldn't load image " + path);
}; };
img.src = data;
}; };
AssetManager.prototype.get = function (path) { AssetManager.prototype.get = function (path) {
path = this.pathPrefix + path; path = this.pathPrefix + path;
@ -6891,7 +6891,7 @@ var spine;
var logoHeight = this.logo.getImage().height; var logoHeight = this.logo.getImage().height;
var spinnerWidth = this.spinner.getImage().width; var spinnerWidth = this.spinner.getImage().width;
var spinnerHeight = this.spinner.getImage().height; var spinnerHeight = this.spinner.getImage().height;
renderer.batcher.setBlendMode(WebGLRenderingContext.SRC_ALPHA, WebGLRenderingContext.ONE_MINUS_SRC_ALPHA); renderer.batcher.setBlendMode(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
renderer.begin(); renderer.begin();
renderer.drawTexture(this.logo, (canvas.width - logoWidth) / 2, (canvas.height - logoHeight) / 2, logoWidth, logoHeight, this.tempColor); renderer.drawTexture(this.logo, (canvas.width - logoWidth) / 2, (canvas.height - logoHeight) / 2, logoWidth, logoHeight, this.tempColor);
renderer.drawTextureRotated(this.spinner, (canvas.width - spinnerWidth) / 2, (canvas.height - spinnerHeight) / 2, spinnerWidth, spinnerHeight, spinnerWidth / 2, spinnerHeight / 2, this.angle, this.tempColor); renderer.drawTextureRotated(this.spinner, (canvas.width - spinnerWidth) / 2, (canvas.height - spinnerHeight) / 2, spinnerWidth, spinnerHeight, spinnerWidth / 2, spinnerHeight / 2, this.angle, this.tempColor);
@ -7411,8 +7411,6 @@ var spine;
this.lastTexture = null; this.lastTexture = null;
this.verticesLength = 0; this.verticesLength = 0;
this.indicesLength = 0; this.indicesLength = 0;
this.srcBlend = WebGLRenderingContext.SRC_ALPHA;
this.dstBlend = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
if (maxVertices > 10920) if (maxVertices > 10920)
throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices); throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.context = context instanceof webgl.ManagedWebGLRenderingContext ? context : new webgl.ManagedWebGLRenderingContext(context); this.context = context instanceof webgl.ManagedWebGLRenderingContext ? context : new webgl.ManagedWebGLRenderingContext(context);
@ -7420,6 +7418,8 @@ var spine;
[new webgl.Position2Attribute(), new webgl.ColorAttribute(), new webgl.TexCoordAttribute(), new webgl.Color2Attribute()] : [new webgl.Position2Attribute(), new webgl.ColorAttribute(), new webgl.TexCoordAttribute(), new webgl.Color2Attribute()] :
[new webgl.Position2Attribute(), new webgl.ColorAttribute(), new webgl.TexCoordAttribute()]; [new webgl.Position2Attribute(), new webgl.ColorAttribute(), new webgl.TexCoordAttribute()];
this.mesh = new webgl.Mesh(context, attributes, maxVertices, maxVertices * 3); this.mesh = new webgl.Mesh(context, attributes, maxVertices, maxVertices * 3);
this.srcBlend = this.context.gl.SRC_ALPHA;
this.dstBlend = this.context.gl.ONE_MINUS_SRC_ALPHA;
} }
PolygonBatcher.prototype.begin = function (shader) { PolygonBatcher.prototype.begin = function (shader) {
var gl = this.context.gl; var gl = this.context.gl;
@ -7445,7 +7445,6 @@ var spine;
if (texture != this.lastTexture) { if (texture != this.lastTexture) {
this.flush(); this.flush();
this.lastTexture = texture; this.lastTexture = texture;
texture.bind();
} }
else if (this.verticesLength + vertices.length > this.mesh.getVertices().length || else if (this.verticesLength + vertices.length > this.mesh.getVertices().length ||
this.indicesLength + indices.length > this.mesh.getIndices().length) { this.indicesLength + indices.length > this.mesh.getIndices().length) {
@ -7465,6 +7464,7 @@ var spine;
var gl = this.context.gl; var gl = this.context.gl;
if (this.verticesLength == 0) if (this.verticesLength == 0)
return; return;
this.lastTexture.bind();
this.mesh.draw(this.shader, gl.TRIANGLES); this.mesh.draw(this.shader, gl.TRIANGLES);
this.verticesLength = 0; this.verticesLength = 0;
this.indicesLength = 0; this.indicesLength = 0;
@ -7872,6 +7872,7 @@ var spine;
if (renderer instanceof webgl.PolygonBatcher) { if (renderer instanceof webgl.PolygonBatcher) {
this.batcherShader.bind(); this.batcherShader.bind();
this.batcherShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values); this.batcherShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
this.batcherShader.setUniformi("u_texture", 0);
this.batcher.begin(this.batcherShader); this.batcher.begin(this.batcherShader);
this.activeRenderer = this.batcher; this.activeRenderer = this.batcher;
} }
@ -8070,12 +8071,12 @@ var spine;
this.color = new spine.Color(1, 1, 1, 1); this.color = new spine.Color(1, 1, 1, 1);
this.vertexIndex = 0; this.vertexIndex = 0;
this.tmp = new spine.Vector2(); this.tmp = new spine.Vector2();
this.srcBlend = WebGLRenderingContext.SRC_ALPHA;
this.dstBlend = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
if (maxVertices > 10920) if (maxVertices > 10920)
throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices); throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.context = context instanceof webgl.ManagedWebGLRenderingContext ? context : new webgl.ManagedWebGLRenderingContext(context); this.context = context instanceof webgl.ManagedWebGLRenderingContext ? context : new webgl.ManagedWebGLRenderingContext(context);
this.mesh = new webgl.Mesh(context, [new webgl.Position2Attribute(), new webgl.ColorAttribute()], maxVertices, 0); this.mesh = new webgl.Mesh(context, [new webgl.Position2Attribute(), new webgl.ColorAttribute()], maxVertices, 0);
this.srcBlend = this.context.gl.SRC_ALPHA;
this.dstBlend = this.context.gl.ONE_MINUS_SRC_ALPHA;
} }
ShapeRenderer.prototype.begin = function (shader) { ShapeRenderer.prototype.begin = function (shader) {
if (this.isDrawing) if (this.isDrawing)
@ -8376,9 +8377,9 @@ var spine;
webgl.ShapeRenderer = ShapeRenderer; webgl.ShapeRenderer = ShapeRenderer;
var ShapeType; var ShapeType;
(function (ShapeType) { (function (ShapeType) {
ShapeType[ShapeType["Point"] = WebGLRenderingContext.POINTS] = "Point"; ShapeType[ShapeType["Point"] = 0] = "Point";
ShapeType[ShapeType["Line"] = WebGLRenderingContext.LINES] = "Line"; ShapeType[ShapeType["Line"] = 1] = "Line";
ShapeType[ShapeType["Filled"] = WebGLRenderingContext.TRIANGLES] = "Filled"; ShapeType[ShapeType["Filled"] = 4] = "Filled";
})(ShapeType = webgl.ShapeType || (webgl.ShapeType = {})); })(ShapeType = webgl.ShapeType || (webgl.ShapeType = {}));
})(webgl = spine.webgl || (spine.webgl = {})); })(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {})); })(spine || (spine = {}));
@ -8671,7 +8672,7 @@ var spine;
var slotBlendMode = slot.data.blendMode; var slotBlendMode = slot.data.blendMode;
if (slotBlendMode != blendMode) { if (slotBlendMode != blendMode) {
blendMode = slotBlendMode; blendMode = slotBlendMode;
batcher.setBlendMode(webgl.getSourceGLBlendMode(blendMode, premultipliedAlpha), webgl.getDestGLBlendMode(blendMode)); batcher.setBlendMode(webgl.WebGLBlendModeConverter.getSourceGLBlendMode(blendMode, premultipliedAlpha), webgl.WebGLBlendModeConverter.getDestGLBlendMode(blendMode));
} }
if (clipper.isClipping()) { if (clipper.isClipping()) {
clipper.clipTriangles(renderable.vertices, renderable.numFloats, triangles, triangles.length, uvs, finalColor, darkColor, twoColorTint); clipper.clipTriangles(renderable.vertices, renderable.numFloats, triangles, triangles.length, uvs, finalColor, darkColor, twoColorTint);
@ -8845,27 +8846,40 @@ var spine;
return ManagedWebGLRenderingContext; return ManagedWebGLRenderingContext;
}()); }());
webgl.ManagedWebGLRenderingContext = ManagedWebGLRenderingContext; webgl.ManagedWebGLRenderingContext = ManagedWebGLRenderingContext;
function getSourceGLBlendMode(blendMode, premultipliedAlpha) { var WebGLBlendModeConverter = (function () {
if (premultipliedAlpha === void 0) { premultipliedAlpha = false; } function WebGLBlendModeConverter() {
switch (blendMode) {
case spine.BlendMode.Normal: return premultipliedAlpha ? WebGLRenderingContext.ONE : WebGLRenderingContext.SRC_ALPHA;
case spine.BlendMode.Additive: return premultipliedAlpha ? WebGLRenderingContext.ONE : WebGLRenderingContext.SRC_ALPHA;
case spine.BlendMode.Multiply: return WebGLRenderingContext.DST_COLOR;
case spine.BlendMode.Screen: return WebGLRenderingContext.ONE;
default: throw new Error("Unknown blend mode: " + blendMode);
} }
} WebGLBlendModeConverter.getDestGLBlendMode = function (blendMode) {
webgl.getSourceGLBlendMode = getSourceGLBlendMode; switch (blendMode) {
function getDestGLBlendMode(blendMode) { case spine.BlendMode.Normal: return WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA;
switch (blendMode) { case spine.BlendMode.Additive: return WebGLBlendModeConverter.ONE;
case spine.BlendMode.Normal: return WebGLRenderingContext.ONE_MINUS_SRC_ALPHA; case spine.BlendMode.Multiply: return WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA;
case spine.BlendMode.Additive: return WebGLRenderingContext.ONE; case spine.BlendMode.Screen: return WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA;
case spine.BlendMode.Multiply: return WebGLRenderingContext.ONE_MINUS_SRC_ALPHA; default: throw new Error("Unknown blend mode: " + blendMode);
case spine.BlendMode.Screen: return WebGLRenderingContext.ONE_MINUS_SRC_ALPHA; }
default: throw new Error("Unknown blend mode: " + blendMode); };
} WebGLBlendModeConverter.getSourceGLBlendMode = function (blendMode, premultipliedAlpha) {
} if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
webgl.getDestGLBlendMode = getDestGLBlendMode; switch (blendMode) {
case spine.BlendMode.Normal: return premultipliedAlpha ? WebGLBlendModeConverter.ONE : WebGLBlendModeConverter.SRC_ALPHA;
case spine.BlendMode.Additive: return premultipliedAlpha ? WebGLBlendModeConverter.ONE : WebGLBlendModeConverter.SRC_ALPHA;
case spine.BlendMode.Multiply: return WebGLBlendModeConverter.DST_COLOR;
case spine.BlendMode.Screen: return WebGLBlendModeConverter.ONE;
default: throw new Error("Unknown blend mode: " + blendMode);
}
};
return WebGLBlendModeConverter;
}());
WebGLBlendModeConverter.ZERO = 0;
WebGLBlendModeConverter.ONE = 1;
WebGLBlendModeConverter.SRC_COLOR = 0x0300;
WebGLBlendModeConverter.ONE_MINUS_SRC_COLOR = 0x0301;
WebGLBlendModeConverter.SRC_ALPHA = 0x0302;
WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA = 0x0303;
WebGLBlendModeConverter.DST_ALPHA = 0x0304;
WebGLBlendModeConverter.ONE_MINUS_DST_ALPHA = 0x0305;
WebGLBlendModeConverter.DST_COLOR = 0x0306;
webgl.WebGLBlendModeConverter = WebGLBlendModeConverter;
})(webgl = spine.webgl || (spine.webgl = {})); })(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {})); })(spine || (spine = {}));
var spine; var spine;

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

File diff suppressed because one or more lines are too long

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

@ -1821,7 +1821,6 @@ var spine;
this.toLoad++; this.toLoad++;
var img = new Image(); var img = new Image();
img.crossOrigin = "anonymous"; img.crossOrigin = "anonymous";
img.src = path;
img.onload = function (ev) { img.onload = function (ev) {
var texture = _this.textureLoader(img); var texture = _this.textureLoader(img);
_this.assets[path] = texture; _this.assets[path] = texture;
@ -1837,6 +1836,7 @@ var spine;
if (error) if (error)
error(path, "Couldn't load image " + path); error(path, "Couldn't load image " + path);
}; };
img.src = path;
}; };
AssetManager.prototype.loadTextureData = function (path, data, success, error) { AssetManager.prototype.loadTextureData = function (path, data, success, error) {
var _this = this; var _this = this;
@ -1845,7 +1845,6 @@ var spine;
path = this.pathPrefix + path; path = this.pathPrefix + path;
this.toLoad++; this.toLoad++;
var img = new Image(); var img = new Image();
img.src = data;
img.onload = function (ev) { img.onload = function (ev) {
var texture = _this.textureLoader(img); var texture = _this.textureLoader(img);
_this.assets[path] = texture; _this.assets[path] = texture;
@ -1861,6 +1860,7 @@ var spine;
if (error) if (error)
error(path, "Couldn't load image " + path); error(path, "Couldn't load image " + path);
}; };
img.src = data;
}; };
AssetManager.prototype.get = function (path) { AssetManager.prototype.get = function (path) {
path = this.pathPrefix + path; path = this.pathPrefix + path;

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

File diff suppressed because one or more lines are too long

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

@ -1821,7 +1821,6 @@ var spine;
this.toLoad++; this.toLoad++;
var img = new Image(); var img = new Image();
img.crossOrigin = "anonymous"; img.crossOrigin = "anonymous";
img.src = path;
img.onload = function (ev) { img.onload = function (ev) {
var texture = _this.textureLoader(img); var texture = _this.textureLoader(img);
_this.assets[path] = texture; _this.assets[path] = texture;
@ -1837,6 +1836,7 @@ var spine;
if (error) if (error)
error(path, "Couldn't load image " + path); error(path, "Couldn't load image " + path);
}; };
img.src = path;
}; };
AssetManager.prototype.loadTextureData = function (path, data, success, error) { AssetManager.prototype.loadTextureData = function (path, data, success, error) {
var _this = this; var _this = this;
@ -1845,7 +1845,6 @@ var spine;
path = this.pathPrefix + path; path = this.pathPrefix + path;
this.toLoad++; this.toLoad++;
var img = new Image(); var img = new Image();
img.src = data;
img.onload = function (ev) { img.onload = function (ev) {
var texture = _this.textureLoader(img); var texture = _this.textureLoader(img);
_this.assets[path] = texture; _this.assets[path] = texture;
@ -1861,6 +1860,7 @@ var spine;
if (error) if (error)
error(path, "Couldn't load image " + path); error(path, "Couldn't load image " + path);
}; };
img.src = data;
}; };
AssetManager.prototype.get = function (path) { AssetManager.prototype.get = function (path) {
path = this.pathPrefix + path; path = this.pathPrefix + path;

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

File diff suppressed because one or more lines are too long

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

@ -1821,7 +1821,6 @@ var spine;
this.toLoad++; this.toLoad++;
var img = new Image(); var img = new Image();
img.crossOrigin = "anonymous"; img.crossOrigin = "anonymous";
img.src = path;
img.onload = function (ev) { img.onload = function (ev) {
var texture = _this.textureLoader(img); var texture = _this.textureLoader(img);
_this.assets[path] = texture; _this.assets[path] = texture;
@ -1837,6 +1836,7 @@ var spine;
if (error) if (error)
error(path, "Couldn't load image " + path); error(path, "Couldn't load image " + path);
}; };
img.src = path;
}; };
AssetManager.prototype.loadTextureData = function (path, data, success, error) { AssetManager.prototype.loadTextureData = function (path, data, success, error) {
var _this = this; var _this = this;
@ -1845,7 +1845,6 @@ var spine;
path = this.pathPrefix + path; path = this.pathPrefix + path;
this.toLoad++; this.toLoad++;
var img = new Image(); var img = new Image();
img.src = data;
img.onload = function (ev) { img.onload = function (ev) {
var texture = _this.textureLoader(img); var texture = _this.textureLoader(img);
_this.assets[path] = texture; _this.assets[path] = texture;
@ -1861,6 +1860,7 @@ var spine;
if (error) if (error)
error(path, "Couldn't load image " + path); error(path, "Couldn't load image " + path);
}; };
img.src = data;
}; };
AssetManager.prototype.get = function (path) { AssetManager.prototype.get = function (path) {
path = this.pathPrefix + path; path = this.pathPrefix + path;

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

File diff suppressed because one or more lines are too long

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

@ -1485,9 +1485,9 @@ declare module spine.webgl {
dispose(): void; dispose(): void;
} }
enum ShapeType { enum ShapeType {
Point, Point = 0,
Line, Line = 1,
Filled, Filled = 4,
} }
} }
declare module spine.webgl { declare module spine.webgl {
@ -1565,6 +1565,17 @@ declare module spine.webgl {
addRestorable(restorable: Restorable): void; addRestorable(restorable: Restorable): void;
removeRestorable(restorable: Restorable): void; removeRestorable(restorable: Restorable): void;
} }
function getSourceGLBlendMode(blendMode: BlendMode, premultipliedAlpha?: boolean): number; class WebGLBlendModeConverter {
function getDestGLBlendMode(blendMode: BlendMode): number; static ZERO: number;
static ONE: number;
static SRC_COLOR: number;
static ONE_MINUS_SRC_COLOR: number;
static SRC_ALPHA: number;
static ONE_MINUS_SRC_ALPHA: number;
static DST_ALPHA: number;
static ONE_MINUS_DST_ALPHA: number;
static DST_COLOR: number;
static getDestGLBlendMode(blendMode: BlendMode): number;
static getSourceGLBlendMode(blendMode: BlendMode, premultipliedAlpha?: boolean): number;
}
} }

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

@ -1821,7 +1821,6 @@ var spine;
this.toLoad++; this.toLoad++;
var img = new Image(); var img = new Image();
img.crossOrigin = "anonymous"; img.crossOrigin = "anonymous";
img.src = path;
img.onload = function (ev) { img.onload = function (ev) {
var texture = _this.textureLoader(img); var texture = _this.textureLoader(img);
_this.assets[path] = texture; _this.assets[path] = texture;
@ -1837,6 +1836,7 @@ var spine;
if (error) if (error)
error(path, "Couldn't load image " + path); error(path, "Couldn't load image " + path);
}; };
img.src = path;
}; };
AssetManager.prototype.loadTextureData = function (path, data, success, error) { AssetManager.prototype.loadTextureData = function (path, data, success, error) {
var _this = this; var _this = this;
@ -1845,7 +1845,6 @@ var spine;
path = this.pathPrefix + path; path = this.pathPrefix + path;
this.toLoad++; this.toLoad++;
var img = new Image(); var img = new Image();
img.src = data;
img.onload = function (ev) { img.onload = function (ev) {
var texture = _this.textureLoader(img); var texture = _this.textureLoader(img);
_this.assets[path] = texture; _this.assets[path] = texture;
@ -1861,6 +1860,7 @@ var spine;
if (error) if (error)
error(path, "Couldn't load image " + path); error(path, "Couldn't load image " + path);
}; };
img.src = data;
}; };
AssetManager.prototype.get = function (path) { AssetManager.prototype.get = function (path) {
path = this.pathPrefix + path; path = this.pathPrefix + path;
@ -6637,7 +6637,7 @@ var spine;
var logoHeight = this.logo.getImage().height; var logoHeight = this.logo.getImage().height;
var spinnerWidth = this.spinner.getImage().width; var spinnerWidth = this.spinner.getImage().width;
var spinnerHeight = this.spinner.getImage().height; var spinnerHeight = this.spinner.getImage().height;
renderer.batcher.setBlendMode(WebGLRenderingContext.SRC_ALPHA, WebGLRenderingContext.ONE_MINUS_SRC_ALPHA); renderer.batcher.setBlendMode(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
renderer.begin(); renderer.begin();
renderer.drawTexture(this.logo, (canvas.width - logoWidth) / 2, (canvas.height - logoHeight) / 2, logoWidth, logoHeight, this.tempColor); renderer.drawTexture(this.logo, (canvas.width - logoWidth) / 2, (canvas.height - logoHeight) / 2, logoWidth, logoHeight, this.tempColor);
renderer.drawTextureRotated(this.spinner, (canvas.width - spinnerWidth) / 2, (canvas.height - spinnerHeight) / 2, spinnerWidth, spinnerHeight, spinnerWidth / 2, spinnerHeight / 2, this.angle, this.tempColor); renderer.drawTextureRotated(this.spinner, (canvas.width - spinnerWidth) / 2, (canvas.height - spinnerHeight) / 2, spinnerWidth, spinnerHeight, spinnerWidth / 2, spinnerHeight / 2, this.angle, this.tempColor);
@ -7157,8 +7157,6 @@ var spine;
this.lastTexture = null; this.lastTexture = null;
this.verticesLength = 0; this.verticesLength = 0;
this.indicesLength = 0; this.indicesLength = 0;
this.srcBlend = WebGLRenderingContext.SRC_ALPHA;
this.dstBlend = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
if (maxVertices > 10920) if (maxVertices > 10920)
throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices); throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.context = context instanceof webgl.ManagedWebGLRenderingContext ? context : new webgl.ManagedWebGLRenderingContext(context); this.context = context instanceof webgl.ManagedWebGLRenderingContext ? context : new webgl.ManagedWebGLRenderingContext(context);
@ -7166,6 +7164,8 @@ var spine;
[new webgl.Position2Attribute(), new webgl.ColorAttribute(), new webgl.TexCoordAttribute(), new webgl.Color2Attribute()] : [new webgl.Position2Attribute(), new webgl.ColorAttribute(), new webgl.TexCoordAttribute(), new webgl.Color2Attribute()] :
[new webgl.Position2Attribute(), new webgl.ColorAttribute(), new webgl.TexCoordAttribute()]; [new webgl.Position2Attribute(), new webgl.ColorAttribute(), new webgl.TexCoordAttribute()];
this.mesh = new webgl.Mesh(context, attributes, maxVertices, maxVertices * 3); this.mesh = new webgl.Mesh(context, attributes, maxVertices, maxVertices * 3);
this.srcBlend = this.context.gl.SRC_ALPHA;
this.dstBlend = this.context.gl.ONE_MINUS_SRC_ALPHA;
} }
PolygonBatcher.prototype.begin = function (shader) { PolygonBatcher.prototype.begin = function (shader) {
var gl = this.context.gl; var gl = this.context.gl;
@ -7191,7 +7191,6 @@ var spine;
if (texture != this.lastTexture) { if (texture != this.lastTexture) {
this.flush(); this.flush();
this.lastTexture = texture; this.lastTexture = texture;
texture.bind();
} }
else if (this.verticesLength + vertices.length > this.mesh.getVertices().length || else if (this.verticesLength + vertices.length > this.mesh.getVertices().length ||
this.indicesLength + indices.length > this.mesh.getIndices().length) { this.indicesLength + indices.length > this.mesh.getIndices().length) {
@ -7211,6 +7210,7 @@ var spine;
var gl = this.context.gl; var gl = this.context.gl;
if (this.verticesLength == 0) if (this.verticesLength == 0)
return; return;
this.lastTexture.bind();
this.mesh.draw(this.shader, gl.TRIANGLES); this.mesh.draw(this.shader, gl.TRIANGLES);
this.verticesLength = 0; this.verticesLength = 0;
this.indicesLength = 0; this.indicesLength = 0;
@ -7618,6 +7618,7 @@ var spine;
if (renderer instanceof webgl.PolygonBatcher) { if (renderer instanceof webgl.PolygonBatcher) {
this.batcherShader.bind(); this.batcherShader.bind();
this.batcherShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values); this.batcherShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
this.batcherShader.setUniformi("u_texture", 0);
this.batcher.begin(this.batcherShader); this.batcher.begin(this.batcherShader);
this.activeRenderer = this.batcher; this.activeRenderer = this.batcher;
} }
@ -7816,12 +7817,12 @@ var spine;
this.color = new spine.Color(1, 1, 1, 1); this.color = new spine.Color(1, 1, 1, 1);
this.vertexIndex = 0; this.vertexIndex = 0;
this.tmp = new spine.Vector2(); this.tmp = new spine.Vector2();
this.srcBlend = WebGLRenderingContext.SRC_ALPHA;
this.dstBlend = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
if (maxVertices > 10920) if (maxVertices > 10920)
throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices); throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.context = context instanceof webgl.ManagedWebGLRenderingContext ? context : new webgl.ManagedWebGLRenderingContext(context); this.context = context instanceof webgl.ManagedWebGLRenderingContext ? context : new webgl.ManagedWebGLRenderingContext(context);
this.mesh = new webgl.Mesh(context, [new webgl.Position2Attribute(), new webgl.ColorAttribute()], maxVertices, 0); this.mesh = new webgl.Mesh(context, [new webgl.Position2Attribute(), new webgl.ColorAttribute()], maxVertices, 0);
this.srcBlend = this.context.gl.SRC_ALPHA;
this.dstBlend = this.context.gl.ONE_MINUS_SRC_ALPHA;
} }
ShapeRenderer.prototype.begin = function (shader) { ShapeRenderer.prototype.begin = function (shader) {
if (this.isDrawing) if (this.isDrawing)
@ -8122,9 +8123,9 @@ var spine;
webgl.ShapeRenderer = ShapeRenderer; webgl.ShapeRenderer = ShapeRenderer;
var ShapeType; var ShapeType;
(function (ShapeType) { (function (ShapeType) {
ShapeType[ShapeType["Point"] = WebGLRenderingContext.POINTS] = "Point"; ShapeType[ShapeType["Point"] = 0] = "Point";
ShapeType[ShapeType["Line"] = WebGLRenderingContext.LINES] = "Line"; ShapeType[ShapeType["Line"] = 1] = "Line";
ShapeType[ShapeType["Filled"] = WebGLRenderingContext.TRIANGLES] = "Filled"; ShapeType[ShapeType["Filled"] = 4] = "Filled";
})(ShapeType = webgl.ShapeType || (webgl.ShapeType = {})); })(ShapeType = webgl.ShapeType || (webgl.ShapeType = {}));
})(webgl = spine.webgl || (spine.webgl = {})); })(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {})); })(spine || (spine = {}));
@ -8417,7 +8418,7 @@ var spine;
var slotBlendMode = slot.data.blendMode; var slotBlendMode = slot.data.blendMode;
if (slotBlendMode != blendMode) { if (slotBlendMode != blendMode) {
blendMode = slotBlendMode; blendMode = slotBlendMode;
batcher.setBlendMode(webgl.getSourceGLBlendMode(blendMode, premultipliedAlpha), webgl.getDestGLBlendMode(blendMode)); batcher.setBlendMode(webgl.WebGLBlendModeConverter.getSourceGLBlendMode(blendMode, premultipliedAlpha), webgl.WebGLBlendModeConverter.getDestGLBlendMode(blendMode));
} }
if (clipper.isClipping()) { if (clipper.isClipping()) {
clipper.clipTriangles(renderable.vertices, renderable.numFloats, triangles, triangles.length, uvs, finalColor, darkColor, twoColorTint); clipper.clipTriangles(renderable.vertices, renderable.numFloats, triangles, triangles.length, uvs, finalColor, darkColor, twoColorTint);
@ -8591,27 +8592,40 @@ var spine;
return ManagedWebGLRenderingContext; return ManagedWebGLRenderingContext;
}()); }());
webgl.ManagedWebGLRenderingContext = ManagedWebGLRenderingContext; webgl.ManagedWebGLRenderingContext = ManagedWebGLRenderingContext;
function getSourceGLBlendMode(blendMode, premultipliedAlpha) { var WebGLBlendModeConverter = (function () {
if (premultipliedAlpha === void 0) { premultipliedAlpha = false; } function WebGLBlendModeConverter() {
switch (blendMode) {
case spine.BlendMode.Normal: return premultipliedAlpha ? WebGLRenderingContext.ONE : WebGLRenderingContext.SRC_ALPHA;
case spine.BlendMode.Additive: return premultipliedAlpha ? WebGLRenderingContext.ONE : WebGLRenderingContext.SRC_ALPHA;
case spine.BlendMode.Multiply: return WebGLRenderingContext.DST_COLOR;
case spine.BlendMode.Screen: return WebGLRenderingContext.ONE;
default: throw new Error("Unknown blend mode: " + blendMode);
} }
} WebGLBlendModeConverter.getDestGLBlendMode = function (blendMode) {
webgl.getSourceGLBlendMode = getSourceGLBlendMode; switch (blendMode) {
function getDestGLBlendMode(blendMode) { case spine.BlendMode.Normal: return WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA;
switch (blendMode) { case spine.BlendMode.Additive: return WebGLBlendModeConverter.ONE;
case spine.BlendMode.Normal: return WebGLRenderingContext.ONE_MINUS_SRC_ALPHA; case spine.BlendMode.Multiply: return WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA;
case spine.BlendMode.Additive: return WebGLRenderingContext.ONE; case spine.BlendMode.Screen: return WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA;
case spine.BlendMode.Multiply: return WebGLRenderingContext.ONE_MINUS_SRC_ALPHA; default: throw new Error("Unknown blend mode: " + blendMode);
case spine.BlendMode.Screen: return WebGLRenderingContext.ONE_MINUS_SRC_ALPHA; }
default: throw new Error("Unknown blend mode: " + blendMode); };
} WebGLBlendModeConverter.getSourceGLBlendMode = function (blendMode, premultipliedAlpha) {
} if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
webgl.getDestGLBlendMode = getDestGLBlendMode; switch (blendMode) {
case spine.BlendMode.Normal: return premultipliedAlpha ? WebGLBlendModeConverter.ONE : WebGLBlendModeConverter.SRC_ALPHA;
case spine.BlendMode.Additive: return premultipliedAlpha ? WebGLBlendModeConverter.ONE : WebGLBlendModeConverter.SRC_ALPHA;
case spine.BlendMode.Multiply: return WebGLBlendModeConverter.DST_COLOR;
case spine.BlendMode.Screen: return WebGLBlendModeConverter.ONE;
default: throw new Error("Unknown blend mode: " + blendMode);
}
};
return WebGLBlendModeConverter;
}());
WebGLBlendModeConverter.ZERO = 0;
WebGLBlendModeConverter.ONE = 1;
WebGLBlendModeConverter.SRC_COLOR = 0x0300;
WebGLBlendModeConverter.ONE_MINUS_SRC_COLOR = 0x0301;
WebGLBlendModeConverter.SRC_ALPHA = 0x0302;
WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA = 0x0303;
WebGLBlendModeConverter.DST_ALPHA = 0x0304;
WebGLBlendModeConverter.ONE_MINUS_DST_ALPHA = 0x0305;
WebGLBlendModeConverter.DST_COLOR = 0x0306;
webgl.WebGLBlendModeConverter = WebGLBlendModeConverter;
})(webgl = spine.webgl || (spine.webgl = {})); })(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {})); })(spine || (spine = {}));
//# sourceMappingURL=spine-webgl.js.map //# sourceMappingURL=spine-webgl.js.map

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

File diff suppressed because one or more lines are too long

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

@ -1485,9 +1485,9 @@ declare module spine.webgl {
dispose(): void; dispose(): void;
} }
enum ShapeType { enum ShapeType {
Point, Point = 0,
Line, Line = 1,
Filled, Filled = 4,
} }
} }
declare module spine.webgl { declare module spine.webgl {
@ -1565,8 +1565,19 @@ declare module spine.webgl {
addRestorable(restorable: Restorable): void; addRestorable(restorable: Restorable): void;
removeRestorable(restorable: Restorable): void; removeRestorable(restorable: Restorable): void;
} }
function getSourceGLBlendMode(blendMode: BlendMode, premultipliedAlpha?: boolean): number; class WebGLBlendModeConverter {
function getDestGLBlendMode(blendMode: BlendMode): number; static ZERO: number;
static ONE: number;
static SRC_COLOR: number;
static ONE_MINUS_SRC_COLOR: number;
static SRC_ALPHA: number;
static ONE_MINUS_SRC_ALPHA: number;
static DST_ALPHA: number;
static ONE_MINUS_DST_ALPHA: number;
static DST_COLOR: number;
static getDestGLBlendMode(blendMode: BlendMode): number;
static getSourceGLBlendMode(blendMode: BlendMode, premultipliedAlpha?: boolean): number;
}
} }
declare module spine { declare module spine {
class SpineWidget { class SpineWidget {

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

@ -1821,7 +1821,6 @@ var spine;
this.toLoad++; this.toLoad++;
var img = new Image(); var img = new Image();
img.crossOrigin = "anonymous"; img.crossOrigin = "anonymous";
img.src = path;
img.onload = function (ev) { img.onload = function (ev) {
var texture = _this.textureLoader(img); var texture = _this.textureLoader(img);
_this.assets[path] = texture; _this.assets[path] = texture;
@ -1837,6 +1836,7 @@ var spine;
if (error) if (error)
error(path, "Couldn't load image " + path); error(path, "Couldn't load image " + path);
}; };
img.src = path;
}; };
AssetManager.prototype.loadTextureData = function (path, data, success, error) { AssetManager.prototype.loadTextureData = function (path, data, success, error) {
var _this = this; var _this = this;
@ -1845,7 +1845,6 @@ var spine;
path = this.pathPrefix + path; path = this.pathPrefix + path;
this.toLoad++; this.toLoad++;
var img = new Image(); var img = new Image();
img.src = data;
img.onload = function (ev) { img.onload = function (ev) {
var texture = _this.textureLoader(img); var texture = _this.textureLoader(img);
_this.assets[path] = texture; _this.assets[path] = texture;
@ -1861,6 +1860,7 @@ var spine;
if (error) if (error)
error(path, "Couldn't load image " + path); error(path, "Couldn't load image " + path);
}; };
img.src = data;
}; };
AssetManager.prototype.get = function (path) { AssetManager.prototype.get = function (path) {
path = this.pathPrefix + path; path = this.pathPrefix + path;
@ -6637,7 +6637,7 @@ var spine;
var logoHeight = this.logo.getImage().height; var logoHeight = this.logo.getImage().height;
var spinnerWidth = this.spinner.getImage().width; var spinnerWidth = this.spinner.getImage().width;
var spinnerHeight = this.spinner.getImage().height; var spinnerHeight = this.spinner.getImage().height;
renderer.batcher.setBlendMode(WebGLRenderingContext.SRC_ALPHA, WebGLRenderingContext.ONE_MINUS_SRC_ALPHA); renderer.batcher.setBlendMode(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
renderer.begin(); renderer.begin();
renderer.drawTexture(this.logo, (canvas.width - logoWidth) / 2, (canvas.height - logoHeight) / 2, logoWidth, logoHeight, this.tempColor); renderer.drawTexture(this.logo, (canvas.width - logoWidth) / 2, (canvas.height - logoHeight) / 2, logoWidth, logoHeight, this.tempColor);
renderer.drawTextureRotated(this.spinner, (canvas.width - spinnerWidth) / 2, (canvas.height - spinnerHeight) / 2, spinnerWidth, spinnerHeight, spinnerWidth / 2, spinnerHeight / 2, this.angle, this.tempColor); renderer.drawTextureRotated(this.spinner, (canvas.width - spinnerWidth) / 2, (canvas.height - spinnerHeight) / 2, spinnerWidth, spinnerHeight, spinnerWidth / 2, spinnerHeight / 2, this.angle, this.tempColor);
@ -7157,8 +7157,6 @@ var spine;
this.lastTexture = null; this.lastTexture = null;
this.verticesLength = 0; this.verticesLength = 0;
this.indicesLength = 0; this.indicesLength = 0;
this.srcBlend = WebGLRenderingContext.SRC_ALPHA;
this.dstBlend = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
if (maxVertices > 10920) if (maxVertices > 10920)
throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices); throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.context = context instanceof webgl.ManagedWebGLRenderingContext ? context : new webgl.ManagedWebGLRenderingContext(context); this.context = context instanceof webgl.ManagedWebGLRenderingContext ? context : new webgl.ManagedWebGLRenderingContext(context);
@ -7166,6 +7164,8 @@ var spine;
[new webgl.Position2Attribute(), new webgl.ColorAttribute(), new webgl.TexCoordAttribute(), new webgl.Color2Attribute()] : [new webgl.Position2Attribute(), new webgl.ColorAttribute(), new webgl.TexCoordAttribute(), new webgl.Color2Attribute()] :
[new webgl.Position2Attribute(), new webgl.ColorAttribute(), new webgl.TexCoordAttribute()]; [new webgl.Position2Attribute(), new webgl.ColorAttribute(), new webgl.TexCoordAttribute()];
this.mesh = new webgl.Mesh(context, attributes, maxVertices, maxVertices * 3); this.mesh = new webgl.Mesh(context, attributes, maxVertices, maxVertices * 3);
this.srcBlend = this.context.gl.SRC_ALPHA;
this.dstBlend = this.context.gl.ONE_MINUS_SRC_ALPHA;
} }
PolygonBatcher.prototype.begin = function (shader) { PolygonBatcher.prototype.begin = function (shader) {
var gl = this.context.gl; var gl = this.context.gl;
@ -7191,7 +7191,6 @@ var spine;
if (texture != this.lastTexture) { if (texture != this.lastTexture) {
this.flush(); this.flush();
this.lastTexture = texture; this.lastTexture = texture;
texture.bind();
} }
else if (this.verticesLength + vertices.length > this.mesh.getVertices().length || else if (this.verticesLength + vertices.length > this.mesh.getVertices().length ||
this.indicesLength + indices.length > this.mesh.getIndices().length) { this.indicesLength + indices.length > this.mesh.getIndices().length) {
@ -7211,6 +7210,7 @@ var spine;
var gl = this.context.gl; var gl = this.context.gl;
if (this.verticesLength == 0) if (this.verticesLength == 0)
return; return;
this.lastTexture.bind();
this.mesh.draw(this.shader, gl.TRIANGLES); this.mesh.draw(this.shader, gl.TRIANGLES);
this.verticesLength = 0; this.verticesLength = 0;
this.indicesLength = 0; this.indicesLength = 0;
@ -7618,6 +7618,7 @@ var spine;
if (renderer instanceof webgl.PolygonBatcher) { if (renderer instanceof webgl.PolygonBatcher) {
this.batcherShader.bind(); this.batcherShader.bind();
this.batcherShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values); this.batcherShader.setUniform4x4f(webgl.Shader.MVP_MATRIX, this.camera.projectionView.values);
this.batcherShader.setUniformi("u_texture", 0);
this.batcher.begin(this.batcherShader); this.batcher.begin(this.batcherShader);
this.activeRenderer = this.batcher; this.activeRenderer = this.batcher;
} }
@ -7816,12 +7817,12 @@ var spine;
this.color = new spine.Color(1, 1, 1, 1); this.color = new spine.Color(1, 1, 1, 1);
this.vertexIndex = 0; this.vertexIndex = 0;
this.tmp = new spine.Vector2(); this.tmp = new spine.Vector2();
this.srcBlend = WebGLRenderingContext.SRC_ALPHA;
this.dstBlend = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
if (maxVertices > 10920) if (maxVertices > 10920)
throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices); throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.context = context instanceof webgl.ManagedWebGLRenderingContext ? context : new webgl.ManagedWebGLRenderingContext(context); this.context = context instanceof webgl.ManagedWebGLRenderingContext ? context : new webgl.ManagedWebGLRenderingContext(context);
this.mesh = new webgl.Mesh(context, [new webgl.Position2Attribute(), new webgl.ColorAttribute()], maxVertices, 0); this.mesh = new webgl.Mesh(context, [new webgl.Position2Attribute(), new webgl.ColorAttribute()], maxVertices, 0);
this.srcBlend = this.context.gl.SRC_ALPHA;
this.dstBlend = this.context.gl.ONE_MINUS_SRC_ALPHA;
} }
ShapeRenderer.prototype.begin = function (shader) { ShapeRenderer.prototype.begin = function (shader) {
if (this.isDrawing) if (this.isDrawing)
@ -8122,9 +8123,9 @@ var spine;
webgl.ShapeRenderer = ShapeRenderer; webgl.ShapeRenderer = ShapeRenderer;
var ShapeType; var ShapeType;
(function (ShapeType) { (function (ShapeType) {
ShapeType[ShapeType["Point"] = WebGLRenderingContext.POINTS] = "Point"; ShapeType[ShapeType["Point"] = 0] = "Point";
ShapeType[ShapeType["Line"] = WebGLRenderingContext.LINES] = "Line"; ShapeType[ShapeType["Line"] = 1] = "Line";
ShapeType[ShapeType["Filled"] = WebGLRenderingContext.TRIANGLES] = "Filled"; ShapeType[ShapeType["Filled"] = 4] = "Filled";
})(ShapeType = webgl.ShapeType || (webgl.ShapeType = {})); })(ShapeType = webgl.ShapeType || (webgl.ShapeType = {}));
})(webgl = spine.webgl || (spine.webgl = {})); })(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {})); })(spine || (spine = {}));
@ -8417,7 +8418,7 @@ var spine;
var slotBlendMode = slot.data.blendMode; var slotBlendMode = slot.data.blendMode;
if (slotBlendMode != blendMode) { if (slotBlendMode != blendMode) {
blendMode = slotBlendMode; blendMode = slotBlendMode;
batcher.setBlendMode(webgl.getSourceGLBlendMode(blendMode, premultipliedAlpha), webgl.getDestGLBlendMode(blendMode)); batcher.setBlendMode(webgl.WebGLBlendModeConverter.getSourceGLBlendMode(blendMode, premultipliedAlpha), webgl.WebGLBlendModeConverter.getDestGLBlendMode(blendMode));
} }
if (clipper.isClipping()) { if (clipper.isClipping()) {
clipper.clipTriangles(renderable.vertices, renderable.numFloats, triangles, triangles.length, uvs, finalColor, darkColor, twoColorTint); clipper.clipTriangles(renderable.vertices, renderable.numFloats, triangles, triangles.length, uvs, finalColor, darkColor, twoColorTint);
@ -8591,27 +8592,40 @@ var spine;
return ManagedWebGLRenderingContext; return ManagedWebGLRenderingContext;
}()); }());
webgl.ManagedWebGLRenderingContext = ManagedWebGLRenderingContext; webgl.ManagedWebGLRenderingContext = ManagedWebGLRenderingContext;
function getSourceGLBlendMode(blendMode, premultipliedAlpha) { var WebGLBlendModeConverter = (function () {
if (premultipliedAlpha === void 0) { premultipliedAlpha = false; } function WebGLBlendModeConverter() {
switch (blendMode) {
case spine.BlendMode.Normal: return premultipliedAlpha ? WebGLRenderingContext.ONE : WebGLRenderingContext.SRC_ALPHA;
case spine.BlendMode.Additive: return premultipliedAlpha ? WebGLRenderingContext.ONE : WebGLRenderingContext.SRC_ALPHA;
case spine.BlendMode.Multiply: return WebGLRenderingContext.DST_COLOR;
case spine.BlendMode.Screen: return WebGLRenderingContext.ONE;
default: throw new Error("Unknown blend mode: " + blendMode);
} }
} WebGLBlendModeConverter.getDestGLBlendMode = function (blendMode) {
webgl.getSourceGLBlendMode = getSourceGLBlendMode; switch (blendMode) {
function getDestGLBlendMode(blendMode) { case spine.BlendMode.Normal: return WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA;
switch (blendMode) { case spine.BlendMode.Additive: return WebGLBlendModeConverter.ONE;
case spine.BlendMode.Normal: return WebGLRenderingContext.ONE_MINUS_SRC_ALPHA; case spine.BlendMode.Multiply: return WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA;
case spine.BlendMode.Additive: return WebGLRenderingContext.ONE; case spine.BlendMode.Screen: return WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA;
case spine.BlendMode.Multiply: return WebGLRenderingContext.ONE_MINUS_SRC_ALPHA; default: throw new Error("Unknown blend mode: " + blendMode);
case spine.BlendMode.Screen: return WebGLRenderingContext.ONE_MINUS_SRC_ALPHA; }
default: throw new Error("Unknown blend mode: " + blendMode); };
} WebGLBlendModeConverter.getSourceGLBlendMode = function (blendMode, premultipliedAlpha) {
} if (premultipliedAlpha === void 0) { premultipliedAlpha = false; }
webgl.getDestGLBlendMode = getDestGLBlendMode; switch (blendMode) {
case spine.BlendMode.Normal: return premultipliedAlpha ? WebGLBlendModeConverter.ONE : WebGLBlendModeConverter.SRC_ALPHA;
case spine.BlendMode.Additive: return premultipliedAlpha ? WebGLBlendModeConverter.ONE : WebGLBlendModeConverter.SRC_ALPHA;
case spine.BlendMode.Multiply: return WebGLBlendModeConverter.DST_COLOR;
case spine.BlendMode.Screen: return WebGLBlendModeConverter.ONE;
default: throw new Error("Unknown blend mode: " + blendMode);
}
};
return WebGLBlendModeConverter;
}());
WebGLBlendModeConverter.ZERO = 0;
WebGLBlendModeConverter.ONE = 1;
WebGLBlendModeConverter.SRC_COLOR = 0x0300;
WebGLBlendModeConverter.ONE_MINUS_SRC_COLOR = 0x0301;
WebGLBlendModeConverter.SRC_ALPHA = 0x0302;
WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA = 0x0303;
WebGLBlendModeConverter.DST_ALPHA = 0x0304;
WebGLBlendModeConverter.ONE_MINUS_DST_ALPHA = 0x0305;
WebGLBlendModeConverter.DST_COLOR = 0x0306;
webgl.WebGLBlendModeConverter = WebGLBlendModeConverter;
})(webgl = spine.webgl || (spine.webgl = {})); })(webgl = spine.webgl || (spine.webgl = {}));
})(spine || (spine = {})); })(spine || (spine = {}));
var spine; var spine;

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

File diff suppressed because one or more lines are too long

4
spine-ts/core/src/AssetManager.ts
View File

@ -74,7 +74,6 @@ module spine {
this.toLoad++; this.toLoad++;
let img = new Image(); let img = new Image();
img.crossOrigin = "anonymous"; img.crossOrigin = "anonymous";
img.src = path;
img.onload = (ev) => { img.onload = (ev) => {
let texture = this.textureLoader(img); let texture = this.textureLoader(img);
this.assets[path] = texture; this.assets[path] = texture;
@ -88,6 +87,7 @@ module spine {
this.loaded++; this.loaded++;
if (error) error(path, `Couldn't load image ${path}`); if (error) error(path, `Couldn't load image ${path}`);
} }
img.src = path;
} }
loadTextureData(path: string, data: string, loadTextureData(path: string, data: string,
@ -97,7 +97,6 @@ module spine {
path = this.pathPrefix + path; path = this.pathPrefix + path;
this.toLoad++; this.toLoad++;
let img = new Image(); let img = new Image();
img.src = data;
img.onload = (ev) => { img.onload = (ev) => {
let texture = this.textureLoader(img); let texture = this.textureLoader(img);
this.assets[path] = texture; this.assets[path] = texture;
@ -111,6 +110,7 @@ module spine {
this.loaded++; this.loaded++;
if (error) error(path, `Couldn't load image ${path}`); if (error) error(path, `Couldn't load image ${path}`);
} }
img.src = data;
} }
get (path: string) { get (path: string) {

10
spine-ts/webgl/example/test.html
View File

@ -8,7 +8,7 @@
</style> </style>
<body> <body>
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div> <div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
<canvas id="canvas"></canvas> <canvas id="canvas" style="background: red;"></canvas>
</body> </body>
<script> <script>
@ -27,7 +27,7 @@ var renderMean = new spine.WindowedMean();
function init() { function init() {
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
context = new spine.webgl.ManagedWebGLRenderingContext(canvas); context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
gl = context.gl; gl = context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, context); renderer = new spine.webgl.SceneRenderer(canvas, context);
@ -43,7 +43,7 @@ function init() {
assetManager.loadTexture(FILE + ".png"); assetManager.loadTexture(FILE + ".png");
assetManager.loadText(FILE + ".atlas"); assetManager.loadText(FILE + ".atlas");
assetManager.loadText("raptor-clipped.json"); assetManager.loadText("raptor.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
requestAnimationFrame(load); requestAnimationFrame(load);
@ -58,7 +58,7 @@ function load() {
var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
skeletonJson.scale = SCALE; skeletonJson.scale = SCALE;
var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get("raptor-clipped.json"))); var skeletonData = skeletonJson.readSkeletonData(JSON.parse(assetManager.get("raptor.json")));
for (var i = 0; i < NUM_SKELETONS; i++) { for (var i = 0; i < NUM_SKELETONS; i++) {
skeleton = new spine.Skeleton(skeletonData); skeleton = new spine.Skeleton(skeletonData);
@ -106,7 +106,7 @@ function render() {
renderer.begin(); renderer.begin();
for (var i = 0; i < skeletons.length; i++) { for (var i = 0; i < skeletons.length; i++) {
var skeleton = skeletons[i].skeleton; var skeleton = skeletons[i].skeleton;
renderer.drawSkeleton(skeleton); renderer.drawSkeleton(skeleton, false);
renderer.drawSkeletonDebug(skeleton); renderer.drawSkeletonDebug(skeleton);
} }
renderer.end(); renderer.end();

70
spine-ts/webgl/example/test2.html Normal file
View File

@ -0,0 +1,70 @@
<html>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
</style>
<body>
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
<canvas id="canvas" style="background: #ff00ff;"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
var context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
var gl = context.gl;
var vertices = [ -1, -1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
1, -1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
0, 1, 1, 1, 1, 1, 0.5, 1, 0, 0, 0, 0];
var indices = [ 0, 1, 2 ];
var mesh = new spine.webgl.Mesh(context,
[new spine.webgl.Position2Attribute(), new spine.webgl.ColorAttribute(), new spine.webgl.TexCoordAttribute()],
10920, 10920 * 3);
mesh.setVertices(vertices);
mesh.setIndices(indices);
var shader = spine.webgl.Shader.newTwoColoredTextured(context);
var assetManager = new spine.webgl.AssetManager(context);
assetManager.loadTexture("assets/spineboy.png");
var camMatrix = new spine.webgl.Matrix4();
var batcher = new spine.webgl.PolygonBatcher(context, true);
requestAnimationFrame(load);
function load () {
if (assetManager.isLoadingComplete()) {
texture = assetManager.get("assets/spineboy.png");
requestAnimationFrame(render);
} else requestAnimationFrame(load);
}
function render() {
gl.clearColor(1, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
shader.bind();
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, camMatrix.values);
shader.setUniformi("u_texture", 0);
if (texture != null) {
/*gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
mesh.setVertices(vertices);
mesh.setIndices(indices);
mesh.draw(shader, gl.TRIANGLES);*/
batcher.begin(shader);
batcher.draw(texture, vertices, indices);
batcher.end();
}
shader.unbind();
requestAnimationFrame(render);
}
</script>

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

@ -125,7 +125,7 @@ module spine.webgl {
let spinnerWidth = this.spinner.getImage().width; let spinnerWidth = this.spinner.getImage().width;
let spinnerHeight = this.spinner.getImage().height; let spinnerHeight = this.spinner.getImage().height;
renderer.batcher.setBlendMode(WebGLRenderingContext.SRC_ALPHA, WebGLRenderingContext.ONE_MINUS_SRC_ALPHA); renderer.batcher.setBlendMode(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
renderer.begin(); renderer.begin();
renderer.drawTexture(this.logo, (canvas.width - logoWidth) / 2, (canvas.height - logoHeight) / 2, logoWidth, logoHeight, this.tempColor); renderer.drawTexture(this.logo, (canvas.width - logoWidth) / 2, (canvas.height - logoHeight) / 2, logoWidth, logoHeight, this.tempColor);
renderer.drawTextureRotated(this.spinner, (canvas.width - spinnerWidth) / 2, (canvas.height - spinnerHeight) / 2, spinnerWidth, spinnerHeight, spinnerWidth / 2, spinnerHeight / 2, this.angle, this.tempColor); renderer.drawTextureRotated(this.spinner, (canvas.width - spinnerWidth) / 2, (canvas.height - spinnerHeight) / 2, spinnerWidth, spinnerHeight, spinnerWidth / 2, spinnerHeight / 2, this.angle, this.tempColor);

8
spine-ts/webgl/src/PolygonBatcher.ts
View File

@ -38,8 +38,8 @@ module spine.webgl {
private lastTexture: GLTexture = null; private lastTexture: GLTexture = null;
private verticesLength = 0; private verticesLength = 0;
private indicesLength = 0; private indicesLength = 0;
private srcBlend: number = WebGLRenderingContext.SRC_ALPHA; private srcBlend: number;
private dstBlend: number = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA; private dstBlend: number;
constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint: boolean = true, maxVertices: number = 10920) { constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint: boolean = true, maxVertices: number = 10920) {
if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices); if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
@ -48,6 +48,8 @@ module spine.webgl {
[new Position2Attribute(), new ColorAttribute(), new TexCoordAttribute(), new Color2Attribute()] : [new Position2Attribute(), new ColorAttribute(), new TexCoordAttribute(), new Color2Attribute()] :
[new Position2Attribute(), new ColorAttribute(), new TexCoordAttribute()]; [new Position2Attribute(), new ColorAttribute(), new TexCoordAttribute()];
this.mesh = new Mesh(context, attributes, maxVertices, maxVertices * 3); this.mesh = new Mesh(context, attributes, maxVertices, maxVertices * 3);
this.srcBlend = this.context.gl.SRC_ALPHA;
this.dstBlend = this.context.gl.ONE_MINUS_SRC_ALPHA;
} }
begin (shader: Shader) { begin (shader: Shader) {
@ -76,7 +78,6 @@ module spine.webgl {
if (texture != this.lastTexture) { if (texture != this.lastTexture) {
this.flush(); this.flush();
this.lastTexture = texture; this.lastTexture = texture;
texture.bind();
} else if (this.verticesLength + vertices.length > this.mesh.getVertices().length || } else if (this.verticesLength + vertices.length > this.mesh.getVertices().length ||
this.indicesLength + indices.length > this.mesh.getIndices().length) { this.indicesLength + indices.length > this.mesh.getIndices().length) {
this.flush(); this.flush();
@ -98,6 +99,7 @@ module spine.webgl {
let gl = this.context.gl; let gl = this.context.gl;
if (this.verticesLength == 0) return; if (this.verticesLength == 0) return;
this.lastTexture.bind();
this.mesh.draw(this.shader, gl.TRIANGLES); this.mesh.draw(this.shader, gl.TRIANGLES);
this.verticesLength = 0; this.verticesLength = 0;

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

@ -417,6 +417,7 @@ module spine.webgl {
if (renderer instanceof PolygonBatcher) { if (renderer instanceof PolygonBatcher) {
this.batcherShader.bind(); this.batcherShader.bind();
this.batcherShader.setUniform4x4f(Shader.MVP_MATRIX, this.camera.projectionView.values); this.batcherShader.setUniform4x4f(Shader.MVP_MATRIX, this.camera.projectionView.values);
this.batcherShader.setUniformi("u_texture", 0);
this.batcher.begin(this.batcherShader); this.batcher.begin(this.batcherShader);
this.activeRenderer = this.batcher; this.activeRenderer = this.batcher;
} else if (renderer instanceof ShapeRenderer) { } else if (renderer instanceof ShapeRenderer) {

12
spine-ts/webgl/src/ShapeRenderer.ts
View File

@ -38,13 +38,15 @@ module spine.webgl {
private shader: Shader; private shader: Shader;
private vertexIndex = 0; private vertexIndex = 0;
private tmp = new Vector2(); private tmp = new Vector2();
private srcBlend: number = WebGLRenderingContext.SRC_ALPHA; private srcBlend: number;
private dstBlend: number = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA; private dstBlend: number;
constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices: number = 10920) { constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices: number = 10920) {
if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices); if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices);
this.context = context instanceof ManagedWebGLRenderingContext? context : new ManagedWebGLRenderingContext(context); this.context = context instanceof ManagedWebGLRenderingContext? context : new ManagedWebGLRenderingContext(context);
this.mesh = new Mesh(context, [new Position2Attribute(), new ColorAttribute()], maxVertices, 0); this.mesh = new Mesh(context, [new Position2Attribute(), new ColorAttribute()], maxVertices, 0);
this.srcBlend = this.context.gl.SRC_ALPHA;
this.dstBlend = this.context.gl.ONE_MINUS_SRC_ALPHA;
} }
begin (shader: Shader) { begin (shader: Shader) {
@ -336,8 +338,8 @@ module spine.webgl {
} }
export enum ShapeType { export enum ShapeType {
Point = WebGLRenderingContext.POINTS, Point = 0x0000,
Line = WebGLRenderingContext.LINES, Line = 0x0001,
Filled = WebGLRenderingContext.TRIANGLES Filled = 0x0004
} }
} }

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

@ -118,7 +118,7 @@ module spine.webgl {
let slotBlendMode = slot.data.blendMode; let slotBlendMode = slot.data.blendMode;
if (slotBlendMode != blendMode) { if (slotBlendMode != blendMode) {
blendMode = slotBlendMode; blendMode = slotBlendMode;
batcher.setBlendMode(getSourceGLBlendMode(blendMode, premultipliedAlpha), getDestGLBlendMode(blendMode)); batcher.setBlendMode(WebGLBlendModeConverter.getSourceGLBlendMode(blendMode, premultipliedAlpha), WebGLBlendModeConverter.getDestGLBlendMode(blendMode));
} }
if (clipper.isClipping()) { if (clipper.isClipping()) {

44
spine-ts/webgl/src/WebGL.ts
View File

@ -67,23 +67,35 @@ module spine.webgl {
} }
} }
export function getSourceGLBlendMode (blendMode: BlendMode, premultipliedAlpha: boolean = false) { export class WebGLBlendModeConverter {
switch(blendMode) { static ZERO = 0;
case BlendMode.Normal: return premultipliedAlpha? WebGLRenderingContext.ONE : WebGLRenderingContext.SRC_ALPHA; static ONE = 1;
case BlendMode.Additive: return premultipliedAlpha? WebGLRenderingContext.ONE : WebGLRenderingContext.SRC_ALPHA; static SRC_COLOR = 0x0300;
case BlendMode.Multiply: return WebGLRenderingContext.DST_COLOR; static ONE_MINUS_SRC_COLOR = 0x0301;
case BlendMode.Screen: return WebGLRenderingContext.ONE; static SRC_ALPHA = 0x0302;
default: throw new Error("Unknown blend mode: " + blendMode); static ONE_MINUS_SRC_ALPHA = 0x0303;
} static DST_ALPHA = 0x0304;
} static ONE_MINUS_DST_ALPHA = 0x0305;
static DST_COLOR = 0x0306
export function getDestGLBlendMode (blendMode: BlendMode) { static getDestGLBlendMode (blendMode: BlendMode) {
switch(blendMode) { switch(blendMode) {
case BlendMode.Normal: return WebGLRenderingContext.ONE_MINUS_SRC_ALPHA; case BlendMode.Normal: return WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA;
case BlendMode.Additive: return WebGLRenderingContext.ONE; case BlendMode.Additive: return WebGLBlendModeConverter.ONE;
case BlendMode.Multiply: return WebGLRenderingContext.ONE_MINUS_SRC_ALPHA; case BlendMode.Multiply: return WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA;
case BlendMode.Screen: return WebGLRenderingContext.ONE_MINUS_SRC_ALPHA; case BlendMode.Screen: return WebGLBlendModeConverter.ONE_MINUS_SRC_ALPHA;
default: throw new Error("Unknown blend mode: " + blendMode); default: throw new Error("Unknown blend mode: " + blendMode);
}
}
static getSourceGLBlendMode (blendMode: BlendMode, premultipliedAlpha: boolean = false) {
switch(blendMode) {
case BlendMode.Normal: return premultipliedAlpha? WebGLBlendModeConverter.ONE : WebGLBlendModeConverter.SRC_ALPHA;
case BlendMode.Additive: return premultipliedAlpha? WebGLBlendModeConverter.ONE : WebGLBlendModeConverter.SRC_ALPHA;
case BlendMode.Multiply: return WebGLBlendModeConverter.DST_COLOR;
case BlendMode.Screen: return WebGLBlendModeConverter.ONE;
default: throw new Error("Unknown blend mode: " + blendMode);
}
} }
} }
} }