[ts][webgl][widget] Fixed WebGL context loss in WebGL and widget backend. See CHANGELOG for details.

CHANGELOG.md

@@ -125,6 +125,14 @@
   * Added `SkeletonClipper` and `ConvexDecomposer`, used to implement software clipping of attachments.
 
 ### WebGL backend
+ * Fixed WebGL context loss
+   * Added `Restorable` interface, implemented by any WebGL resource that needs restoration after a context loss. All WebGL resource classes (`Shader`, `Mesh`, `GLTexture`) implement this interface.
+   * Added `ManagedWebGLRenderingContext`. Handles setup of a `WebGLRenderingContext` given a canvas element and restoration of WebGL resources (`Shader`, `Mesh`, `GLTexture`) on WebGL context loss. WebGL resources register themselves with the `ManagedWebGLRenderingContext`. If the context is informed of a context loss and restoration, the registered WebGL resources' `restore()` method is called. The `restore()` method implementation on each resource type will recreate the GPU side objects.
+   * All classes that previously took a `WebGLRenderingContext` in the constructor now also allow a `ManagedWebGLRenderingContext`. This ensures existing applications do not break.
+   * To use automatic context restauration:
+    1. Create or fetch a canvas element from the DOM
+    2. Instantiate a `ManagedWebGLRenderingContext`, passing the canvas to the constructor. This will setup a `WebGLRenderingContext` internally and manage context loss/restoration.
+    3. Pass the `ManagedWebGLRenderingContext` to the constructors of classes that you previously passed a `WebGLRenderingContext` to (`AssetManager`, `GLTexture`, `Mesh`, `Shader`, `PolygonBatcher`, `SceneRenderer`, `ShapeRenderer`, `SkeletonRenderer`, `SkeletonDebugRenderer`).
  * Fixed renderer to work with 3.6 changes.
  * Added support for two color tinting.
  * Improved performance by using `DYNAMIC_DRAW` for vertex buffer objects and fixing bug that copied to much data to the GPU each frame in `PolygonBatcher`/`Mesh`.
@@ -141,5 +149,6 @@
  * Added clipping support
 
 ### Widget backend
- * Fixed renderer to work for 3.6 changes. Supports two color tinting & clipping (see webgl backend changes for details).
+ * Fixed WebGL context loss (see WebGL backend changes). Enabled automatically.
+ * Fixed renderer to work for 3.6 changes. Supports two color tinting & clipping (see WebGL backend changes for details).
  * Added fields `atlasContent`, `atlasPagesContent`, and `jsonContent` to `WidgetConfiguration` allowing you to directly pass the contents of the `.atlas`, atlas page `.png` files, and the `.json` file without having to do a request. See `README.md` and the example for details.

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

@@ -1,97 +1,3 @@
-declare module spine {
-	class AssetManager implements Disposable {
-		private pathPrefix;
-		private textureLoader;
-		private assets;
-		private errors;
-		private toLoad;
-		private loaded;
-		constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
-		loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
-		loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
-		loadTextureData(path: string, data: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
-		get(path: string): any;
-		remove(path: string): void;
-		removeAll(): void;
-		isLoadingComplete(): boolean;
-		getToLoad(): number;
-		getLoaded(): number;
-		dispose(): void;
-		hasErrors(): boolean;
-		getErrors(): Map<string>;
-	}
-}
-declare module spine.canvas {
-	class AssetManager extends spine.AssetManager {
-		constructor(pathPrefix?: string);
-	}
-}
-declare module spine {
-	abstract class Texture {
-		protected _image: HTMLImageElement;
-		constructor(image: HTMLImageElement);
-		getImage(): HTMLImageElement;
-		abstract setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
-		abstract setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
-		abstract dispose(): void;
-		static filterFromString(text: string): TextureFilter;
-		static wrapFromString(text: string): TextureWrap;
-	}
-	enum TextureFilter {
-		Nearest = 9728,
-		Linear = 9729,
-		MipMap = 9987,
-		MipMapNearestNearest = 9984,
-		MipMapLinearNearest = 9985,
-		MipMapNearestLinear = 9986,
-		MipMapLinearLinear = 9987,
-	}
-	enum TextureWrap {
-		MirroredRepeat = 33648,
-		ClampToEdge = 33071,
-		Repeat = 10497,
-	}
-	class TextureRegion {
-		renderObject: any;
-		u: number;
-		v: number;
-		u2: number;
-		v2: number;
-		width: number;
-		height: number;
-		rotate: boolean;
-		offsetX: number;
-		offsetY: number;
-		originalWidth: number;
-		originalHeight: number;
-	}
-}
-declare module spine.canvas {
-	class CanvasTexture extends Texture {
-		constructor(image: HTMLImageElement);
-		setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
-		setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
-		dispose(): void;
-	}
-}
-declare module spine.canvas {
-	class SkeletonRenderer {
-		static QUAD_TRIANGLES: number[];
-		static VERTEX_SIZE: number;
-		private ctx;
-		triangleRendering: boolean;
-		debugRendering: boolean;
-		private vertices;
-		private tempColor;
-		constructor(context: CanvasRenderingContext2D);
-		draw(skeleton: Skeleton): void;
-		private drawImages(skeleton);
-		private drawTriangles(skeleton);
-		private drawTriangle(img, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2);
-		private computeRegionVertices(slot, region, pma);
-		private computeMeshVertices(slot, mesh, pma);
-	}
-}
 declare module spine {
 	class Animation {
 		name: string;
@@ -446,33 +352,32 @@ declare module spine {
 	}
 }
 declare module spine {
-	class AtlasAttachmentLoader implements AttachmentLoader {
-		atlas: TextureAtlas;
-		constructor(atlas: TextureAtlas);
-		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 {
-	abstract class Attachment {
-		name: string;
-		constructor(name: string);
-	}
-	abstract class VertexAttachment extends Attachment {
-		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;
+	class AssetManager implements Disposable {
+		private pathPrefix;
+		private textureLoader;
+		private assets;
+		private errors;
+		private toLoad;
+		private loaded;
+		constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
+		loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
+		loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
+		loadTextureData(path: string, data: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
+		get(path: string): any;
+		remove(path: string): void;
+		removeAll(): void;
+		isLoadingComplete(): boolean;
+		getToLoad(): number;
+		getLoaded(): number;
+		dispose(): void;
+		hasErrors(): boolean;
+		getErrors(): Map<string>;
 	}
 }
 declare module spine {
-	interface AttachmentLoader {
+	class AtlasAttachmentLoader implements AttachmentLoader {
+		atlas: TextureAtlas;
+		constructor(atlas: TextureAtlas);
 		newRegionAttachment(skin: Skin, name: string, path: string): RegionAttachment;
 		newMeshAttachment(skin: Skin, name: string, path: string): MeshAttachment;
 		newBoundingBoxAttachment(skin: Skin, name: string): BoundingBoxAttachment;
@@ -481,130 +386,6 @@ declare module spine {
 		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,
@@ -1005,6 +786,46 @@ declare module spine {
 		constructor(index: number, name: string, boneData: BoneData);
 	}
 }
+declare module spine {
+	abstract class Texture {
+		protected _image: HTMLImageElement;
+		constructor(image: HTMLImageElement);
+		getImage(): HTMLImageElement;
+		abstract setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
+		abstract setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
+		abstract dispose(): void;
+		static filterFromString(text: string): TextureFilter;
+		static wrapFromString(text: string): TextureWrap;
+	}
+	enum TextureFilter {
+		Nearest = 9728,
+		Linear = 9729,
+		MipMap = 9987,
+		MipMapNearestNearest = 9984,
+		MipMapLinearNearest = 9985,
+		MipMapNearestLinear = 9986,
+		MipMapLinearLinear = 9987,
+	}
+	enum TextureWrap {
+		MirroredRepeat = 33648,
+		ClampToEdge = 33071,
+		Repeat = 10497,
+	}
+	class TextureRegion {
+		renderObject: any;
+		u: number;
+		v: number;
+		u2: number;
+		v2: number;
+		width: number;
+		height: number;
+		rotate: boolean;
+		offsetX: number;
+		offsetY: number;
+		originalWidth: number;
+		originalHeight: number;
+	}
+}
 declare module spine {
 	class TextureAtlas implements Disposable {
 		pages: TextureAtlasPage[];
@@ -1094,6 +915,9 @@ declare module spine {
 	interface Disposable {
 		dispose(): void;
 	}
+	interface Restorable {
+		restore(): void;
+	}
 	class Color {
 		r: number;
 		g: number;
@@ -1181,56 +1005,188 @@ declare module spine {
 		getMean(): number;
 	}
 }
-declare module spine.threejs {
-	class AssetManager extends spine.AssetManager {
-		constructor(pathPrefix?: string);
+declare module spine {
+	abstract class Attachment {
+		name: string;
+		constructor(name: string);
+	}
+	abstract class VertexAttachment extends Attachment {
+		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.threejs {
-	class MeshBatcher {
-		mesh: THREE.Mesh;
-		private static VERTEX_SIZE;
-		private vertexBuffer;
-		private vertices;
-		private verticesLength;
-		private indices;
-		private indicesLength;
-		constructor(mesh: THREE.Mesh, maxVertices?: number);
-		begin(): void;
-		batch(vertices: ArrayLike<number>, verticesLength: number, indices: ArrayLike<number>, indicesLength: number, z?: number): void;
-		end(): void;
+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.threejs {
-	class SkeletonMesh extends THREE.Mesh {
-		skeleton: Skeleton;
-		state: AnimationState;
-		zOffset: number;
-		private batcher;
-		private clipper;
-		static QUAD_TRIANGLES: number[];
-		static VERTEX_SIZE: number;
-		private vertices;
-		private tempColor;
-		constructor(skeletonData: SkeletonData);
-		update(deltaTime: number): void;
-		private updateGeometry();
+declare module spine {
+	enum AttachmentType {
+		Region = 0,
+		BoundingBox = 1,
+		Mesh = 2,
+		LinkedMesh = 3,
+		Path = 4,
+		Point = 5,
 	}
 }
-declare module spine.threejs {
-	class ThreeJsTexture extends Texture {
-		texture: THREE.Texture;
+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.canvas {
+	class AssetManager extends spine.AssetManager {
+		constructor(pathPrefix?: string);
+	}
+}
+declare module spine.canvas {
+	class CanvasTexture extends Texture {
 		constructor(image: HTMLImageElement);
 		setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
 		setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
 		dispose(): void;
-		static toThreeJsTextureFilter(filter: TextureFilter): THREE.TextureFilter;
-		static toThreeJsTextureWrap(wrap: TextureWrap): THREE.Wrapping;
+	}
+}
+declare module spine.canvas {
+	class SkeletonRenderer {
+		static QUAD_TRIANGLES: number[];
+		static VERTEX_SIZE: number;
+		private ctx;
+		triangleRendering: boolean;
+		debugRendering: boolean;
+		private vertices;
+		private tempColor;
+		constructor(context: CanvasRenderingContext2D);
+		draw(skeleton: Skeleton): void;
+		private drawImages(skeleton);
+		private drawTriangles(skeleton);
+		private drawTriangle(img, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2);
+		private computeRegionVertices(slot, region, pma);
+		private computeMeshVertices(slot, mesh, pma);
 	}
 }
 declare module spine.webgl {
 	class AssetManager extends spine.AssetManager {
-		constructor(gl: WebGLRenderingContext, pathPrefix?: string);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix?: string);
 	}
 }
 declare module spine.webgl {
@@ -1255,14 +1211,16 @@ declare module spine.webgl {
 	}
 }
 declare module spine.webgl {
-	class GLTexture extends Texture implements Disposable {
-		private gl;
+	class GLTexture extends Texture implements Disposable, Restorable {
+		private context;
 		private texture;
 		private boundUnit;
-		constructor(gl: WebGLRenderingContext, image: HTMLImageElement, useMipMaps?: boolean);
+		private useMipMaps;
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement, useMipMaps?: boolean);
 		setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
 		setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
 		update(useMipMaps: boolean): void;
+		restore(): void;
 		bind(unit?: number): void;
 		unbind(): void;
 		dispose(): void;
@@ -1317,22 +1275,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;
@@ -1358,9 +1316,9 @@ declare module spine.webgl {
 	}
 }
 declare module spine.webgl {
-	class Mesh implements Disposable {
+	class Mesh implements Disposable, Restorable {
 		private attributes;
-		private gl;
+		private context;
 		private vertices;
 		private verticesBuffer;
 		private verticesLength;
@@ -1380,7 +1338,7 @@ declare module spine.webgl {
 		setIndicesLength(length: number): void;
 		getIndices(): Uint16Array;
 		getVertexSizeInFloats(): number;
-		constructor(gl: WebGLRenderingContext, attributes: VertexAttribute[], maxVertices: number, maxIndices: number);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, attributes: VertexAttribute[], maxVertices: number, maxIndices: number);
 		setVertices(vertices: Array<number>): void;
 		setIndices(indices: Array<number>): void;
 		draw(shader: Shader, primitiveType: number): void;
@@ -1388,6 +1346,7 @@ declare module spine.webgl {
 		bind(shader: Shader): void;
 		unbind(shader: Shader): void;
 		private update();
+		restore(): void;
 		dispose(): void;
 	}
 	class VertexAttribute {
@@ -1417,7 +1376,7 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
 	class PolygonBatcher implements Disposable {
-		private gl;
+		private context;
 		private drawCalls;
 		private isDrawing;
 		private mesh;
@@ -1427,7 +1386,7 @@ declare module spine.webgl {
 		private indicesLength;
 		private srcBlend;
 		private dstBlend;
-		constructor(gl: WebGLRenderingContext, twoColorTint?: boolean, maxVertices?: number);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean, maxVertices?: number);
 		begin(shader: Shader): void;
 		setBlendMode(srcBlend: number, dstBlend: number): void;
 		draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void;
@@ -1439,7 +1398,7 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
 	class SceneRenderer implements Disposable {
-		gl: WebGLRenderingContext;
+		context: ManagedWebGLRenderingContext;
 		canvas: HTMLCanvasElement;
 		camera: OrthoCamera;
 		batcher: PolygonBatcher;
@@ -1453,7 +1412,7 @@ declare module spine.webgl {
 		private QUAD;
 		private QUAD_TRIANGLES;
 		private WHITE;
-		constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext, twoColorTint?: boolean);
+		constructor(canvas: HTMLCanvasElement, context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean);
 		begin(): void;
 		drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
 		drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean, ignoredBones?: Array<string>): void;
@@ -1480,7 +1439,7 @@ declare module spine.webgl {
 	}
 }
 declare module spine.webgl {
-	class Shader implements Disposable {
+	class Shader implements Disposable, Restorable {
 		private vertexShader;
 		private fragmentShader;
 		static MVP_MATRIX: string;
@@ -1489,7 +1448,7 @@ declare module spine.webgl {
 		static COLOR2: string;
 		static TEXCOORDS: string;
 		static SAMPLER: string;
-		private gl;
+		private context;
 		private vs;
 		private fs;
 		private program;
@@ -1499,10 +1458,11 @@ declare module spine.webgl {
 		getProgram(): WebGLProgram;
 		getVertexShader(): string;
 		getFragmentShader(): string;
-		constructor(gl: WebGLRenderingContext, vertexShader: string, fragmentShader: string);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, vertexShader: string, fragmentShader: string);
 		private compile();
 		private compileShader(type, source);
 		private compileProgram(vs, fs);
+		restore(): void;
 		bind(): void;
 		unbind(): void;
 		setUniformi(uniform: string, value: number): void;
@@ -1516,14 +1476,14 @@ declare module spine.webgl {
 		getUniformLocation(uniform: string): WebGLUniformLocation;
 		getAttributeLocation(attribute: string): number;
 		dispose(): void;
-		static newColoredTextured(gl: WebGLRenderingContext): Shader;
-		static newTwoColoredTextured(gl: WebGLRenderingContext): Shader;
-		static newColored(gl: WebGLRenderingContext): Shader;
+		static newColoredTextured(context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader;
+		static newTwoColoredTextured(context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader;
+		static newColored(context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader;
 	}
 }
 declare module spine.webgl {
 	class ShapeRenderer implements Disposable {
-		private gl;
+		private context;
 		private isDrawing;
 		private mesh;
 		private shapeType;
@@ -1533,7 +1493,7 @@ declare module spine.webgl {
 		private tmp;
 		private srcBlend;
 		private dstBlend;
-		constructor(gl: WebGLRenderingContext, maxVertices?: number);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices?: number);
 		begin(shader: Shader): void;
 		setBlendMode(srcBlend: number, dstBlend: number): void;
 		setColor(color: Color): void;
@@ -1580,13 +1540,13 @@ declare module spine.webgl {
 		premultipliedAlpha: boolean;
 		scale: number;
 		boneWidth: number;
-		private gl;
+		private context;
 		private bounds;
 		private temp;
 		private vertices;
 		private static LIGHT_GRAY;
 		private static GREEN;
-		constructor(gl: WebGLRenderingContext);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext);
 		draw(shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones?: Array<string>): void;
 		dispose(): void;
 	}
@@ -1595,7 +1555,6 @@ declare module spine.webgl {
 	class SkeletonRenderer {
 		static QUAD_TRIANGLES: number[];
 		premultipliedAlpha: boolean;
-		private gl;
 		private tempColor;
 		private tempColor2;
 		private vertices;
@@ -1603,7 +1562,7 @@ declare module spine.webgl {
 		private twoColorTint;
 		private renderable;
 		private clipper;
-		constructor(gl: WebGLRenderingContext, twoColorTint?: boolean);
+		constructor(context: ManagedWebGLRenderingContext, twoColorTint?: boolean);
 		draw(batcher: PolygonBatcher, skeleton: Skeleton): void;
 	}
 }
@@ -1628,14 +1587,69 @@ declare module spine.webgl {
 	}
 }
 declare module spine.webgl {
-	function getSourceGLBlendMode(gl: WebGLRenderingContext, blendMode: BlendMode, premultipliedAlpha?: boolean): number;
-	function getDestGLBlendMode(gl: WebGLRenderingContext, blendMode: BlendMode): number;
+	class ManagedWebGLRenderingContext {
+		canvas: HTMLCanvasElement;
+		gl: WebGLRenderingContext;
+		private restorables;
+		constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext, contextConfig?: any);
+		addRestorable(restorable: Restorable): void;
+		removeRestorable(restorable: Restorable): void;
+	}
+	function getSourceGLBlendMode(blendMode: BlendMode, premultipliedAlpha?: boolean): number;
+	function getDestGLBlendMode(blendMode: BlendMode): number;
+}
+declare module spine.threejs {
+	class AssetManager extends spine.AssetManager {
+		constructor(pathPrefix?: string);
+	}
+}
+declare module spine.threejs {
+	class MeshBatcher {
+		mesh: THREE.Mesh;
+		private static VERTEX_SIZE;
+		private vertexBuffer;
+		private vertices;
+		private verticesLength;
+		private indices;
+		private indicesLength;
+		constructor(mesh: THREE.Mesh, maxVertices?: number);
+		begin(): void;
+		batch(vertices: ArrayLike<number>, verticesLength: number, indices: ArrayLike<number>, indicesLength: number, z?: number): void;
+		end(): void;
+	}
+}
+declare module spine.threejs {
+	class SkeletonMesh extends THREE.Mesh {
+		skeleton: Skeleton;
+		state: AnimationState;
+		zOffset: number;
+		private batcher;
+		private clipper;
+		static QUAD_TRIANGLES: number[];
+		static VERTEX_SIZE: number;
+		private vertices;
+		private tempColor;
+		constructor(skeletonData: SkeletonData);
+		update(deltaTime: number): void;
+		private updateGeometry();
+	}
+}
+declare module spine.threejs {
+	class ThreeJsTexture extends Texture {
+		texture: THREE.Texture;
+		constructor(image: HTMLImageElement);
+		setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
+		setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
+		dispose(): void;
+		static toThreeJsTextureFilter(filter: TextureFilter): THREE.TextureFilter;
+		static toThreeJsTextureWrap(wrap: TextureWrap): THREE.Wrapping;
+	}
 }
 declare module spine {
 	class SpineWidget {
 		skeleton: Skeleton;
 		state: AnimationState;
-		gl: WebGLRenderingContext;
+		context: spine.webgl.ManagedWebGLRenderingContext;
 		canvas: HTMLCanvasElement;
 		debugRenderer: spine.webgl.SkeletonDebugRenderer;
 		private config;

spine-ts/build/spine-canvas.d.ts

@@ -1,97 +1,3 @@
-declare module spine {
-	class AssetManager implements Disposable {
-		private pathPrefix;
-		private textureLoader;
-		private assets;
-		private errors;
-		private toLoad;
-		private loaded;
-		constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
-		loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
-		loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
-		loadTextureData(path: string, data: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
-		get(path: string): any;
-		remove(path: string): void;
-		removeAll(): void;
-		isLoadingComplete(): boolean;
-		getToLoad(): number;
-		getLoaded(): number;
-		dispose(): void;
-		hasErrors(): boolean;
-		getErrors(): Map<string>;
-	}
-}
-declare module spine.canvas {
-	class AssetManager extends spine.AssetManager {
-		constructor(pathPrefix?: string);
-	}
-}
-declare module spine {
-	abstract class Texture {
-		protected _image: HTMLImageElement;
-		constructor(image: HTMLImageElement);
-		getImage(): HTMLImageElement;
-		abstract setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
-		abstract setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
-		abstract dispose(): void;
-		static filterFromString(text: string): TextureFilter;
-		static wrapFromString(text: string): TextureWrap;
-	}
-	enum TextureFilter {
-		Nearest = 9728,
-		Linear = 9729,
-		MipMap = 9987,
-		MipMapNearestNearest = 9984,
-		MipMapLinearNearest = 9985,
-		MipMapNearestLinear = 9986,
-		MipMapLinearLinear = 9987,
-	}
-	enum TextureWrap {
-		MirroredRepeat = 33648,
-		ClampToEdge = 33071,
-		Repeat = 10497,
-	}
-	class TextureRegion {
-		renderObject: any;
-		u: number;
-		v: number;
-		u2: number;
-		v2: number;
-		width: number;
-		height: number;
-		rotate: boolean;
-		offsetX: number;
-		offsetY: number;
-		originalWidth: number;
-		originalHeight: number;
-	}
-}
-declare module spine.canvas {
-	class CanvasTexture extends Texture {
-		constructor(image: HTMLImageElement);
-		setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
-		setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
-		dispose(): void;
-	}
-}
-declare module spine.canvas {
-	class SkeletonRenderer {
-		static QUAD_TRIANGLES: number[];
-		static VERTEX_SIZE: number;
-		private ctx;
-		triangleRendering: boolean;
-		debugRendering: boolean;
-		private vertices;
-		private tempColor;
-		constructor(context: CanvasRenderingContext2D);
-		draw(skeleton: Skeleton): void;
-		private drawImages(skeleton);
-		private drawTriangles(skeleton);
-		private drawTriangle(img, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2);
-		private computeRegionVertices(slot, region, pma);
-		private computeMeshVertices(slot, mesh, pma);
-	}
-}
 declare module spine {
 	class Animation {
 		name: string;
@@ -446,33 +352,32 @@ declare module spine {
 	}
 }
 declare module spine {
-	class AtlasAttachmentLoader implements AttachmentLoader {
-		atlas: TextureAtlas;
-		constructor(atlas: TextureAtlas);
-		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 {
-	abstract class Attachment {
-		name: string;
-		constructor(name: string);
-	}
-	abstract class VertexAttachment extends Attachment {
-		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;
+	class AssetManager implements Disposable {
+		private pathPrefix;
+		private textureLoader;
+		private assets;
+		private errors;
+		private toLoad;
+		private loaded;
+		constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
+		loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
+		loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
+		loadTextureData(path: string, data: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
+		get(path: string): any;
+		remove(path: string): void;
+		removeAll(): void;
+		isLoadingComplete(): boolean;
+		getToLoad(): number;
+		getLoaded(): number;
+		dispose(): void;
+		hasErrors(): boolean;
+		getErrors(): Map<string>;
 	}
 }
 declare module spine {
-	interface AttachmentLoader {
+	class AtlasAttachmentLoader implements AttachmentLoader {
+		atlas: TextureAtlas;
+		constructor(atlas: TextureAtlas);
 		newRegionAttachment(skin: Skin, name: string, path: string): RegionAttachment;
 		newMeshAttachment(skin: Skin, name: string, path: string): MeshAttachment;
 		newBoundingBoxAttachment(skin: Skin, name: string): BoundingBoxAttachment;
@@ -481,130 +386,6 @@ declare module spine {
 		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,
@@ -1005,6 +786,46 @@ declare module spine {
 		constructor(index: number, name: string, boneData: BoneData);
 	}
 }
+declare module spine {
+	abstract class Texture {
+		protected _image: HTMLImageElement;
+		constructor(image: HTMLImageElement);
+		getImage(): HTMLImageElement;
+		abstract setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
+		abstract setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
+		abstract dispose(): void;
+		static filterFromString(text: string): TextureFilter;
+		static wrapFromString(text: string): TextureWrap;
+	}
+	enum TextureFilter {
+		Nearest = 9728,
+		Linear = 9729,
+		MipMap = 9987,
+		MipMapNearestNearest = 9984,
+		MipMapLinearNearest = 9985,
+		MipMapNearestLinear = 9986,
+		MipMapLinearLinear = 9987,
+	}
+	enum TextureWrap {
+		MirroredRepeat = 33648,
+		ClampToEdge = 33071,
+		Repeat = 10497,
+	}
+	class TextureRegion {
+		renderObject: any;
+		u: number;
+		v: number;
+		u2: number;
+		v2: number;
+		width: number;
+		height: number;
+		rotate: boolean;
+		offsetX: number;
+		offsetY: number;
+		originalWidth: number;
+		originalHeight: number;
+	}
+}
 declare module spine {
 	class TextureAtlas implements Disposable {
 		pages: TextureAtlasPage[];
@@ -1094,6 +915,9 @@ declare module spine {
 	interface Disposable {
 		dispose(): void;
 	}
+	interface Restorable {
+		restore(): void;
+	}
 	class Color {
 		r: number;
 		g: number;
@@ -1181,3 +1005,182 @@ declare module spine {
 		getMean(): number;
 	}
 }
+declare module spine {
+	abstract class Attachment {
+		name: string;
+		constructor(name: string);
+	}
+	abstract class VertexAttachment extends Attachment {
+		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.canvas {
+	class AssetManager extends spine.AssetManager {
+		constructor(pathPrefix?: string);
+	}
+}
+declare module spine.canvas {
+	class CanvasTexture extends Texture {
+		constructor(image: HTMLImageElement);
+		setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
+		setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
+		dispose(): void;
+	}
+}
+declare module spine.canvas {
+	class SkeletonRenderer {
+		static QUAD_TRIANGLES: number[];
+		static VERTEX_SIZE: number;
+		private ctx;
+		triangleRendering: boolean;
+		debugRendering: boolean;
+		private vertices;
+		private tempColor;
+		constructor(context: CanvasRenderingContext2D);
+		draw(skeleton: Skeleton): void;
+		private drawImages(skeleton);
+		private drawTriangles(skeleton);
+		private drawTriangle(img, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2);
+		private computeRegionVertices(slot, region, pma);
+		private computeMeshVertices(slot, mesh, pma);
+	}
+}

spine-ts/build/spine-core.d.ts

@@ -386,154 +386,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 {
-		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,
@@ -1063,6 +915,9 @@ declare module spine {
 	interface Disposable {
 		dispose(): void;
 	}
+	interface Restorable {
+		restore(): void;
+	}
 	class Color {
 		r: number;
 		g: number;
@@ -1150,3 +1005,151 @@ declare module spine {
 		getMean(): number;
 	}
 }
+declare module spine {
+	abstract class Attachment {
+		name: string;
+		constructor(name: string);
+	}
+	abstract class VertexAttachment extends Attachment {
+		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;
+	}
+}

spine-ts/build/spine-threejs.d.ts

@@ -386,154 +386,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 {
-		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,
@@ -1063,6 +915,9 @@ declare module spine {
 	interface Disposable {
 		dispose(): void;
 	}
+	interface Restorable {
+		restore(): void;
+	}
 	class Color {
 		r: number;
 		g: number;
@@ -1150,6 +1005,154 @@ declare module spine {
 		getMean(): number;
 	}
 }
+declare module spine {
+	abstract class Attachment {
+		name: string;
+		constructor(name: string);
+	}
+	abstract class VertexAttachment extends Attachment {
+		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.threejs {
 	class AssetManager extends spine.AssetManager {
 		constructor(pathPrefix?: string);

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

@@ -386,154 +386,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 {
-		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,
@@ -1063,6 +915,9 @@ declare module spine {
 	interface Disposable {
 		dispose(): void;
 	}
+	interface Restorable {
+		restore(): void;
+	}
 	class Color {
 		r: number;
 		g: number;
@@ -1150,9 +1005,157 @@ declare module spine {
 		getMean(): number;
 	}
 }
+declare module spine {
+	abstract class Attachment {
+		name: string;
+		constructor(name: string);
+	}
+	abstract class VertexAttachment extends Attachment {
+		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.webgl {
 	class AssetManager extends spine.AssetManager {
-		constructor(gl: WebGLRenderingContext, pathPrefix?: string);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix?: string);
 	}
 }
 declare module spine.webgl {
@@ -1177,14 +1180,16 @@ declare module spine.webgl {
 	}
 }
 declare module spine.webgl {
-	class GLTexture extends Texture implements Disposable {
-		private gl;
+	class GLTexture extends Texture implements Disposable, Restorable {
+		private context;
 		private texture;
 		private boundUnit;
-		constructor(gl: WebGLRenderingContext, image: HTMLImageElement, useMipMaps?: boolean);
+		private useMipMaps;
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement, useMipMaps?: boolean);
 		setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
 		setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
 		update(useMipMaps: boolean): void;
+		restore(): void;
 		bind(unit?: number): void;
 		unbind(): void;
 		dispose(): void;
@@ -1239,22 +1244,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;
@@ -1280,9 +1285,9 @@ declare module spine.webgl {
 	}
 }
 declare module spine.webgl {
-	class Mesh implements Disposable {
+	class Mesh implements Disposable, Restorable {
 		private attributes;
-		private gl;
+		private context;
 		private vertices;
 		private verticesBuffer;
 		private verticesLength;
@@ -1302,7 +1307,7 @@ declare module spine.webgl {
 		setIndicesLength(length: number): void;
 		getIndices(): Uint16Array;
 		getVertexSizeInFloats(): number;
-		constructor(gl: WebGLRenderingContext, attributes: VertexAttribute[], maxVertices: number, maxIndices: number);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, attributes: VertexAttribute[], maxVertices: number, maxIndices: number);
 		setVertices(vertices: Array<number>): void;
 		setIndices(indices: Array<number>): void;
 		draw(shader: Shader, primitiveType: number): void;
@@ -1310,6 +1315,7 @@ declare module spine.webgl {
 		bind(shader: Shader): void;
 		unbind(shader: Shader): void;
 		private update();
+		restore(): void;
 		dispose(): void;
 	}
 	class VertexAttribute {
@@ -1339,7 +1345,7 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
 	class PolygonBatcher implements Disposable {
-		private gl;
+		private context;
 		private drawCalls;
 		private isDrawing;
 		private mesh;
@@ -1349,7 +1355,7 @@ declare module spine.webgl {
 		private indicesLength;
 		private srcBlend;
 		private dstBlend;
-		constructor(gl: WebGLRenderingContext, twoColorTint?: boolean, maxVertices?: number);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean, maxVertices?: number);
 		begin(shader: Shader): void;
 		setBlendMode(srcBlend: number, dstBlend: number): void;
 		draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void;
@@ -1361,7 +1367,7 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
 	class SceneRenderer implements Disposable {
-		gl: WebGLRenderingContext;
+		context: ManagedWebGLRenderingContext;
 		canvas: HTMLCanvasElement;
 		camera: OrthoCamera;
 		batcher: PolygonBatcher;
@@ -1375,7 +1381,7 @@ declare module spine.webgl {
 		private QUAD;
 		private QUAD_TRIANGLES;
 		private WHITE;
-		constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext, twoColorTint?: boolean);
+		constructor(canvas: HTMLCanvasElement, context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean);
 		begin(): void;
 		drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
 		drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean, ignoredBones?: Array<string>): void;
@@ -1402,7 +1408,7 @@ declare module spine.webgl {
 	}
 }
 declare module spine.webgl {
-	class Shader implements Disposable {
+	class Shader implements Disposable, Restorable {
 		private vertexShader;
 		private fragmentShader;
 		static MVP_MATRIX: string;
@@ -1411,7 +1417,7 @@ declare module spine.webgl {
 		static COLOR2: string;
 		static TEXCOORDS: string;
 		static SAMPLER: string;
-		private gl;
+		private context;
 		private vs;
 		private fs;
 		private program;
@@ -1421,10 +1427,11 @@ declare module spine.webgl {
 		getProgram(): WebGLProgram;
 		getVertexShader(): string;
 		getFragmentShader(): string;
-		constructor(gl: WebGLRenderingContext, vertexShader: string, fragmentShader: string);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, vertexShader: string, fragmentShader: string);
 		private compile();
 		private compileShader(type, source);
 		private compileProgram(vs, fs);
+		restore(): void;
 		bind(): void;
 		unbind(): void;
 		setUniformi(uniform: string, value: number): void;
@@ -1438,14 +1445,14 @@ declare module spine.webgl {
 		getUniformLocation(uniform: string): WebGLUniformLocation;
 		getAttributeLocation(attribute: string): number;
 		dispose(): void;
-		static newColoredTextured(gl: WebGLRenderingContext): Shader;
-		static newTwoColoredTextured(gl: WebGLRenderingContext): Shader;
-		static newColored(gl: WebGLRenderingContext): Shader;
+		static newColoredTextured(context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader;
+		static newTwoColoredTextured(context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader;
+		static newColored(context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader;
 	}
 }
 declare module spine.webgl {
 	class ShapeRenderer implements Disposable {
-		private gl;
+		private context;
 		private isDrawing;
 		private mesh;
 		private shapeType;
@@ -1455,7 +1462,7 @@ declare module spine.webgl {
 		private tmp;
 		private srcBlend;
 		private dstBlend;
-		constructor(gl: WebGLRenderingContext, maxVertices?: number);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices?: number);
 		begin(shader: Shader): void;
 		setBlendMode(srcBlend: number, dstBlend: number): void;
 		setColor(color: Color): void;
@@ -1502,13 +1509,13 @@ declare module spine.webgl {
 		premultipliedAlpha: boolean;
 		scale: number;
 		boneWidth: number;
-		private gl;
+		private context;
 		private bounds;
 		private temp;
 		private vertices;
 		private static LIGHT_GRAY;
 		private static GREEN;
-		constructor(gl: WebGLRenderingContext);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext);
 		draw(shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones?: Array<string>): void;
 		dispose(): void;
 	}
@@ -1517,7 +1524,6 @@ declare module spine.webgl {
 	class SkeletonRenderer {
 		static QUAD_TRIANGLES: number[];
 		premultipliedAlpha: boolean;
-		private gl;
 		private tempColor;
 		private tempColor2;
 		private vertices;
@@ -1525,7 +1531,7 @@ declare module spine.webgl {
 		private twoColorTint;
 		private renderable;
 		private clipper;
-		constructor(gl: WebGLRenderingContext, twoColorTint?: boolean);
+		constructor(context: ManagedWebGLRenderingContext, twoColorTint?: boolean);
 		draw(batcher: PolygonBatcher, skeleton: Skeleton): void;
 	}
 }
@@ -1550,6 +1556,14 @@ declare module spine.webgl {
 	}
 }
 declare module spine.webgl {
-	function getSourceGLBlendMode(gl: WebGLRenderingContext, blendMode: BlendMode, premultipliedAlpha?: boolean): number;
-	function getDestGLBlendMode(gl: WebGLRenderingContext, blendMode: BlendMode): number;
+	class ManagedWebGLRenderingContext {
+		canvas: HTMLCanvasElement;
+		gl: WebGLRenderingContext;
+		private restorables;
+		constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext, contextConfig?: any);
+		addRestorable(restorable: Restorable): void;
+		removeRestorable(restorable: Restorable): void;
+	}
+	function getSourceGLBlendMode(blendMode: BlendMode, premultipliedAlpha?: boolean): number;
+	function getDestGLBlendMode(blendMode: BlendMode): number;
 }

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

@@ -386,154 +386,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 {
-		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,
@@ -1063,6 +915,9 @@ declare module spine {
 	interface Disposable {
 		dispose(): void;
 	}
+	interface Restorable {
+		restore(): void;
+	}
 	class Color {
 		r: number;
 		g: number;
@@ -1150,9 +1005,157 @@ declare module spine {
 		getMean(): number;
 	}
 }
+declare module spine {
+	abstract class Attachment {
+		name: string;
+		constructor(name: string);
+	}
+	abstract class VertexAttachment extends Attachment {
+		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.webgl {
 	class AssetManager extends spine.AssetManager {
-		constructor(gl: WebGLRenderingContext, pathPrefix?: string);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix?: string);
 	}
 }
 declare module spine.webgl {
@@ -1177,14 +1180,16 @@ declare module spine.webgl {
 	}
 }
 declare module spine.webgl {
-	class GLTexture extends Texture implements Disposable {
-		private gl;
+	class GLTexture extends Texture implements Disposable, Restorable {
+		private context;
 		private texture;
 		private boundUnit;
-		constructor(gl: WebGLRenderingContext, image: HTMLImageElement, useMipMaps?: boolean);
+		private useMipMaps;
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement, useMipMaps?: boolean);
 		setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
 		setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
 		update(useMipMaps: boolean): void;
+		restore(): void;
 		bind(unit?: number): void;
 		unbind(): void;
 		dispose(): void;
@@ -1239,22 +1244,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;
@@ -1280,9 +1285,9 @@ declare module spine.webgl {
 	}
 }
 declare module spine.webgl {
-	class Mesh implements Disposable {
+	class Mesh implements Disposable, Restorable {
 		private attributes;
-		private gl;
+		private context;
 		private vertices;
 		private verticesBuffer;
 		private verticesLength;
@@ -1302,7 +1307,7 @@ declare module spine.webgl {
 		setIndicesLength(length: number): void;
 		getIndices(): Uint16Array;
 		getVertexSizeInFloats(): number;
-		constructor(gl: WebGLRenderingContext, attributes: VertexAttribute[], maxVertices: number, maxIndices: number);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, attributes: VertexAttribute[], maxVertices: number, maxIndices: number);
 		setVertices(vertices: Array<number>): void;
 		setIndices(indices: Array<number>): void;
 		draw(shader: Shader, primitiveType: number): void;
@@ -1310,6 +1315,7 @@ declare module spine.webgl {
 		bind(shader: Shader): void;
 		unbind(shader: Shader): void;
 		private update();
+		restore(): void;
 		dispose(): void;
 	}
 	class VertexAttribute {
@@ -1339,7 +1345,7 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
 	class PolygonBatcher implements Disposable {
-		private gl;
+		private context;
 		private drawCalls;
 		private isDrawing;
 		private mesh;
@@ -1349,7 +1355,7 @@ declare module spine.webgl {
 		private indicesLength;
 		private srcBlend;
 		private dstBlend;
-		constructor(gl: WebGLRenderingContext, twoColorTint?: boolean, maxVertices?: number);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean, maxVertices?: number);
 		begin(shader: Shader): void;
 		setBlendMode(srcBlend: number, dstBlend: number): void;
 		draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void;
@@ -1361,7 +1367,7 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
 	class SceneRenderer implements Disposable {
-		gl: WebGLRenderingContext;
+		context: ManagedWebGLRenderingContext;
 		canvas: HTMLCanvasElement;
 		camera: OrthoCamera;
 		batcher: PolygonBatcher;
@@ -1375,7 +1381,7 @@ declare module spine.webgl {
 		private QUAD;
 		private QUAD_TRIANGLES;
 		private WHITE;
-		constructor(canvas: HTMLCanvasElement, gl: WebGLRenderingContext, twoColorTint?: boolean);
+		constructor(canvas: HTMLCanvasElement, context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint?: boolean);
 		begin(): void;
 		drawSkeleton(skeleton: Skeleton, premultipliedAlpha?: boolean): void;
 		drawSkeletonDebug(skeleton: Skeleton, premultipliedAlpha?: boolean, ignoredBones?: Array<string>): void;
@@ -1402,7 +1408,7 @@ declare module spine.webgl {
 	}
 }
 declare module spine.webgl {
-	class Shader implements Disposable {
+	class Shader implements Disposable, Restorable {
 		private vertexShader;
 		private fragmentShader;
 		static MVP_MATRIX: string;
@@ -1411,7 +1417,7 @@ declare module spine.webgl {
 		static COLOR2: string;
 		static TEXCOORDS: string;
 		static SAMPLER: string;
-		private gl;
+		private context;
 		private vs;
 		private fs;
 		private program;
@@ -1421,10 +1427,11 @@ declare module spine.webgl {
 		getProgram(): WebGLProgram;
 		getVertexShader(): string;
 		getFragmentShader(): string;
-		constructor(gl: WebGLRenderingContext, vertexShader: string, fragmentShader: string);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, vertexShader: string, fragmentShader: string);
 		private compile();
 		private compileShader(type, source);
 		private compileProgram(vs, fs);
+		restore(): void;
 		bind(): void;
 		unbind(): void;
 		setUniformi(uniform: string, value: number): void;
@@ -1438,14 +1445,14 @@ declare module spine.webgl {
 		getUniformLocation(uniform: string): WebGLUniformLocation;
 		getAttributeLocation(attribute: string): number;
 		dispose(): void;
-		static newColoredTextured(gl: WebGLRenderingContext): Shader;
-		static newTwoColoredTextured(gl: WebGLRenderingContext): Shader;
-		static newColored(gl: WebGLRenderingContext): Shader;
+		static newColoredTextured(context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader;
+		static newTwoColoredTextured(context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader;
+		static newColored(context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader;
 	}
 }
 declare module spine.webgl {
 	class ShapeRenderer implements Disposable {
-		private gl;
+		private context;
 		private isDrawing;
 		private mesh;
 		private shapeType;
@@ -1455,7 +1462,7 @@ declare module spine.webgl {
 		private tmp;
 		private srcBlend;
 		private dstBlend;
-		constructor(gl: WebGLRenderingContext, maxVertices?: number);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices?: number);
 		begin(shader: Shader): void;
 		setBlendMode(srcBlend: number, dstBlend: number): void;
 		setColor(color: Color): void;
@@ -1502,13 +1509,13 @@ declare module spine.webgl {
 		premultipliedAlpha: boolean;
 		scale: number;
 		boneWidth: number;
-		private gl;
+		private context;
 		private bounds;
 		private temp;
 		private vertices;
 		private static LIGHT_GRAY;
 		private static GREEN;
-		constructor(gl: WebGLRenderingContext);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext);
 		draw(shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones?: Array<string>): void;
 		dispose(): void;
 	}
@@ -1517,7 +1524,6 @@ declare module spine.webgl {
 	class SkeletonRenderer {
 		static QUAD_TRIANGLES: number[];
 		premultipliedAlpha: boolean;
-		private gl;
 		private tempColor;
 		private tempColor2;
 		private vertices;
@@ -1525,7 +1531,7 @@ declare module spine.webgl {
 		private twoColorTint;
 		private renderable;
 		private clipper;
-		constructor(gl: WebGLRenderingContext, twoColorTint?: boolean);
+		constructor(context: ManagedWebGLRenderingContext, twoColorTint?: boolean);
 		draw(batcher: PolygonBatcher, skeleton: Skeleton): void;
 	}
 }
@@ -1550,14 +1556,22 @@ declare module spine.webgl {
 	}
 }
 declare module spine.webgl {
-	function getSourceGLBlendMode(gl: WebGLRenderingContext, blendMode: BlendMode, premultipliedAlpha?: boolean): number;
-	function getDestGLBlendMode(gl: WebGLRenderingContext, blendMode: BlendMode): number;
+	class ManagedWebGLRenderingContext {
+		canvas: HTMLCanvasElement;
+		gl: WebGLRenderingContext;
+		private restorables;
+		constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext, contextConfig?: any);
+		addRestorable(restorable: Restorable): void;
+		removeRestorable(restorable: Restorable): void;
+	}
+	function getSourceGLBlendMode(blendMode: BlendMode, premultipliedAlpha?: boolean): number;
+	function getDestGLBlendMode(blendMode: BlendMode): number;
 }
 declare module spine {
 	class SpineWidget {
 		skeleton: Skeleton;
 		state: AnimationState;
-		gl: WebGLRenderingContext;
+		context: spine.webgl.ManagedWebGLRenderingContext;
 		canvas: HTMLCanvasElement;
 		debugRenderer: spine.webgl.SkeletonDebugRenderer;
 		private config;

spine-ts/core/src/Utils.ts

@@ -59,6 +59,10 @@ module spine {
 		dispose (): void;
 	}
 
+	export interface Restorable {
+		restore (): void;
+	}
+
 	export class Color {
 		public static WHITE = new Color(1, 1, 1, 1);
 		public static RED = new Color(1, 0, 0, 1);

spine-ts/webgl/example/test.html

@@ -17,7 +17,7 @@ var ANIMATION = "walk";
 var NUM_SKELETONS = 1;
 var SCALE = 0.5;
 
-var canvas, gl, renderer, input, assetManager;
+var canvas, context, gl, renderer, input, assetManager;
 var skeletons = [];
 var timeKeeper;
 var label = document.getElementById("label");
@@ -27,16 +27,17 @@ var renderMean = new spine.WindowedMean();
 function init() {
 	canvas = document.getElementById("canvas");
 	canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
-	gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
+	context = new spine.webgl.ManagedWebGLRenderingContext(canvas);
+	gl = context.gl;
 
-	renderer = new spine.webgl.SceneRenderer(canvas, gl);
+	renderer = new spine.webgl.SceneRenderer(canvas, context);
 	renderer.skeletonDebugRenderer.drawBones = false;
 	renderer.skeletonDebugRenderer.drawMeshTriangles = false;
 	renderer.skeletonDebugRenderer.drawMeshHull = false;
 	renderer.skeletonDebugRenderer.drawRegionAttachments = false;
 	renderer.skeletonDebugRenderer.drawBoundingBoxes = false;
 
-	assetManager = new spine.webgl.AssetManager(gl, "assets/");
+	assetManager = new spine.webgl.AssetManager(context, "assets/");
 	var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
 	input = new spine.webgl.Input(canvas);
 

spine-ts/webgl/src/AssetManager.ts

@@ -30,9 +30,9 @@
 
 module spine.webgl {
 	export class AssetManager extends spine.AssetManager {
-		constructor (gl: WebGLRenderingContext, pathPrefix: string = "") {
-			super((image: HTMLImageElement) => { 
-				return new spine.webgl.GLTexture(gl, image); 
+		constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix: string = "") {
+			super((image: HTMLImageElement) => {
+				return new spine.webgl.GLTexture(context, image);
 			}, pathPrefix);
 		}
 	}

spine-ts/webgl/src/GLTexture.ts

@@ -29,34 +29,39 @@
  *****************************************************************************/
 
 module spine.webgl {
-	export class GLTexture extends Texture implements Disposable {
-		private gl: WebGLRenderingContext;
-		private texture: WebGLTexture;
+	export class GLTexture extends Texture implements Disposable, Restorable {
+		private context: ManagedWebGLRenderingContext;
+		private texture: WebGLTexture = null;
 		private boundUnit = 0;
+		private useMipMaps = false;
 
-		constructor (gl: WebGLRenderingContext, image: HTMLImageElement, useMipMaps: boolean = false) {
+		constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement, useMipMaps: boolean = false) {
 			super(image);
-			this.gl = gl;
-			this.texture = gl.createTexture();
-			this.update(useMipMaps);
+			this.context = context instanceof ManagedWebGLRenderingContext? context : new ManagedWebGLRenderingContext(context);
+			this.useMipMaps = useMipMaps;
+			this.restore();
+			this.context.addRestorable(this);
 		}
 
 		setFilters (minFilter: TextureFilter, magFilter: TextureFilter) {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			this.bind();
 			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter);
 			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magFilter);
 		}
 
 		setWraps (uWrap: TextureWrap, vWrap: TextureWrap) {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			this.bind();
 			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, uWrap);
 			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, vWrap);
 		}
 
 		update (useMipMaps: boolean) {
-			let gl = this.gl;
+			let gl = this.context.gl;
+			if (!this.texture) {
+				this.texture = this.context.gl.createTexture();
+			}
 			this.bind();
 			gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._image);
 			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
@@ -66,21 +71,27 @@ module spine.webgl {
 			if (useMipMaps) gl.generateMipmap(gl.TEXTURE_2D);
 		}
 
+		restore () {
+			this.texture = null;
+			this.update(this.useMipMaps);
+		}
+
 		bind (unit: number = 0) {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			this.boundUnit = unit;
 			gl.activeTexture(gl.TEXTURE0 + unit);
 			gl.bindTexture(gl.TEXTURE_2D, this.texture);
 		}
 
 		unbind () {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			gl.activeTexture(gl.TEXTURE0 + this.boundUnit);
 			gl.bindTexture(gl.TEXTURE_2D, null);
 		}
 
 		dispose () {
-			let gl = this.gl;
+			this.context.removeRestorable(this);
+			let gl = this.context.gl;
 			gl.deleteTexture(this.texture);
 		}
 	}

spine-ts/webgl/src/LoadingScreen.ts

@@ -32,7 +32,7 @@ module spine.webgl {
 	export class LoadingScreen {
 		static FADE_SECONDS = 1;
 
-		private static loaded = 0; 
+		private static loaded = 0;
 		private static spinnerImg: HTMLImageElement = null;
 		private static logoImg: HTMLImageElement = null;
 
@@ -84,7 +84,7 @@ module spine.webgl {
 
 			let renderer = this.renderer;
 			let canvas = renderer.canvas;
-			let gl = renderer.gl;
+			let gl = renderer.context.gl;
 
 			let oldX = renderer.camera.position.x, oldY = renderer.camera.position.y;
 			renderer.camera.position.set(canvas.width / 2, canvas.height / 2, 0);
@@ -114,8 +114,8 @@ module spine.webgl {
 
 			if (LoadingScreen.loaded != 2) return;
 			if (this.logo === null) {
-				this.logo = new GLTexture(renderer.gl, LoadingScreen.logoImg);
-				this.spinner = new GLTexture(renderer.gl, LoadingScreen.spinnerImg);
+				this.logo = new GLTexture(renderer.context, LoadingScreen.logoImg);
+				this.spinner = new GLTexture(renderer.context, LoadingScreen.spinnerImg);
 			}
 			this.logo.update(false);
 			this.spinner.update(false);

spine-ts/webgl/src/Mesh.ts

@@ -29,8 +29,8 @@
  *****************************************************************************/
 
 module spine.webgl {
-	export class Mesh implements Disposable {
-		private gl: WebGLRenderingContext;
+	export class Mesh implements Disposable, Restorable {
+		private context: ManagedWebGLRenderingContext;
 		private vertices:Float32Array;
 		private verticesBuffer: WebGLBuffer;
 		private verticesLength = 0;
@@ -68,14 +68,15 @@ module spine.webgl {
 			return size;
 		}
 
-		constructor (gl: WebGLRenderingContext, private attributes: VertexAttribute[], maxVertices: number, maxIndices: number) {
-			this.gl = gl;
+		constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, private attributes: VertexAttribute[], maxVertices: number, maxIndices: number) {
+			this.context = context instanceof ManagedWebGLRenderingContext? context : new ManagedWebGLRenderingContext(context);
 			this.elementsPerVertex = 0;
 			for (let i = 0; i < attributes.length; i++) {
 				this.elementsPerVertex += attributes[i].numElements;
 			}
 			this.vertices = new Float32Array(maxVertices * this.elementsPerVertex);
 			this.indices = new Uint16Array(maxIndices);
+			this.context.addRestorable(this);
 		}
 
 		setVertices (vertices: Array<number>) {
@@ -97,7 +98,7 @@ module spine.webgl {
 		}
 
 		drawWithOffset (shader: Shader, primitiveType: number, offset: number, count: number) {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			if (this.dirtyVertices || this.dirtyIndices) this.update();
 			this.bind(shader);
 			if (this.indicesLength > 0) {
@@ -109,7 +110,7 @@ module spine.webgl {
 		}
 
 		bind (shader: Shader) {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			gl.bindBuffer(gl.ARRAY_BUFFER, this.verticesBuffer);
 			let offset = 0;
 			for (let i = 0; i < this.attributes.length; i++) {
@@ -123,7 +124,7 @@ module spine.webgl {
 		}
 
 		unbind (shader: Shader) {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			for (let i = 0; i < this.attributes.length; i++) {
 				let attrib = this.attributes[i];
 				let location = shader.getAttributeLocation(attrib.name);
@@ -134,7 +135,7 @@ module spine.webgl {
 		}
 
 		private update () {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			if (this.dirtyVertices) {
 				if (!this.verticesBuffer) {
 					this.verticesBuffer = gl.createBuffer();
@@ -154,8 +155,15 @@ module spine.webgl {
 			}
 		}
 
+		restore () {
+			this.verticesBuffer = null;
+			this.indicesBuffer = null;
+			this.update();
+		}
+
 		dispose () {
-			let gl = this.gl;
+			this.context.removeRestorable(this);
+			let gl = this.context.gl;
 			gl.deleteBuffer(this.verticesBuffer);
 			gl.deleteBuffer(this.indicesBuffer);
 		}

spine-ts/webgl/src/PolygonBatcher.ts

@@ -30,7 +30,7 @@
 
 module spine.webgl {
 	export class PolygonBatcher implements Disposable {
-		private gl: WebGLRenderingContext;
+		private context: ManagedWebGLRenderingContext;
 		private drawCalls: number;
 		private isDrawing = false;
 		private mesh: Mesh;
@@ -41,17 +41,17 @@ module spine.webgl {
 		private srcBlend: number = WebGLRenderingContext.SRC_ALPHA;
 		private dstBlend: number = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
 
-		constructor (gl: 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);
-			this.gl = gl;
+			this.context = context instanceof ManagedWebGLRenderingContext? context : new ManagedWebGLRenderingContext(context);
 			let attributes = twoColorTint ?
 					[new Position2Attribute(), new ColorAttribute(), new TexCoordAttribute(), new Color2Attribute()] :
 					[new Position2Attribute(), new ColorAttribute(), new TexCoordAttribute()];
-			this.mesh = new Mesh(gl, attributes, maxVertices, maxVertices * 3);
+			this.mesh = new Mesh(context, attributes, maxVertices, maxVertices * 3);
 		}
 
 		begin (shader: Shader) {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			if (this.isDrawing) throw new Error("PolygonBatch is already drawing. Call PolygonBatch.end() before calling PolygonBatch.begin()");
 			this.drawCalls = 0;
 			this.shader = shader;
@@ -63,7 +63,7 @@ module spine.webgl {
 		}
 
 		setBlendMode (srcBlend: number, dstBlend: number) {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			this.srcBlend = srcBlend;
 			this.dstBlend = dstBlend;
 			if (this.isDrawing) {
@@ -95,7 +95,7 @@ module spine.webgl {
 		}
 
 		private flush () {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			if (this.verticesLength == 0) return;
 
 			this.mesh.draw(this.shader, gl.TRIANGLES);
@@ -108,7 +108,7 @@ module spine.webgl {
 		}
 
 		end () {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			if (!this.isDrawing) throw new Error("PolygonBatch is not drawing. Call PolygonBatch.begin() before calling PolygonBatch.end()");
 			if (this.verticesLength > 0 || this.indicesLength > 0) this.flush();
 			this.shader = null;

spine-ts/webgl/src/SceneRenderer.ts

@@ -30,7 +30,7 @@
 
 module spine.webgl {
 	export class SceneRenderer implements Disposable {
-		gl: WebGLRenderingContext;
+		context: ManagedWebGLRenderingContext;
 		canvas: HTMLCanvasElement;
 		camera: OrthoCamera;
 		batcher: PolygonBatcher;
@@ -50,17 +50,17 @@ module spine.webgl {
 		private QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
 		private WHITE = new Color(1, 1, 1, 1);
 
-		constructor (canvas: HTMLCanvasElement, gl: WebGLRenderingContext, twoColorTint: boolean = true) {
+		constructor (canvas: HTMLCanvasElement, context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint: boolean = true) {
 			this.canvas = canvas;
-			this.gl = gl;
+			this.context = context instanceof ManagedWebGLRenderingContext? context : new ManagedWebGLRenderingContext(context);
 			this.twoColorTint = twoColorTint;
 			this.camera = new OrthoCamera(canvas.width, canvas.height);
-			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);
-			this.skeletonRenderer = new SkeletonRenderer(gl, twoColorTint);
-			this.skeletonDebugRenderer = new SkeletonDebugRenderer(gl);
+			this.batcherShader = twoColorTint ? Shader.newTwoColoredTextured(this.context) : Shader.newColoredTextured(this.context);
+			this.batcher = new PolygonBatcher(this.context, twoColorTint);
+			this.shapesShader = Shader.newColored(this.context);
+			this.shapes = new ShapeRenderer(this.context);
+			this.skeletonRenderer = new SkeletonRenderer(this.context, twoColorTint);
+			this.skeletonDebugRenderer = new SkeletonDebugRenderer(this.context);
 		}
 
 		begin () {
@@ -393,7 +393,7 @@ module spine.webgl {
 				canvas.width = w;
 				canvas.height = h;
 			}
-			this.gl.viewport(0, 0, canvas.width, canvas.height);
+			this.context.gl.viewport(0, 0, canvas.width, canvas.height);
 
 			if (resizeMode === ResizeMode.Stretch) {
 				// nothing to do, we simply apply the viewport size of the camera

spine-ts/webgl/src/Shader.ts

@@ -29,7 +29,7 @@
  *****************************************************************************/
 
 module spine.webgl {
-	export class Shader implements Disposable {
+	export class Shader implements Disposable, Restorable {
 		public static MVP_MATRIX = "u_projTrans";
 		public static POSITION = "a_position";
 		public static COLOR = "a_color";
@@ -37,7 +37,7 @@ module spine.webgl {
 		public static TEXCOORDS = "a_texCoords";
 		public static SAMPLER = "u_texture";
 
-		private gl: WebGLRenderingContext;
+		private context: ManagedWebGLRenderingContext;
 		private vs: WebGLShader = null;
 		private fs: WebGLShader = null;
 		private program: WebGLProgram = null;
@@ -49,13 +49,14 @@ module spine.webgl {
 		public getVertexShader () { return this.vertexShader; }
 		public getFragmentShader () { return this.fragmentShader; }
 
-		constructor (gl: WebGLRenderingContext, private vertexShader: string, private fragmentShader: string) {
-			this.gl = gl;
+		constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, private vertexShader: string, private fragmentShader: string) {
+			this.context = context instanceof ManagedWebGLRenderingContext? context : new ManagedWebGLRenderingContext(context);
+			this.context.addRestorable(this);
 			this.compile();
 		}
 
 		private compile () {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			try {
 				this.vs = this.compileShader(gl.VERTEX_SHADER, this.vertexShader);
 				this.fs = this.compileShader(gl.FRAGMENT_SHADER, this.fragmentShader);
@@ -67,20 +68,20 @@ module spine.webgl {
 		}
 
 		private compileShader (type: number, source: string) {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			let shader = gl.createShader(type);
 			gl.shaderSource(shader, source);
 			gl.compileShader(shader);
 			if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
 				let error = "Couldn't compile shader: " + gl.getShaderInfoLog(shader);
 				gl.deleteShader(shader);
-				throw new Error(error);
+				if (!gl.isContextLost()) throw new Error(error);
 			}
 			return shader;
 		}
 
 		private compileProgram (vs: WebGLShader, fs: WebGLShader) {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			let program = gl.createProgram();
 			gl.attachShader(program, vs);
 			gl.attachShader(program, fs);
@@ -89,73 +90,79 @@ module spine.webgl {
 			if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
 				let error = "Couldn't compile shader program: " + gl.getProgramInfoLog(program);
 				gl.deleteProgram(program);
-				throw new Error(error);
+				if (!gl.isContextLost()) throw new Error(error);
 			}
 			return program;
 		}
 
+		restore () {
+			this.compile();
+		}
+
 		public bind () {
-			this.gl.useProgram(this.program);
+			this.context.gl.useProgram(this.program);
 		}
 
 		public unbind () {
-			this.gl.useProgram(null);
+			this.context.gl.useProgram(null);
 		}
 
 		public setUniformi (uniform: string, value: number) {
-			this.gl.uniform1i(this.getUniformLocation(uniform), value);
+			this.context.gl.uniform1i(this.getUniformLocation(uniform), value);
 		}
 
 		public setUniformf (uniform: string, value: number) {
-			this.gl.uniform1f(this.getUniformLocation(uniform), value);
+			this.context.gl.uniform1f(this.getUniformLocation(uniform), value);
 		}
 
 		public setUniform2f (uniform: string, value: number, value2: number) {
-			this.gl.uniform2f(this.getUniformLocation(uniform), value, value2);
+			this.context.gl.uniform2f(this.getUniformLocation(uniform), value, value2);
 		}
 
 		public setUniform3f (uniform: string, value: number, value2: number, value3: number) {
-			this.gl.uniform3f(this.getUniformLocation(uniform), value, value2, value3);
+			this.context.gl.uniform3f(this.getUniformLocation(uniform), value, value2, value3);
 		}
 
 		public setUniform4f (uniform: string, value: number, value2: number, value3: number, value4: number) {
-			this.gl.uniform4f(this.getUniformLocation(uniform), value, value2, value3, value4);
+			this.context.gl.uniform4f(this.getUniformLocation(uniform), value, value2, value3, value4);
 		}
 
 		public setUniform2x2f (uniform: string, value: ArrayLike<number>) {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			this.tmp2x2.set(value);
 			gl.uniformMatrix2fv(this.getUniformLocation(uniform), false, this.tmp2x2);
 		}
 
 		public setUniform3x3f (uniform: string, value: ArrayLike<number>) {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			this.tmp3x3.set(value);
 			gl.uniformMatrix3fv(this.getUniformLocation(uniform), false, this.tmp3x3);
 		}
 
 		public setUniform4x4f (uniform: string, value: ArrayLike<number>) {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			this.tmp4x4.set(value);
 			gl.uniformMatrix4fv(this.getUniformLocation(uniform), false, this.tmp4x4);
 		}
 
 		public getUniformLocation (uniform: string): WebGLUniformLocation {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			let location = gl.getUniformLocation(this.program, uniform);
-			if (!location) throw new Error(`Couldn't find location for uniform ${uniform}`);
+			if (!location && !gl.isContextLost()) throw new Error(`Couldn't find location for uniform ${uniform}`);
 			return location;
 		}
 
 		public getAttributeLocation (attribute: string): number {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			let location = gl.getAttribLocation(this.program, attribute);
-			if (location == -1) throw new Error(`Couldn't find location for attribute ${attribute}`);
+			if (location == -1 && !gl.isContextLost()) throw new Error(`Couldn't find location for attribute ${attribute}`);
 			return location;
 		}
 
 		public dispose () {
-			let gl = this.gl;
+			this.context.removeRestorable(this);
+
+			let gl = this.context.gl;
 			if (this.vs) {
 				gl.deleteShader(this.vs);
 				this.vs = null;
@@ -172,7 +179,7 @@ module spine.webgl {
 			}
 		}
 
-		public static newColoredTextured (gl: WebGLRenderingContext): Shader {
+		public static newColoredTextured (context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader {
 			let vs = `
 				attribute vec4 ${Shader.POSITION};
 				attribute vec4 ${Shader.COLOR};
@@ -204,10 +211,10 @@ module spine.webgl {
 				}
 			`;
 
-			return new Shader(gl, vs, fs);
+			return new Shader(context, vs, fs);
 		}
 
-		public static newTwoColoredTextured (gl: WebGLRenderingContext): Shader {
+		public static newTwoColoredTextured (context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader {
 			let vs = `
 				attribute vec4 ${Shader.POSITION};
 				attribute vec4 ${Shader.COLOR};
@@ -246,10 +253,10 @@ module spine.webgl {
 				}
 			`;
 
-			return new Shader(gl, vs, fs);
+			return new Shader(context, vs, fs);
 		}
 
-		public static newColored (gl: WebGLRenderingContext): Shader {
+		public static newColored (context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader {
 			let vs = `
 				attribute vec4 ${Shader.POSITION};
 				attribute vec4 ${Shader.COLOR};
@@ -276,7 +283,7 @@ module spine.webgl {
 				}
 			`;
 
-			return new Shader(gl, vs, fs);
+			return new Shader(context, vs, fs);
 		}
 	}
 }

spine-ts/webgl/src/ShapeRenderer.ts

@@ -30,7 +30,7 @@
 
 module spine.webgl {
 	export class ShapeRenderer implements Disposable {
-		private gl: WebGLRenderingContext;
+		private context: ManagedWebGLRenderingContext;
 		private isDrawing = false;
 		private mesh: Mesh;
 		private shapeType = ShapeType.Filled;
@@ -41,10 +41,10 @@ module spine.webgl {
 		private srcBlend: number = WebGLRenderingContext.SRC_ALPHA;
 		private dstBlend: number = WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
 
-		constructor (gl: 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);
-			this.gl = gl;
-			this.mesh = new Mesh(gl, [new Position2Attribute(), new ColorAttribute()], maxVertices, 0);
+			this.context = context instanceof ManagedWebGLRenderingContext? context : new ManagedWebGLRenderingContext(context);
+			this.mesh = new Mesh(context, [new Position2Attribute(), new ColorAttribute()], maxVertices, 0);
 		}
 
 		begin (shader: Shader) {
@@ -53,13 +53,13 @@ module spine.webgl {
 			this.vertexIndex = 0;
 			this.isDrawing = true;
 
-			let gl = this.gl;
+			let gl = this.context.gl;
 			gl.enable(gl.BLEND);
 			gl.blendFunc(this.srcBlend, this.dstBlend);
 		}
 
 		setBlendMode (srcBlend: number, dstBlend: number) {
-			let gl = this.gl;
+			let gl = this.context.gl;
 			this.srcBlend = srcBlend;
 			this.dstBlend = dstBlend;
 			if (this.isDrawing) {
@@ -308,7 +308,7 @@ module spine.webgl {
 		end () {
 			if (!this.isDrawing) throw new Error("ShapeRenderer.begin() has not been called");
 			this.flush();
-			this.gl.disable(this.gl.BLEND);
+			this.context.gl.disable(this.context.gl.BLEND);
 			this.isDrawing = false;
 		}
 

spine-ts/webgl/src/SkeletonDebugRenderer.ts

@@ -49,21 +49,21 @@ module spine.webgl {
 		scale = 1;
 		boneWidth = 2;
 
-		private gl: WebGLRenderingContext;
+		private context: ManagedWebGLRenderingContext;
 		private bounds = new SkeletonBounds();
 		private temp = new Array<number>();
 		private vertices = Utils.newFloatArray(2 * 1024);
 		private static LIGHT_GRAY = new Color(192 / 255, 192 / 255, 192 / 255, 1);
 		private static GREEN = new Color(0, 1, 0, 1);
 
-		constructor (gl: WebGLRenderingContext) {
-			this.gl = gl;
+		constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext) {
+			this.context = context instanceof ManagedWebGLRenderingContext? context : new ManagedWebGLRenderingContext(context);
 		}
 
 		draw (shapes: ShapeRenderer, skeleton: Skeleton, ignoredBones: Array<string> = null) {
 			let skeletonX = skeleton.x;
 			let skeletonY = skeleton.y;
-			let gl = this.gl;
+			let gl = this.context.gl;
 			let srcFunc = this.premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA;
 			shapes.setBlendMode(srcFunc, gl.ONE_MINUS_SRC_ALPHA);
 

spine-ts/webgl/src/SkeletonRenderer.ts

@@ -37,7 +37,6 @@ module spine.webgl {
 		static QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
 
 		premultipliedAlpha = false;
-		private gl: WebGLRenderingContext;
 		private tempColor = new Color();
 		private tempColor2 = new Color();
 		private vertices:ArrayLike<number>;
@@ -46,8 +45,7 @@ module spine.webgl {
 		private renderable: Renderable = new Renderable(null, 0, 0);
 		private clipper: SkeletonClipping = new SkeletonClipping();
 
-		constructor (gl: WebGLRenderingContext, twoColorTint: boolean = true) {
-			this.gl = gl;
+		constructor (context: ManagedWebGLRenderingContext, twoColorTint: boolean = true) {
 			this.twoColorTint = twoColorTint;
 			if (twoColorTint)
 				this.vertexSize += 4;
@@ -120,7 +118,7 @@ module spine.webgl {
 					let slotBlendMode = slot.data.blendMode;
 					if (slotBlendMode != blendMode) {
 						blendMode = slotBlendMode;
-						batcher.setBlendMode(getSourceGLBlendMode(this.gl, blendMode, premultipliedAlpha), getDestGLBlendMode(this.gl, blendMode));
+						batcher.setBlendMode(getSourceGLBlendMode(blendMode, premultipliedAlpha), getDestGLBlendMode(blendMode));
 					}
 
 					if (clipper.isClipping()) {

spine-ts/webgl/src/WebGL.ts

@@ -29,22 +29,60 @@
  *****************************************************************************/
 
 module spine.webgl {
-	export function getSourceGLBlendMode (gl: WebGLRenderingContext, blendMode: BlendMode, premultipliedAlpha: boolean = false) {
+	export class ManagedWebGLRenderingContext {
+		public canvas: HTMLCanvasElement;
+		public gl: WebGLRenderingContext;
+		private restorables = new Array<Restorable>();
+
+		constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext, contextConfig: any = { alpha: "true" }) {
+			if (canvasOrContext instanceof HTMLCanvasElement) {
+				let canvas = canvasOrContext;
+				this.gl = <WebGLRenderingContext> (canvas.getContext("webgl", contextConfig) || canvas.getContext("experimental-webgl", contextConfig));
+				this.canvas = canvas;
+				canvas.addEventListener("webglcontextlost", (e: any) => {
+					let event = <WebGLContextEvent>e;
+					if (e) {
+						e.preventDefault();
+					}
+				});
+
+				canvas.addEventListener("webglcontextrestored", (e: any) => {
+					for (let i = 0, n = this.restorables.length; i < n; i++) {
+						this.restorables[i].restore();
+					}
+				});
+			} else {
+				this.gl = canvasOrContext;
+				this.canvas = this.gl.canvas;
+			}
+		}
+
+		addRestorable(restorable: Restorable) {
+			this.restorables.push(restorable);
+		}
+
+		removeRestorable(restorable: Restorable) {
+			let index = this.restorables.indexOf(restorable);
+			if (index > -1) this.restorables.splice(index, 1);
+		}
+	}
+
+	export function getSourceGLBlendMode (blendMode: BlendMode, premultipliedAlpha: boolean = false) {
 		switch(blendMode) {
-			case BlendMode.Normal: return premultipliedAlpha? gl.ONE : gl.SRC_ALPHA;
-			case BlendMode.Additive: return premultipliedAlpha? gl.ONE : gl.SRC_ALPHA;
-			case BlendMode.Multiply: return gl.DST_COLOR;
-			case BlendMode.Screen: return gl.ONE;
+			case BlendMode.Normal: return premultipliedAlpha? WebGLRenderingContext.ONE : WebGLRenderingContext.SRC_ALPHA;
+			case BlendMode.Additive: return premultipliedAlpha? WebGLRenderingContext.ONE : WebGLRenderingContext.SRC_ALPHA;
+			case BlendMode.Multiply: return WebGLRenderingContext.DST_COLOR;
+			case BlendMode.Screen: return WebGLRenderingContext.ONE;
 			default: throw new Error("Unknown blend mode: " + blendMode);
 		}
 	}
 
-	export function getDestGLBlendMode (gl: WebGLRenderingContext, blendMode: BlendMode) {
+	export function getDestGLBlendMode (blendMode: BlendMode) {
 		switch(blendMode) {
-			case BlendMode.Normal: return gl.ONE_MINUS_SRC_ALPHA;
-			case BlendMode.Additive: return gl.ONE;
-			case BlendMode.Multiply: return gl.ONE_MINUS_SRC_ALPHA;
-			case BlendMode.Screen: return gl.ONE_MINUS_SRC_ALPHA;
+			case BlendMode.Normal: return WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
+			case BlendMode.Additive: return WebGLRenderingContext.ONE;
+			case BlendMode.Multiply: return WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
+			case BlendMode.Screen: return WebGLRenderingContext.ONE_MINUS_SRC_ALPHA;
 			default: throw new Error("Unknown blend mode: " + blendMode);
 		}
 	}

spine-ts/widget/example/index.html

@@ -85,7 +85,7 @@ if (!supportsWebGL()) {
 	alert('WebGL is unavailable.');
 }
 
-new spine.SpineWidget("spine-widget", {
+spineWidget = new spine.SpineWidget("spine-widget", {
 	json: "assets/spineboy.json",
 	atlas: "assets/spineboy.atlas",
 	animation: "run",
@@ -106,7 +106,7 @@ json = document.getElementById("json").innerHTML;
 atlas = document.getElementById("atlas").innerHTML;
 atlasPageContent = document.getElementById("atlasPage").innerHTML;
 
-new spine.SpineWidget("spine-widget-inline", {
+spineWidgetInline = new spine.SpineWidget("spine-widget-inline", {
 	jsonContent: json,
 	atlasContent: atlas,
 	atlasPages: ["spine-logo.png"],

spine-ts/widget/src/Widget.ts

@@ -32,7 +32,7 @@ module spine {
 	export class SpineWidget {
 		skeleton: Skeleton;
 		state: AnimationState;
-		gl: WebGLRenderingContext;
+		context: spine.webgl.ManagedWebGLRenderingContext;
 		canvas: HTMLCanvasElement;
 		debugRenderer: spine.webgl.SkeletonDebugRenderer;
 
@@ -70,17 +70,17 @@ module spine {
 			canvas.width = (<HTMLElement>element).clientWidth;
 			canvas.height = (<HTMLElement>element).clientHeight;
 			var webglConfig = { alpha: config.alpha };
-			let gl = this.gl = <WebGLRenderingContext> (canvas.getContext("webgl", webglConfig) || canvas.getContext("experimental-webgl", webglConfig));
+			this.context = new spine.webgl.ManagedWebGLRenderingContext(canvas, webglConfig);
 
-			this.shader = spine.webgl.Shader.newTwoColoredTextured(gl);
-			this.batcher = new spine.webgl.PolygonBatcher(gl);
+			this.shader = spine.webgl.Shader.newTwoColoredTextured(this.context);
+			this.batcher = new spine.webgl.PolygonBatcher(this.context);
 			this.mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
-			this.skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
-			this.debugShader = spine.webgl.Shader.newColored(gl);
-			this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
-			this.shapes = new spine.webgl.ShapeRenderer(gl);
+			this.skeletonRenderer = new spine.webgl.SkeletonRenderer(this.context);
+			this.debugShader = spine.webgl.Shader.newColored(this.context);
+			this.debugRenderer = new spine.webgl.SkeletonDebugRenderer(this.context);
+			this.shapes = new spine.webgl.ShapeRenderer(this.context);
 
-			let assets = this.assetManager = new spine.webgl.AssetManager(gl, config.imagesPath ? config.imagesPath : "");
+			let assets = this.assetManager = new spine.webgl.AssetManager(this.context, config.imagesPath ? config.imagesPath : "");
 			if (!config.atlasContent) {
 				assets.loadText(config.atlas);
 			}
@@ -196,7 +196,7 @@ module spine {
 			if (delta > 0.1) delta = 0;
 			this.lastFrameTime = now;
 
-			let gl = this.gl;
+			let gl = this.context.gl;
 			let color = this.backgroundColor;
 			this.resize();
 			gl.clearColor(color.r, color.g, color.b, color.a);
@@ -267,7 +267,7 @@ module spine {
 				this.mvp.ortho2d(0, 0, w - 1, h - 1);
 			}
 
-			this.gl.viewport(0, 0, canvas.width, canvas.height);
+			this.context.gl.viewport(0, 0, canvas.width, canvas.height);
 		}
 
 		pause () {