[ts] Add support across all runtimes for premultiplying non-PMA textures on upload.

Author: davidetan

CHANGELOG.md

@@ -758,6 +758,8 @@
   - Added `Skeleton` properties `windX`, `windY`, `gravityX`, `gravityY` to allow rotating physics force directions
   - Added `SequenceTimeline` for sequence animation
   - Added `allowMissingRegions` parameter to `AtlasAttachmentLoader` constructor to support skeletons exported with per-skin atlases
+  - Added `TextureLoader` type with optional `pma?: boolean` parameter to `AssetManagerBase`. `AssetManagerBase` now tracks and passes PMA metadata from atlas pages to texture loaders, allowing runtimes to automatically premultiply textures on upload
+  - Added `SkeletonRendererCore` class to reduce complexity of runtime-specific render code
 
 - **Breaking changes**
   - `Bone` now extends `PosedActive` with separate pose, constrained, and applied states
@@ -869,6 +871,12 @@
 
 - **Breaking changes**
   - Updated to use new TypeScript/JavaScript runtime
+  - `GLTexture` constructor now requires `pma: boolean` parameter (automatically read from atlas page metadata)
+  - Removed `GLTexture.DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL` static property
+  - `SkeletonRenderer` and `SkeletonDebugRenderer` no longer have `premultipliedAlpha` property - PMA is handled automatically
+  - `SceneRenderer.drawSkeleton()` and `drawSkeletonDebug()` no longer take `premultipliedAlpha` parameter
+  - `PolygonBatcher.setBlendMode()` no longer takes `premultipliedAlpha` parameter
+  - `LoadingScreen` no longer accepts PMA parameters
 
 ### Canvas backend
 
@@ -885,11 +893,13 @@
 
 - **Breaking changes**
   - Updated to use new TypeScript/JavaScript runtime
+  - `AssetManager` constructor no longer takes `pma` parameter - PMA is handled automatically
 
 ### Player
 
 - **Breaking changes**
   - Updated to use new TypeScript/JavaScript runtime
+  - Removed `premultipliedAlpha` option from `SpinePlayerConfig` - PMA is now handled automatically
 
 ### Pixi v7
 
@@ -917,17 +927,22 @@
 
 - **Breaking changes**
   - Updated to use new TypeScript/JavaScript runtime
+  - `SpinePlugin.spineAtlas()` loader no longer takes `premultipliedAlpha` parameter - PMA is handled automatically
+  - `SpinePlugin.createSkeleton()` no longer takes `premultipliedAlpha` parameter
 
 ### Phaser v4
 
 - **Breaking changes**
   - Updated to use new TypeScript/JavaScript runtime
+  - `SpinePlugin.spineAtlas()` loader no longer takes `premultipliedAlpha` parameter - PMA is handled automatically
+  - `SpinePlugin.createSkeleton()` no longer takes `premultipliedAlpha` parameter
 
 ### Web Components
 
 - **Breaking changes**
   - Updated to use new TypeScript/JavaScript runtime
   - Updated skeleton and overlay component implementations
+  - Removed `pma` property from `SpineWebComponentSkeleton` - PMA is handled automatically
 
 # 4.2
 

spine-ts/spine-core/src/AssetManagerBase.ts

@@ -35,20 +35,19 @@ type AssetData = (Uint8Array | string | Texture | TextureAtlas | object) & Parti
 type AssetCallback<T extends AssetData> = (path: string, data: T) => void;
 type ErrorCallback = (path: string, message: string) => void;
 
+export type TextureLoader = (image: HTMLImageElement | ImageBitmap, pma?: boolean) => Texture;
+
 export class AssetManagerBase implements Disposable {
-	private pathPrefix: string = "";
-	private textureLoader: (image: HTMLImageElement | ImageBitmap) => Texture;
-	private downloader: Downloader;
-	private cache: AssetCache;
 	private errors: StringMap<string> = {};
 	private toLoad = 0;
 	private loaded = 0;
+	private texturePmaInfo: Record<string, boolean> = {};
 
-	constructor (textureLoader: (image: HTMLImageElement | ImageBitmap) => Texture, pathPrefix: string = "", downloader = new Downloader(), cache = new AssetCache()) {
-		this.textureLoader = textureLoader;
-		this.pathPrefix = pathPrefix;
-		this.downloader = downloader;
-		this.cache = cache;
+	constructor (
+		private textureLoader: TextureLoader,
+		private pathPrefix: string = "",
+		private downloader = new Downloader(),
+		private cache = new AssetCache()) {
 	}
 
 	private start (path: string): string {
@@ -175,6 +174,7 @@ export class AssetManagerBase implements Disposable {
 
 		if (this.reuseAssets(path, success, error)) return;
 
+		const pma = this.texturePmaInfo[path];
 		this.cache.assetsLoaded[path] = new Promise<Texture>((resolve, reject) => {
 			const isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
 			const isWebWorker = !isBrowser; // && typeof importScripts !== 'undefined';
@@ -188,7 +188,7 @@ export class AssetManagerBase implements Disposable {
 					return blob ? createImageBitmap(blob, { premultiplyAlpha: "none", colorSpaceConversion: "none" }) : null;
 				}).then((bitmap) => {
 					if (bitmap) {
-						const texture = this.createTexture(path, bitmap);
+						const texture = this.createTexture(path, pma, bitmap);
 						this.success(success, path, texture);
 						resolve(texture);
 					};
@@ -197,7 +197,7 @@ export class AssetManagerBase implements Disposable {
 				const image = new Image();
 				image.crossOrigin = "anonymous";
 				image.onload = () => {
-					const texture = this.createTexture(path, image);
+					const texture = this.createTexture(path, pma, image);
 					this.success(success, path, texture);
 					resolve(texture);
 				};
@@ -216,7 +216,7 @@ export class AssetManagerBase implements Disposable {
 		path: string,
 		success: AssetCallback<TextureAtlas> = () => { },
 		error: ErrorCallback = () => { },
-		fileAlias?: { [keyword: string]: string }
+		fileAlias?: Record<string, string>
 	) {
 		const index = path.lastIndexOf("/");
 		const parent = index >= 0 ? path.substring(0, index + 1) : "";
@@ -227,10 +227,11 @@ export class AssetManagerBase implements Disposable {
 		this.cache.assetsLoaded[path] = new Promise<TextureAtlas>((resolve, reject) => {
 			this.downloader.downloadText(path, (atlasText: string): void => {
 				try {
-					const atlas = this.createTextureAtlas(path, atlasText);
+					const atlas = this.createTextureAtlas(atlasText, parent, path, fileAlias);
 					let toLoad = atlas.pages.length, abort = false;
 					for (const page of atlas.pages) {
-						this.loadTexture(!fileAlias ? parent + page.name : fileAlias[page.name],
+						this.loadTexture(
+							this.texturePath(parent, page.name, fileAlias),
 							(imagePath: string, texture: Texture) => {
 								if (!abort) {
 									page.setTexture(texture);
@@ -268,14 +269,16 @@ export class AssetManagerBase implements Disposable {
 		success: AssetCallback<TextureAtlas> = () => { },
 		error: ErrorCallback = () => { },
 	) {
+		const index = path.lastIndexOf("/");
+		const parent = index >= 0 ? path.substring(0, index + 1) : "";
 		path = this.start(path);
 
 		if (this.reuseAssets(path, success, error)) return;
 
 		this.cache.assetsLoaded[path] = new Promise<TextureAtlas>((resolve, reject) => {
 			this.downloader.downloadText(path, (atlasText: string): void => {
 				try {
-					const atlas = this.createTextureAtlas(path, atlasText);
+					const atlas = this.createTextureAtlas(atlasText, parent, path);
 					this.success(success, path, atlas);
 					resolve(atlas);
 				} catch (e) {
@@ -291,7 +294,6 @@ export class AssetManagerBase implements Disposable {
 		});
 	}
 
-	// Promisified versions of load function
 	async loadBinaryAsync (path: string) {
 		return new Promise((resolve, reject) => {
 			this.loadBinary(path,
@@ -413,7 +415,7 @@ export class AssetManagerBase implements Disposable {
 		}
 	}
 
-	private createTextureAtlas (path: string, atlasText: string): TextureAtlas {
+	private createTextureAtlas (atlasText: string, parentPath: string, path: string, fileAlias?: Record<string, string>): TextureAtlas {
 		const atlas = new TextureAtlas(atlasText);
 		atlas.dispose = () => {
 			if (this.cache.assetsRefCount[path] <= 0) return;
@@ -422,17 +424,26 @@ export class AssetManagerBase implements Disposable {
 				page.texture?.dispose();
 			}
 		}
+		for (const page of atlas.pages) {
+			const texturePath = this.texturePath(parentPath, page.name, fileAlias);
+			this.texturePmaInfo[this.pathPrefix + texturePath] = page.pma;
+		}
 		return atlas;
 	}
 
-	private createTexture (path: string, image: HTMLImageElement | ImageBitmap): Texture {
-		const texture = this.textureLoader(image);
+	private createTexture (path: string, pma: boolean, image: HTMLImageElement | ImageBitmap): Texture {
+		const texture = this.textureLoader(image, pma);
 		const textureDispose = texture.dispose.bind(texture);
 		texture.dispose = () => {
 			if (this.disposeAssetInternal(path)) textureDispose();
 		}
 		return texture;
 	}
+
+	private texturePath (parentPath: string, pageName: string, fileAlias?: Record<string, string>) {
+		if (!fileAlias) return parentPath + pageName;
+		return fileAlias[pageName];
+	}
 }
 
 export class AssetCache {

spine-ts/spine-core/src/SkeletonClipping.ts

@@ -324,7 +324,7 @@ export class SkeletonClipping {
 		return clipOutputItems != null;
 	}
 
-	public clipTrianglesUnpacked (vertices: NumberArrayLike, triangles: NumberArrayLike | Uint32Array, trianglesLength: number, uvs: NumberArrayLike) {
+	public clipTrianglesUnpacked (vertices: NumberArrayLike, triangles: NumberArrayLike | Uint32Array, trianglesLength: number, uvs: NumberArrayLike, stride = 2) {
 		const clipOutput = this.clipOutput;
 		let clippedVertices = this._clippedVerticesTyped, clippedUVs = this._clippedUVsTyped, clippedTriangles = this._clippedTrianglesTyped;
 		// biome-ignore lint/style/noNonNullAssertion: clipStart define it
@@ -343,17 +343,23 @@ export class SkeletonClipping {
 		let clipped = false;
 
 		for (let i = 0; i < trianglesLength; i += 3) {
-			let v = triangles[i] << 1;
+			let t = triangles[i];
+			let v = t * stride;
 			const x1 = vertices[v], y1 = vertices[v + 1];
-			const u1 = uvs[v], v1 = uvs[v + 1];
+			let uv = t << 1;
+			const u1 = uvs[uv], v1 = uvs[uv + 1];
 
-			v = triangles[i + 1] << 1;
+			t = triangles[i + 1];
+			v = t * stride;
 			const x2 = vertices[v], y2 = vertices[v + 1];
-			const u2 = uvs[v], v2 = uvs[v + 1];
+			uv = t << 1;
+			const u2 = uvs[uv], v2 = uvs[uv + 1];
 
-			v = triangles[i + 2] << 1;
+			t = triangles[i + 2];
+			v = t * stride;
 			const x3 = vertices[v], y3 = vertices[v + 1];
-			const u3 = uvs[v], v3 = uvs[v + 1];
+			uv = t << 1;
+			const u3 = uvs[uv], v3 = uvs[uv + 1];
 
 			for (let p = 0; p < polygonsCount; p++) {
 				let s = this.clippedVerticesLength;
@@ -367,29 +373,31 @@ export class SkeletonClipping {
 					let clipOutputCount = clipOutputLength >> 1;
 					const clipOutputItems = this.clipOutput;
 
-					const newLength = s + clipOutputCount * 2;
+					const newLength = s + clipOutputCount * stride;
 					if (clippedVertices.length < newLength) {
 						this._clippedVerticesTyped = new Float32Array(newLength * 2);
 						this._clippedVerticesTyped.set(clippedVertices.subarray(0, s));
-						this._clippedUVsTyped = new Float32Array(newLength * 2);
-						this._clippedUVsTyped.set(clippedUVs.subarray(0, s));
+						this._clippedUVsTyped = new Float32Array((this.clippedUVsLength + clipOutputCount * 2) * 2);
+						this._clippedUVsTyped.set(clippedUVs.subarray(0, this.clippedUVsLength));
 						clippedVertices = this._clippedVerticesTyped;
 						clippedUVs = this._clippedUVsTyped;
 					}
 					const clippedVerticesItems = clippedVertices;
 					const clippedUVsItems = clippedUVs;
 					this.clippedVerticesLength = newLength;
-					this.clippedUVsLength = newLength;
-					for (let ii = 0; ii < clipOutputLength; ii += 2, s += 2) {
+
+					let uvIndex = this.clippedUVsLength;
+					this.clippedUVsLength = uvIndex + clipOutputCount * 2;
+					for (let ii = 0; ii < clipOutputLength; ii += 2, s += stride, uvIndex += 2) {
 						const x = clipOutputItems[ii], y = clipOutputItems[ii + 1];
 						clippedVerticesItems[s] = x;
 						clippedVerticesItems[s + 1] = y;
 						const c0 = x - x3, c1 = y - y3;
 						const a = (d0 * c0 + d1 * c1) * d;
 						const b = (d4 * c0 + d2 * c1) * d;
 						const c = 1 - a - b;
-						clippedUVsItems[s] = u1 * a + u2 * b + u3 * c;
-						clippedUVsItems[s + 1] = v1 * a + v2 * b + v3 * c;
+						clippedUVsItems[uvIndex] = u1 * a + u2 * b + u3 * c;
+						clippedUVsItems[uvIndex + 1] = v1 * a + v2 * b + v3 * c;
 					}
 
 					s = this.clippedTrianglesLength;
@@ -411,33 +419,35 @@ export class SkeletonClipping {
 
 				} else {
 
-					let newLength = s + 3 * 2;
+					let newLength = s + 3 * stride;
 					if (clippedVertices.length < newLength) {
 						this._clippedVerticesTyped = new Float32Array(newLength * 2);
 						this._clippedVerticesTyped.set(clippedVertices.subarray(0, s));
 						clippedVertices = this._clippedVerticesTyped;
 					}
 					clippedVertices[s] = x1;
 					clippedVertices[s + 1] = y1;
-					clippedVertices[s + 2] = x2;
-					clippedVertices[s + 3] = y2;
-					clippedVertices[s + 4] = x3;
-					clippedVertices[s + 5] = y3;
-
-					if (clippedUVs.length < newLength) {
-						this._clippedUVsTyped = new Float32Array(newLength * 2);
-						this._clippedUVsTyped.set(clippedUVs.subarray(0, s));
+					clippedVertices[s + stride] = x2;
+					clippedVertices[s + stride + 1] = y2;
+					clippedVertices[s + stride * 2] = x3;
+					clippedVertices[s + stride * 2 + 1] = y3;
+
+					let uvLength = this.clippedUVsLength + 3 * 2;
+					if (clippedUVs.length < uvLength) {
+						this._clippedUVsTyped = new Float32Array(uvLength * 2);
+						this._clippedUVsTyped.set(clippedUVs.subarray(0, this.clippedUVsLength));
 						clippedUVs = this._clippedUVsTyped;
 					}
-					clippedUVs[s] = u1;
-					clippedUVs[s + 1] = v1;
-					clippedUVs[s + 2] = u2;
-					clippedUVs[s + 3] = v2;
-					clippedUVs[s + 4] = u3;
-					clippedUVs[s + 5] = v3;
+					let uvIndex = this.clippedUVsLength;
+					clippedUVs[uvIndex] = u1;
+					clippedUVs[uvIndex + 1] = v1;
+					clippedUVs[uvIndex + 2] = u2;
+					clippedUVs[uvIndex + 3] = v2;
+					clippedUVs[uvIndex + 4] = u3;
+					clippedUVs[uvIndex + 5] = v3;
 
 					this.clippedVerticesLength = newLength;
-					this.clippedUVsLength = newLength;
+					this.clippedUVsLength = uvLength;
 
 					s = this.clippedTrianglesLength;
 					newLength = s + 3;