Merge branch '3.8' of https://github.com/MikalDev/spine-runtimes into MikalDev-3.8

spine-ts/core/src/SharedAssetManager.ts

@@ -32,7 +32,7 @@ module spine {
 		clientId: string;
 		toLoad = new Array<string>();
 		assets: Map<any> = {};
-		textureLoader: (image: HTMLImageElement) => any;
+		textureLoader: (image: HTMLImageElement | ImageBitmap) => any;
 
 		constructor(clientId: string) {
 			this.clientId = clientId;
@@ -56,7 +56,7 @@ module spine {
 			this.pathPrefix = pathPrefix;
 		}
 
-		private queueAsset(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): boolean {
+		private queueAsset(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): boolean {
 			let clientAssets = this.clientAssets[clientId];
 			if (clientAssets === null || clientAssets === undefined) {
 				clientAssets = new Assets(clientId);
@@ -111,19 +111,40 @@ module spine {
 			request.send();
 		}
 
-		loadTexture (clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string) {
+		loadTexture (clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string) {
 			path = this.pathPrefix + path;
 			if (!this.queueAsset(clientId, textureLoader, path)) return;
 
-			let img = new Image();
+			let isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
-			img.crossOrigin = "anonymous";
+			let isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
-			img.onload = (ev) => {
+
-				this.rawAssets[path] = img;
+			if (isWebWorker) {
+				// For webworker use fetch instead of Image()
+				const options = {mode: <RequestMode>"cors"};
+				fetch(path, options).then( (response) => {
+						if (!response.ok) {
+							this.errors[path] = "Couldn't load image " + path;
+						}
+						return response.blob();
+					}).then( (blob) => {
+						return createImageBitmap(blob, {
+						premultiplyAlpha: 'none',
+						colorSpaceConversion: 'none',
+						});
+					}).then( (bitmap) => {
+						this.rawAssets[path] = bitmap;
+					});
+			} else {
+				let img = new Image();
+				img.crossOrigin = "anonymous";
+				img.onload = (ev) => {
+					this.rawAssets[path] = img;
+				}
+				img.onerror = (ev) => {
+					this.errors[path] = `Couldn't load image ${path}`;
+				}
+				img.src = path;
 			}
-			img.onerror = (ev) => {
-				this.errors[path] = `Couldn't load image ${path}`;
-			}
-			img.src = path;
 		}
 
 		get (clientId: string, path: string) {
@@ -134,16 +155,29 @@ module spine {
 		}
 
 		private updateClientAssets(clientAssets: Assets): void {
+			let isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
+			let isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
+
 			for (let i = 0; i < clientAssets.toLoad.length; i++) {
 				let path = clientAssets.toLoad[i];
 				let asset = clientAssets.assets[path];
 				if (asset === null || asset === undefined) {
 					let rawAsset = this.rawAssets[path];
 					if (rawAsset === null || rawAsset === undefined) continue;
-					if (rawAsset instanceof HTMLImageElement) {
+
-						clientAssets.assets[path] = clientAssets.textureLoader(<HTMLImageElement>rawAsset);
+					if (isWebWorker)
+					{
+						if (rawAsset instanceof ImageBitmap) {
+							clientAssets.assets[path] = clientAssets.textureLoader(<ImageBitmap>rawAsset);
+						} else {
+							clientAssets.assets[path] = rawAsset;
+						}
 					} else {
-						clientAssets.assets[path] = rawAsset;
+						if (rawAsset instanceof HTMLImageElement) {
+							clientAssets.assets[path] = clientAssets.textureLoader(<HTMLImageElement>rawAsset);
+						} else {
+							clientAssets.assets[path] = rawAsset;
+						}						
 					}
 				}
 			}

spine-ts/core/src/Texture.ts

@@ -29,13 +29,13 @@
 
 module spine {
 	export abstract class Texture {
-		protected _image: HTMLImageElement;
+		protected _image: HTMLImageElement | ImageBitmap;
 
-		constructor (image: HTMLImageElement) {
+		constructor (image: HTMLImageElement | ImageBitmap) {
 			this._image = image;
 		}
 
-		getImage (): HTMLImageElement {
+		getImage (): HTMLImageElement | ImageBitmap {
 			return this._image;
 		}
 

spine-ts/webgl/src/AssetManager.ts

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

spine-ts/webgl/src/GLTexture.ts

@@ -36,7 +36,7 @@ module spine.webgl {
 
 		public static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL = false;
 
-		constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement, useMipMaps: boolean = false) {
+		constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps: boolean = false) {
 			super(image);
 			this.context = context instanceof ManagedWebGLRenderingContext? context : new ManagedWebGLRenderingContext(context);
 			this.useMipMaps = useMipMaps;

spine-ts/webgl/src/WebGL.ts

@@ -33,8 +33,8 @@ module spine.webgl {
 		public gl: WebGLRenderingContext;
 		private restorables = new Array<Restorable>();
 
-		constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext, contextConfig: any = { alpha: "true" }) {
+		constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | OffscreenCanvas | WebGL2RenderingContext, contextConfig: any = { alpha: "true" }) {
-			if (canvasOrContext instanceof HTMLCanvasElement) {
+			if (!((canvasOrContext instanceof WebGLRenderingContext) || (canvasOrContext instanceof WebGL2RenderingContext))) {
 				let canvas = canvasOrContext;
 				this.gl = <WebGLRenderingContext> (canvas.getContext("webgl2", contextConfig) || canvas.getContext("webgl", contextConfig));
 				this.canvas = canvas;