From e222db427b53621c385f0f02526ec82f4ceefb14 Mon Sep 17 00:00:00 2001 From: Davide Tantillo Date: Fri, 5 Dec 2025 16:25:42 +0100 Subject: [PATCH] Premultiply on upload for all runtimes. SkeletonRendererCore allows to request for pma color and color tint. --- spine-ts/spine-core/src/AssetManagerBase.ts | 49 ++++++++------ .../spine-core/src/SkeletonRendererCore.ts | 65 ++++++++++++++----- .../spine-phaser-v3/src/SpineGameObject.ts | 3 - spine-ts/spine-phaser-v3/src/SpinePlugin.ts | 51 +++++---------- .../spine-phaser-v4/src/SpineGameObject.ts | 3 - spine-ts/spine-phaser-v4/src/SpinePlugin.ts | 52 +++++---------- spine-ts/spine-player/src/Player.ts | 8 +-- spine-ts/spine-threejs/src/AssetManager.ts | 10 +-- .../src/SpineWebComponentOverlay.ts | 4 +- .../src/SpineWebComponentSkeleton.ts | 9 --- spine-ts/spine-webgl/src/AssetManager.ts | 8 ++- spine-ts/spine-webgl/src/GLTexture.ts | 12 ++-- spine-ts/spine-webgl/src/PolygonBatcher.ts | 17 ++--- spine-ts/spine-webgl/src/SceneRenderer.ts | 6 +- .../spine-webgl/src/SkeletonDebugRenderer.ts | 4 +- spine-ts/spine-webgl/src/SkeletonRenderer.ts | 34 ++++------ 16 files changed, 158 insertions(+), 177 deletions(-) diff --git a/spine-ts/spine-core/src/AssetManagerBase.ts b/spine-ts/spine-core/src/AssetManagerBase.ts index ad95c0316..117148adb 100644 --- a/spine-ts/spine-core/src/AssetManagerBase.ts +++ b/spine-ts/spine-core/src/AssetManagerBase.ts @@ -35,20 +35,19 @@ type AssetData = (Uint8Array | string | Texture | TextureAtlas | object) & Parti type AssetCallback = (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 = {}; private toLoad = 0; private loaded = 0; + private texturePmaInfo: Record = {}; - 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((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 = () => { }, error: ErrorCallback = () => { }, - fileAlias?: { [keyword: string]: string } + fileAlias?: Record ) { 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((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,6 +269,8 @@ export class AssetManagerBase implements Disposable { success: AssetCallback = () => { }, 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; @@ -275,7 +278,7 @@ export class AssetManagerBase implements Disposable { this.cache.assetsLoaded[path] = new Promise((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): 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) { + if (!fileAlias) return parentPath + pageName; + return fileAlias[pageName]; + } } export class AssetCache { diff --git a/spine-ts/spine-core/src/SkeletonRendererCore.ts b/spine-ts/spine-core/src/SkeletonRendererCore.ts index bbf3b727b..79c6d3d91 100644 --- a/spine-ts/spine-core/src/SkeletonRendererCore.ts +++ b/spine-ts/spine-core/src/SkeletonRendererCore.ts @@ -40,7 +40,7 @@ export class SkeletonRendererCore { private clipping = new SkeletonClipping(); private renderCommands: RenderCommand[] = []; - render (skeleton: Skeleton): RenderCommand | undefined { + render (skeleton: Skeleton, pma = false, inColor?: [number, number, number, number]): RenderCommand | undefined { this.commandPool.reset(); this.renderCommands.length = 0; @@ -56,8 +56,8 @@ export class SkeletonRendererCore { } const slotApplied = slot.applied; - const color = slotApplied.color; - const alpha = color.a; + const slotColor = slotApplied.color; + const alpha = slotColor.a; if ((alpha === 0 || !slot.bone.active) && !(attachment instanceof ClippingAttachment)) { clipper.clipEnd(slot); continue; @@ -115,18 +115,51 @@ export class SkeletonRendererCore { } const skelColor = skeleton.color; - const r = Math.floor(skelColor.r * slotApplied.color.r * attachmentColor.r * 255); - const g = Math.floor(skelColor.g * slotApplied.color.g * attachmentColor.g * 255); - const b = Math.floor(skelColor.b * slotApplied.color.b * attachmentColor.b * 255); - const a = Math.floor(skelColor.a * slotApplied.color.a * attachmentColor.a * 255); + let color: number, darkColor: number; + if (pma) { + let a: number; + if (inColor) { + a = Math.floor(inColor[3] * skelColor.a * slotColor.a * attachmentColor.a * 255); + const r = Math.floor(a * inColor[0] * skelColor.r * slotColor.r * attachmentColor.r); + const g = Math.floor(a * inColor[1] * skelColor.g * slotColor.g * attachmentColor.g); + const b = Math.floor(a * inColor[2] * skelColor.b * slotColor.b * attachmentColor.b); + color = (a << 24) | (r << 16) | (g << 8) | b; + } else { + a = Math.floor(skelColor.a * slotColor.a * attachmentColor.a * 255); + const r = Math.floor(a * skelColor.r * slotColor.r * attachmentColor.r); + const g = Math.floor(a * skelColor.g * slotColor.g * attachmentColor.g); + const b = Math.floor(a * skelColor.b * slotColor.b * attachmentColor.b); + color = (a << 24) | (r << 16) | (g << 8) | b; + } - let darkColor = 0xff000000; - if (slotApplied.darkColor) { - const { r, g, b } = slotApplied.darkColor; - darkColor = 0xff000000 | - (Math.floor(r * 255) << 16) | - (Math.floor(g * 255) << 8) | - Math.floor(b * 255); + darkColor = 0xff000000; + if (slotApplied.darkColor) { + const { r, g, b } = slotApplied.darkColor; + darkColor = 0xff000000 | + (Math.floor(r * a) << 16) | + (Math.floor(g * a) << 8) | + Math.floor(b * a); + } + } else { + if (inColor) { + const a = Math.floor(inColor[3] * skelColor.a * slotColor.a * attachmentColor.a * 255); + const r = Math.floor(inColor[0] * skelColor.r * slotColor.r * attachmentColor.r * 255); + const g = Math.floor(inColor[1] * skelColor.g * slotColor.g * attachmentColor.g * 255); + const b = Math.floor(inColor[2] * skelColor.b * slotColor.b * attachmentColor.b * 255); + color = (a << 24) | (r << 16) | (g << 8) | b; + } else { + const a = Math.floor(skelColor.a * slotColor.a * attachmentColor.a * 255); + const r = Math.floor(skelColor.r * slotColor.r * attachmentColor.r * 255); + const g = Math.floor(skelColor.g * slotColor.g * attachmentColor.g * 255); + const b = Math.floor(skelColor.b * slotColor.b * attachmentColor.b * 255); + color = (a << 24) | (r << 16) | (g << 8) | b; + } + + darkColor = 0; + if (slotApplied.darkColor) { + const { r, g, b } = slotApplied.darkColor; + darkColor = (Math.floor(r * 255) << 16) | (Math.floor(g * 255) << 8) | Math.floor(b * 255); + } } if (clipper.isClipping()) { @@ -146,7 +179,7 @@ export class SkeletonRendererCore { cmd.uvs.set(uvs.subarray(0, verticesCount << 1)); for (let j = 0; j < verticesCount; j++) { - cmd.colors[j] = (a << 24) | (r << 16) | (g << 8) | b; + cmd.colors[j] = color; cmd.darkColors[j] = darkColor; } @@ -257,6 +290,8 @@ export class SkeletonRendererCore { } } +// values with under score is the original sized array, bigger than necessary +// values without under score is a view of the orignal array, sized as needed interface RenderCommand { positions: Float32Array; uvs: Float32Array; diff --git a/spine-ts/spine-phaser-v3/src/SpineGameObject.ts b/spine-ts/spine-phaser-v3/src/SpineGameObject.ts index 4f9114494..99df76868 100644 --- a/spine-ts/spine-phaser-v3/src/SpineGameObject.ts +++ b/spine-ts/spine-phaser-v3/src/SpineGameObject.ts @@ -226,7 +226,6 @@ export class SpineGameObject extends DepthMixin( animationState: AnimationState; beforeUpdateWorldTransforms: (object: SpineGameObject) => void = () => { }; afterUpdateWorldTransforms: (object: SpineGameObject) => void = () => { }; - private premultipliedAlpha = false; private offsetX = 0; private offsetY = 0; @@ -243,7 +242,6 @@ export class SpineGameObject extends DepthMixin( super(scene, (window as any).SPINE_GAME_OBJECT_TYPE ? (window as any).SPINE_GAME_OBJECT_TYPE : SPINE_GAME_OBJECT_TYPE); this.setPosition(x, y); - this.premultipliedAlpha = this.plugin.isAtlasPremultiplied(atlasKey); this.skeleton = this.plugin.createSkeleton(dataKey, atlasKey); this.animationStateData = new AnimationStateData(this.skeleton.data); this.animationState = new AnimationState(this.animationStateData); @@ -374,7 +372,6 @@ export class SpineGameObject extends DepthMixin( sceneRenderer.drawSkeleton( src.skeleton, - src.premultipliedAlpha, -1, -1, (vertices, numVertices, stride) => { diff --git a/spine-ts/spine-phaser-v3/src/SpinePlugin.ts b/spine-ts/spine-phaser-v3/src/SpinePlugin.ts index 73595f692..143498cf3 100644 --- a/spine-ts/spine-phaser-v3/src/SpinePlugin.ts +++ b/spine-ts/spine-phaser-v3/src/SpinePlugin.ts @@ -58,7 +58,7 @@ export interface SpineGameObjectConfig extends Phaser.Types.GameObjects.GameObje * The scene's {@link LoaderPlugin} (`Scene.load`) gets these additional functions: * * `spineBinary(key: string, url: string, xhrSettings?: XHRSettingsObject)`: loads a skeleton binary `.skel` file from the `url`. * * `spineJson(key: string, url: string, xhrSettings?: XHRSettingsObject)`: loads a skeleton binary `.skel` file from the `url`. - * * `spineAtlas(key: string, url: string, premultipliedAlpha: boolean = true, xhrSettings?: XHRSettingsObject)`: loads a texture atlas `.atlas` file from the `url` as well as its correponding texture atlas page images. + * * `spineAtlas(key: string, url: string, xhrSettings?: XHRSettingsObject)`: loads a texture atlas `.atlas` file from the `url` as well as its correponding texture atlas page images. * * The scene's {@link GameObjectFactory} (`Scene.add`) gets these additional functions: * * `spine(x: number, y: number, dataKey: string, atlasKey: string, boundsProvider: SpineGameObjectBoundsProvider = SetupPoseBoundsProvider())`: @@ -70,7 +70,7 @@ export interface SpineGameObjectConfig extends Phaser.Types.GameObjects.GameObje * The plugin has additional public methods to work with Spine Runtime core API objects: * * `getAtlas(atlasKey: string)`: returns the {@link TextureAtlas} instance for the given atlas key. * * `getSkeletonData(skeletonDataKey: string)`: returns the {@link SkeletonData} instance for the given skeleton data key. - * * `createSkeleton(skeletonDataKey: string, atlasKey: string, premultipliedAlpha: boolean = true)`: creates a new {@link Skeleton} instance from the given skeleton data and atlas key. + * * `createSkeleton(skeletonDataKey: string, atlasKey: string)`: creates a new {@link Skeleton} instance from the given skeleton data and atlas key. * * `isPremultipliedAlpha(atlasKey: string)`: returns `true` if the atlas with the given key has premultiplied alpha. */ export class SpinePlugin extends Phaser.Plugins.ScenePlugin { @@ -119,9 +119,8 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin { const atlasFileCallback = function (this: Phaser.Loader.LoaderPlugin, key: string, url: string, - premultipliedAlpha: boolean, xhrSettings: Phaser.Types.Loader.XHRSettingsObject) { - const file = new SpineAtlasFile(this, key, url, premultipliedAlpha, xhrSettings); + const file = new SpineAtlasFile(this, key, url, xhrSettings); this.addFile(file.files); return this; }; @@ -225,35 +224,26 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin { /** Returns the TextureAtlas instance for the given key */ getAtlas (atlasKey: string) { - let atlas: TextureAtlas; - if (this.atlasCache.exists(atlasKey)) { - atlas = this.atlasCache.get(atlasKey); + if (this.atlasCache.exists(atlasKey)) return this.atlasCache.get(atlasKey); + + const atlas = new TextureAtlas(this.game.cache.text.get(atlasKey)); + if (this.isWebGL && this.gl) { + const gl = this.gl; + for (const atlasPage of atlas.pages) + atlasPage.setTexture(new GLTexture(gl, this.game.textures.get(`${atlasKey}!${atlasPage.name}`).getSourceImage() as HTMLImageElement | ImageBitmap, atlasPage.pma, false)); } else { - const atlasFile = this.game.cache.text.get(atlasKey) as { data: string, premultipliedAlpha: boolean }; - atlas = new TextureAtlas(atlasFile.data); - if (this.isWebGL && this.gl) { - const gl = this.gl; - const phaserUnpackPmaValue = gl.getParameter(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL); - if (phaserUnpackPmaValue) gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); - for (const atlasPage of atlas.pages) { - atlasPage.setTexture(new GLTexture(gl, this.game.textures.get(`${atlasKey}!${atlasPage.name}`).getSourceImage() as HTMLImageElement | ImageBitmap, false)); - } - if (phaserUnpackPmaValue) gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); - } else { - for (const atlasPage of atlas.pages) { - atlasPage.setTexture(new CanvasTexture(this.game.textures.get(`${atlasKey}!${atlasPage.name}`).getSourceImage() as HTMLImageElement | ImageBitmap)); - } - } - this.atlasCache.add(atlasKey, atlas); + for (const atlasPage of atlas.pages) + atlasPage.setTexture(new CanvasTexture(this.game.textures.get(`${atlasKey}!${atlasPage.name}`).getSourceImage() as HTMLImageElement | ImageBitmap)); } + this.atlasCache.add(atlasKey, atlas); return atlas; } /** Returns whether the TextureAtlas uses premultiplied alpha */ isAtlasPremultiplied (atlasKey: string) { - const atlasFile = this.game.cache.text.get(atlasKey); - if (!atlasFile) return false; - return atlasFile.premultipliedAlpha; + const atlas: TextureAtlas = this.atlasCache.get(atlasKey); + if (!atlas || atlas.pages.length === 0) return false; + return atlas.pages[0].pma; } /** Returns the SkeletonData instance for the given data and atlas key */ @@ -337,17 +327,15 @@ class SpineSkeletonDataFile extends Phaser.Loader.MultiFile { interface SpineAtlasFileConfig { key: string; url: string; - premultipliedAlpha?: boolean; xhrSettings?: Phaser.Types.Loader.XHRSettingsObject; } class SpineAtlasFile extends Phaser.Loader.MultiFile { - constructor (loader: Phaser.Loader.LoaderPlugin, key: string | SpineAtlasFileConfig, url?: string, public premultipliedAlpha?: boolean, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject) { + constructor (loader: Phaser.Loader.LoaderPlugin, key: string | SpineAtlasFileConfig, url?: string, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject) { if (typeof key !== "string") { const config = key; key = config.key; url = config.url; - premultipliedAlpha = config.premultipliedAlpha; xhrSettings = config.xhrSettings; } @@ -406,11 +394,6 @@ class SpineAtlasFile extends Phaser.Loader.MultiFile { textureManager.addImage(file.key, file.data); } } else { - this.premultipliedAlpha = this.premultipliedAlpha ?? (file.data.indexOf("pma: true") >= 0 || file.data.indexOf("pma:true") >= 0); - file.data = { - data: file.data, - premultipliedAlpha: this.premultipliedAlpha, - }; file.addToCache(); } } diff --git a/spine-ts/spine-phaser-v4/src/SpineGameObject.ts b/spine-ts/spine-phaser-v4/src/SpineGameObject.ts index c5235042d..169788d4a 100644 --- a/spine-ts/spine-phaser-v4/src/SpineGameObject.ts +++ b/spine-ts/spine-phaser-v4/src/SpineGameObject.ts @@ -226,7 +226,6 @@ export class SpineGameObject extends DepthMixin( animationState: AnimationState; beforeUpdateWorldTransforms: (object: SpineGameObject) => void = () => { }; afterUpdateWorldTransforms: (object: SpineGameObject) => void = () => { }; - private premultipliedAlpha = false; private offsetX = 0; private offsetY = 0; @@ -243,7 +242,6 @@ export class SpineGameObject extends DepthMixin( super(scene, (window as any).SPINE_GAME_OBJECT_TYPE ? (window as any).SPINE_GAME_OBJECT_TYPE : SPINE_GAME_OBJECT_TYPE); this.setPosition(x, y); - this.premultipliedAlpha = this.plugin.isAtlasPremultiplied(atlasKey); this.skeleton = this.plugin.createSkeleton(dataKey, atlasKey); this.animationStateData = new AnimationStateData(this.skeleton.data); this.animationState = new AnimationState(this.animationStateData); @@ -393,7 +391,6 @@ export class SpineGameObject extends DepthMixin( sceneRenderer.drawSkeleton( src.skeleton, - src.premultipliedAlpha, -1, -1, (vertices, numVertices, stride) => { diff --git a/spine-ts/spine-phaser-v4/src/SpinePlugin.ts b/spine-ts/spine-phaser-v4/src/SpinePlugin.ts index c1aab557f..fb3ce9a9e 100644 --- a/spine-ts/spine-phaser-v4/src/SpinePlugin.ts +++ b/spine-ts/spine-phaser-v4/src/SpinePlugin.ts @@ -58,7 +58,7 @@ export interface SpineGameObjectConfig extends Phaser.Types.GameObjects.GameObje * The scene's {@link LoaderPlugin} (`Scene.load`) gets these additional functions: * * `spineBinary(key: string, url: string, xhrSettings?: XHRSettingsObject)`: loads a skeleton binary `.skel` file from the `url`. * * `spineJson(key: string, url: string, xhrSettings?: XHRSettingsObject)`: loads a skeleton binary `.skel` file from the `url`. - * * `spineAtlas(key: string, url: string, premultipliedAlpha: boolean = true, xhrSettings?: XHRSettingsObject)`: loads a texture atlas `.atlas` file from the `url` as well as its correponding texture atlas page images. + * * `spineAtlas(key: string, url: string, xhrSettings?: XHRSettingsObject)`: loads a texture atlas `.atlas` file from the `url` as well as its correponding texture atlas page images. * * The scene's {@link GameObjectFactory} (`Scene.add`) gets these additional functions: * * `spine(x: number, y: number, dataKey: string, atlasKey: string, boundsProvider: SpineGameObjectBoundsProvider = SetupPoseBoundsProvider())`: @@ -70,8 +70,7 @@ export interface SpineGameObjectConfig extends Phaser.Types.GameObjects.GameObje * The plugin has additional public methods to work with Spine Runtime core API objects: * * `getAtlas(atlasKey: string)`: returns the {@link TextureAtlas} instance for the given atlas key. * * `getSkeletonData(skeletonDataKey: string)`: returns the {@link SkeletonData} instance for the given skeleton data key. - * * `createSkeleton(skeletonDataKey: string, atlasKey: string, premultipliedAlpha: boolean = true)`: creates a new {@link Skeleton} instance from the given skeleton data and atlas key. - * * `isPremultipliedAlpha(atlasKey: string)`: returns `true` if the atlas with the given key has premultiplied alpha. + * * `createSkeleton(atlasKey: string)`: creates a new {@link Skeleton} instance from the given skeleton data and atlas key. */ export class SpinePlugin extends Phaser.Plugins.ScenePlugin { game: Phaser.Game; @@ -116,9 +115,8 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin { const atlasFileCallback = function (this: Phaser.Loader.LoaderPlugin, key: string, url: string, - premultipliedAlpha: boolean, xhrSettings: Phaser.Types.Loader.XHRSettingsObject) { - const file = new SpineAtlasFile(this, key, url, premultipliedAlpha, xhrSettings); + const file = new SpineAtlasFile(this, key, url, xhrSettings); this.addFile(file.files); return this; }; @@ -204,35 +202,26 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin { /** Returns the TextureAtlas instance for the given key */ getAtlas (atlasKey: string) { - let atlas: TextureAtlas; - if (this.atlasCache.exists(atlasKey)) { - atlas = this.atlasCache.get(atlasKey); + if (this.atlasCache.exists(atlasKey)) return this.atlasCache.get(atlasKey); + + const atlas = new TextureAtlas(this.game.cache.text.get(atlasKey)); + if (this.isWebGL && this.gl) { + const gl = this.gl; + for (const atlasPage of atlas.pages) + atlasPage.setTexture(new GLTexture(gl, this.game.textures.get(`${atlasKey}!${atlasPage.name}`).getSourceImage() as HTMLImageElement | ImageBitmap, atlasPage.pma, false)); } else { - const atlasFile = this.game.cache.text.get(atlasKey) as { data: string, premultipliedAlpha: boolean }; - atlas = new TextureAtlas(atlasFile.data); - if (this.isWebGL && this.gl) { - const gl = this.gl; - const phaserUnpackPmaValue = gl.getParameter(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL); - if (phaserUnpackPmaValue) gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); - for (const atlasPage of atlas.pages) { - atlasPage.setTexture(new GLTexture(gl, this.game.textures.get(`${atlasKey}!${atlasPage.name}`).getSourceImage() as HTMLImageElement | ImageBitmap, false)); - } - if (phaserUnpackPmaValue) gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); - } else { - for (const atlasPage of atlas.pages) { - atlasPage.setTexture(new CanvasTexture(this.game.textures.get(`${atlasKey}!${atlasPage.name}`).getSourceImage() as HTMLImageElement | ImageBitmap)); - } - } - this.atlasCache.add(atlasKey, atlas); + for (const atlasPage of atlas.pages) + atlasPage.setTexture(new CanvasTexture(this.game.textures.get(`${atlasKey}!${atlasPage.name}`).getSourceImage() as HTMLImageElement | ImageBitmap)); } + this.atlasCache.add(atlasKey, atlas); return atlas; } /** Returns whether the TextureAtlas uses premultiplied alpha */ isAtlasPremultiplied (atlasKey: string) { - const atlasFile = this.game.cache.text.get(atlasKey); - if (!atlasFile) return false; - return atlasFile.premultipliedAlpha; + const atlas: TextureAtlas = this.atlasCache.get(atlasKey); + if (!atlas || atlas.pages.length === 0) return false; + return atlas.pages[0].pma; } /** Returns the SkeletonData instance for the given data and atlas key */ @@ -326,17 +315,15 @@ class SpineSkeletonDataFile extends Phaser.Loader.MultiFile { interface SpineAtlasFileConfig { key: string; url: string; - premultipliedAlpha?: boolean; xhrSettings?: Phaser.Types.Loader.XHRSettingsObject; } class SpineAtlasFile extends Phaser.Loader.MultiFile { - constructor (loader: Phaser.Loader.LoaderPlugin, key: string | SpineAtlasFileConfig, url?: string, public premultipliedAlpha?: boolean, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject) { + constructor (loader: Phaser.Loader.LoaderPlugin, key: string | SpineAtlasFileConfig, url?: string, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject) { if (typeof key !== "string") { const config = key; key = config.key; url = config.url; - premultipliedAlpha = config.premultipliedAlpha; xhrSettings = config.xhrSettings; } @@ -395,11 +382,6 @@ class SpineAtlasFile extends Phaser.Loader.MultiFile { textureManager.addImage(file.key, file.data); } } else { - this.premultipliedAlpha = this.premultipliedAlpha ?? (file.data.indexOf("pma: true") >= 0 || file.data.indexOf("pma:true") >= 0); - file.data = { - data: file.data, - premultipliedAlpha: this.premultipliedAlpha, - }; file.addToCache(); } } diff --git a/spine-ts/spine-player/src/Player.ts b/spine-ts/spine-player/src/Player.ts index 1b0e4d9df..6fecade75 100644 --- a/spine-ts/spine-player/src/Player.ts +++ b/spine-ts/spine-player/src/Player.ts @@ -66,9 +66,6 @@ export interface SpinePlayerConfig { /* Optional: List of skin names from which the user can choose. Default: all skins */ skins?: string[] - /* Optional: Whether the skeleton's atlas images use premultiplied alpha. Default: true */ - premultipliedAlpha?: boolean - /* Optional: Whether to show the player controls. When false, no external CSS file is needed. Default: true */ showControls?: boolean @@ -311,7 +308,6 @@ export class SpinePlayer implements Disposable { if (!config.backgroundColor) config.backgroundColor = config.alpha ? "00000000" : "000000"; if (!config.fullScreenBackgroundColor) config.fullScreenBackgroundColor = config.backgroundColor; if (config.backgroundImage && !config.backgroundImage.url) config.backgroundImage = undefined; - if (config.premultipliedAlpha === void 0) config.premultipliedAlpha = true; if (config.preserveDrawingBuffer === void 0) config.preserveDrawingBuffer = false; if (config.mipmaps === void 0) config.mipmaps = true; if (config.interactive === void 0) config.interactive = true; @@ -919,7 +915,7 @@ export class SpinePlayer implements Disposable { } // Draw the skeleton and debug output. - renderer.drawSkeleton(skeleton, config.premultipliedAlpha); + renderer.drawSkeleton(skeleton); if (Number(renderer.skeletonDebugRenderer.drawBones = config.debug!.bones! ?? false) + Number(renderer.skeletonDebugRenderer.drawBoundingBoxes = config.debug!.bounds! ?? false) + Number(renderer.skeletonDebugRenderer.drawClipping = config.debug!.clipping! ?? false) @@ -928,7 +924,7 @@ export class SpinePlayer implements Disposable { + Number(renderer.skeletonDebugRenderer.drawRegionAttachments = config.debug!.regions! ?? false) + Number(renderer.skeletonDebugRenderer.drawMeshTriangles = config.debug!.meshes! ?? false) > 0 ) { - renderer.drawSkeletonDebug(skeleton, config.premultipliedAlpha); + renderer.drawSkeletonDebug(skeleton); } // Draw the control bones. diff --git a/spine-ts/spine-threejs/src/AssetManager.ts b/spine-ts/spine-threejs/src/AssetManager.ts index fb5a031e9..de7722664 100644 --- a/spine-ts/spine-threejs/src/AssetManager.ts +++ b/spine-ts/spine-threejs/src/AssetManager.ts @@ -31,9 +31,11 @@ import { AssetManagerBase, Downloader } from "@esotericsoftware/spine-core" import { ThreeJsTexture } from "./ThreeJsTexture.js"; export class AssetManager extends AssetManagerBase { - constructor (pathPrefix: string = "", downloader: Downloader = new Downloader(), pma = false) { - super((image: HTMLImageElement | ImageBitmap) => { - return new ThreeJsTexture(image, pma); - }, pathPrefix, downloader); + constructor (pathPrefix: string = "", downloader: Downloader = new Downloader()) { + super( + (image: HTMLImageElement | ImageBitmap, pma = false) => new ThreeJsTexture(image, pma), + pathPrefix, + downloader, + ); } } diff --git a/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts b/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts index ab52829e9..055766e72 100644 --- a/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts +++ b/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts @@ -499,7 +499,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr const tempVector = new Vector3(); for (const widget of this.widgets) { - const { skeleton, pma, bounds, debug, offsetX, offsetY, dragX, dragY, fit, spinner, loading, clip, drag } = widget; + const { skeleton, bounds, debug, offsetX, offsetY, dragX, dragY, fit, spinner, loading, clip, drag } = widget; if (widget.isOffScreenAndWasMoved()) continue; const elementRef = widget.getHostElement(); @@ -614,7 +614,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr widget.worldX = worldOffsetX; widget.worldY = worldOffsetY; - renderer.drawSkeleton(skeleton, pma, -1, -1, (vertices, size, vertexSize) => { + renderer.drawSkeleton(skeleton, -1, -1, (vertices, size, vertexSize) => { for (let i = 0; i < size; i += vertexSize) { vertices[i] = vertices[i] + worldOffsetX; vertices[i + 1] = vertices[i + 1] + worldOffsetY; diff --git a/spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts b/spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts index d4793a595..5001c8c19 100644 --- a/spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts +++ b/spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts @@ -132,7 +132,6 @@ interface WidgetPublicProperties { // Usage of this properties is discouraged because they can be made private in the future interface WidgetInternalProperties { - pma: boolean dprScale: number dragging: boolean dragX: number @@ -648,13 +647,6 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable */ public dragging = false; - /** - * @internal - * If true, the widget has texture with premultiplied alpha - * Do not rely on this properties. It might be made private in the future. - */ - public pma = false; - /** * If true, indicate {@link dispose} has been called and the widget cannot be used anymore */ @@ -972,7 +964,6 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable ]); const atlas = this.overlay.assetManager.require(atlasPath) as TextureAtlas; - this.pma = atlas.pages[0]?.pma const atlasLoader = new AtlasAttachmentLoader(atlas); diff --git a/spine-ts/spine-webgl/src/AssetManager.ts b/spine-ts/spine-webgl/src/AssetManager.ts index 62e323b49..9b57296f4 100644 --- a/spine-ts/spine-webgl/src/AssetManager.ts +++ b/spine-ts/spine-webgl/src/AssetManager.ts @@ -33,8 +33,10 @@ import type { ManagedWebGLRenderingContext } from "./WebGL.js"; export class AssetManager extends AssetManagerBase { constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix: string = "", downloader: Downloader = new Downloader()) { - super((image: HTMLImageElement | ImageBitmap) => { - return new GLTexture(context, image); - }, pathPrefix, downloader); + super( + (image: HTMLImageElement | ImageBitmap, pma = false) => new GLTexture(context, image, pma), + pathPrefix, + downloader, + ); } } diff --git a/spine-ts/spine-webgl/src/GLTexture.ts b/spine-ts/spine-webgl/src/GLTexture.ts index 755422d9e..a8a764f55 100644 --- a/spine-ts/spine-webgl/src/GLTexture.ts +++ b/spine-ts/spine-webgl/src/GLTexture.ts @@ -34,13 +34,13 @@ export class GLTexture extends Texture implements Disposable, Restorable { context: ManagedWebGLRenderingContext; private texture: WebGLTexture | null = null; private boundUnit = 0; - private useMipMaps = false; + private pma: boolean; + private useMipMaps: boolean; - public static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL = false; - - constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps: boolean = false) { + constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, pma: boolean, useMipMaps: boolean = false) { super(image); this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context); + this.pma = pma; this.useMipMaps = useMipMaps; this.restore(); this.context.addRestorable(this); @@ -90,13 +90,15 @@ export class GLTexture extends Texture implements Disposable, Restorable { const gl = this.context.gl; if (!this.texture) this.texture = this.context.gl.createTexture(); this.bind(); - if (GLTexture.DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL) gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); + const previousUnpackPmaValue = gl.getParameter(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL); + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, !this.pma); 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); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, useMipMaps ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); if (useMipMaps) gl.generateMipmap(gl.TEXTURE_2D); + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, previousUnpackPmaValue); } restore () { diff --git a/spine-ts/spine-webgl/src/PolygonBatcher.ts b/spine-ts/spine-webgl/src/PolygonBatcher.ts index 5cc418f3b..17a3f1998 100644 --- a/spine-ts/spine-webgl/src/PolygonBatcher.ts +++ b/spine-ts/spine-webgl/src/PolygonBatcher.ts @@ -35,10 +35,7 @@ import { ManagedWebGLRenderingContext } from "./WebGL.js"; const GL_ONE = 1; const GL_ONE_MINUS_SRC_COLOR = 0x0301; -const GL_SRC_ALPHA = 0x0302; const GL_ONE_MINUS_SRC_ALPHA = 0x0303; -// biome-ignore lint/correctness/noUnusedVariables: intentional -const GL_ONE_MINUS_DST_ALPHA = 0x0305; const GL_DST_COLOR = 0x0306; export class PolygonBatcher implements Disposable { @@ -88,16 +85,16 @@ export class PolygonBatcher implements Disposable { } } - private static blendModesGL: { srcRgb: number, srcRgbPma: number, dstRgb: number, srcAlpha: number }[] = [ - { srcRgb: GL_SRC_ALPHA, srcRgbPma: GL_ONE, dstRgb: GL_ONE_MINUS_SRC_ALPHA, srcAlpha: GL_ONE }, - { srcRgb: GL_SRC_ALPHA, srcRgbPma: GL_ONE, dstRgb: GL_ONE, srcAlpha: GL_ONE }, - { srcRgb: GL_DST_COLOR, srcRgbPma: GL_DST_COLOR, dstRgb: GL_ONE_MINUS_SRC_ALPHA, srcAlpha: GL_ONE }, - { srcRgb: GL_ONE, srcRgbPma: GL_ONE, dstRgb: GL_ONE_MINUS_SRC_COLOR, srcAlpha: GL_ONE } + private static blendModesGL: { srcRgbPma: number, dstRgb: number, srcAlpha: number }[] = [ + { srcRgbPma: GL_ONE, dstRgb: GL_ONE_MINUS_SRC_ALPHA, srcAlpha: GL_ONE }, + { srcRgbPma: GL_ONE, dstRgb: GL_ONE, srcAlpha: GL_ONE }, + { srcRgbPma: GL_DST_COLOR, dstRgb: GL_ONE_MINUS_SRC_ALPHA, srcAlpha: GL_ONE }, + { srcRgbPma: GL_ONE, dstRgb: GL_ONE_MINUS_SRC_COLOR, srcAlpha: GL_ONE } ] - setBlendMode (blendMode: BlendMode, premultipliedAlpha: boolean) { + setBlendMode (blendMode: BlendMode) { const blendModeGL = PolygonBatcher.blendModesGL[blendMode]; - const srcColorBlend = premultipliedAlpha ? blendModeGL.srcRgbPma : blendModeGL.srcRgb; + const srcColorBlend = blendModeGL.srcRgbPma; const srcAlphaBlend = blendModeGL.srcAlpha; const dstBlend = blendModeGL.dstRgb; diff --git a/spine-ts/spine-webgl/src/SceneRenderer.ts b/spine-ts/spine-webgl/src/SceneRenderer.ts index 6013663ca..174447757 100644 --- a/spine-ts/spine-webgl/src/SceneRenderer.ts +++ b/spine-ts/spine-webgl/src/SceneRenderer.ts @@ -87,15 +87,13 @@ export class SceneRenderer implements Disposable { this.enableRenderer(this.batcher); } - drawSkeleton (skeleton: Skeleton, premultipliedAlpha = false, slotRangeStart = -1, slotRangeEnd = -1, transform: VertexTransformer | null = null) { + drawSkeleton (skeleton: Skeleton, slotRangeStart = -1, slotRangeEnd = -1, transform: VertexTransformer | null = null) { this.enableRenderer(this.batcher); - this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha; this.skeletonRenderer.draw(this.batcher, skeleton, slotRangeStart, slotRangeEnd, transform); } - drawSkeletonDebug (skeleton: Skeleton, premultipliedAlpha = false, ignoredBones?: Array) { + drawSkeletonDebug (skeleton: Skeleton, ignoredBones?: Array) { this.enableRenderer(this.shapes); - this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha; this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones); } diff --git a/spine-ts/spine-webgl/src/SkeletonDebugRenderer.ts b/spine-ts/spine-webgl/src/SkeletonDebugRenderer.ts index 2cee1f3ab..e92d3c1b4 100644 --- a/spine-ts/spine-webgl/src/SkeletonDebugRenderer.ts +++ b/spine-ts/spine-webgl/src/SkeletonDebugRenderer.ts @@ -47,7 +47,6 @@ export class SkeletonDebugRenderer implements Disposable { drawPaths = true; drawSkeletonXY = false; drawClipping = true; - premultipliedAlpha = false; scale = 1; boneWidth = 2; @@ -66,8 +65,7 @@ export class SkeletonDebugRenderer implements Disposable { const skeletonX = skeleton.x; const skeletonY = skeleton.y; const gl = this.context.gl; - const srcFunc = this.premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA; - shapes.setBlendMode(srcFunc, gl.ONE, gl.ONE_MINUS_SRC_ALPHA); + shapes.setBlendMode(gl.ONE, gl.ONE, gl.ONE_MINUS_SRC_ALPHA); const bones = skeleton.bones; if (this.drawBones) { diff --git a/spine-ts/spine-webgl/src/SkeletonRenderer.ts b/spine-ts/spine-webgl/src/SkeletonRenderer.ts index 6e75560ea..7b7e68ef0 100644 --- a/spine-ts/spine-webgl/src/SkeletonRenderer.ts +++ b/spine-ts/spine-webgl/src/SkeletonRenderer.ts @@ -42,7 +42,6 @@ export type VertexTransformer = (vertices: NumberArrayLike, numVertices: number, export class SkeletonRenderer { static QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0]; - premultipliedAlpha = false; private tempColor = new Color(); private tempColor2 = new Color(); private vertices: NumberArrayLike; @@ -64,7 +63,6 @@ export class SkeletonRenderer { draw (batcher: PolygonBatcher, skeleton: Skeleton, slotRangeStart: number = -1, slotRangeEnd: number = -1, transformer: VertexTransformer | null = null) { const clipper = this.clipper; - const premultipliedAlpha = this.premultipliedAlpha; const twoColorTint = this.twoColorTint; let blendMode: BlendMode | null = null; @@ -134,33 +132,25 @@ export class SkeletonRenderer { if (texture) { const slotColor = pose.color; const finalColor = this.tempColor; - finalColor.r = skeletonColor.r * slotColor.r * attachmentColor.r; - finalColor.g = skeletonColor.g * slotColor.g * attachmentColor.g; - finalColor.b = skeletonColor.b * slotColor.b * attachmentColor.b; - finalColor.a = skeletonColor.a * slotColor.a * attachmentColor.a; - if (premultipliedAlpha) { - finalColor.r *= finalColor.a; - finalColor.g *= finalColor.a; - finalColor.b *= finalColor.a; - } + const alpha = skeletonColor.a * slotColor.a * attachmentColor.a; + finalColor.r = skeletonColor.r * slotColor.r * attachmentColor.r * alpha; + finalColor.g = skeletonColor.g * slotColor.g * attachmentColor.g * alpha; + finalColor.b = skeletonColor.b * slotColor.b * attachmentColor.b * alpha; + finalColor.a = alpha; const darkColor = this.tempColor2; if (!pose.darkColor) darkColor.set(0, 0, 0, 1.0); else { - if (premultipliedAlpha) { - darkColor.r = pose.darkColor.r * finalColor.a; - darkColor.g = pose.darkColor.g * finalColor.a; - darkColor.b = pose.darkColor.b * finalColor.a; - } else { - darkColor.setFromColor(pose.darkColor); - } - darkColor.a = premultipliedAlpha ? 1.0 : 0.0; + darkColor.r = pose.darkColor.r * alpha; + darkColor.g = pose.darkColor.g * alpha; + darkColor.b = pose.darkColor.b * alpha; + darkColor.a = 1; } const slotBlendMode = slot.data.blendMode; if (slotBlendMode !== blendMode) { blendMode = slotBlendMode; - batcher.setBlendMode(blendMode, premultipliedAlpha); + batcher.setBlendMode(blendMode); } if (clipper.isClipping() && clipper.clipTriangles(renderable.vertices, triangles, triangles.length, uvs, finalColor, darkColor, twoColorTint, vertexSize)) { @@ -175,7 +165,7 @@ export class SkeletonRenderer { verts[v] = finalColor.r; verts[v + 1] = finalColor.g; verts[v + 2] = finalColor.b; - verts[v + 3] = finalColor.a; + verts[v + 3] = alpha; verts[v + 4] = uvs[u]; verts[v + 5] = uvs[u + 1]; } @@ -184,7 +174,7 @@ export class SkeletonRenderer { verts[v] = finalColor.r; verts[v + 1] = finalColor.g; verts[v + 2] = finalColor.b; - verts[v + 3] = finalColor.a; + verts[v + 3] = alpha; verts[v + 4] = uvs[u]; verts[v + 5] = uvs[u + 1]; verts[v + 6] = darkColor.r;