Merge pull request #1339 from melonjs/fix/blend-mode-pma

Fix setBlendMode ignoring premultipliedAlpha flag

Author: obiot

packages/melonjs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## [18.3.0] (melonJS 2)
 
+### Fixed
+- WebGLRenderer: `setBlendMode()` now tracks the `premultipliedAlpha` flag — previously only the mode name was checked, causing incorrect GL blend function when mixing PMA and non-PMA textures with the same blend mode
+
 ### Chore
 - Minimum Node.js version is now 24.0.0 (Node 18/20 EOL, Node 22 in maintenance)
 - CI: upgrade to Node.js 24 and pnpm/action-setup v5

packages/melonjs/src/video/webgl/webgl_renderer.js

@@ -750,11 +750,15 @@ export default class WebGLRenderer extends Renderer {
 	 * @returns {string} the blend mode actually applied (may differ if the requested mode is unsupported)
 	 */
 	setBlendMode(mode = "normal", premultipliedAlpha = true) {
-		if (this.currentBlendMode !== mode) {
+		if (
+			this.currentBlendMode !== mode ||
+			this.currentPremultipliedAlpha !== premultipliedAlpha
+		) {
 			const gl = this.gl;
 			this.flush();
 			gl.enable(gl.BLEND);
 			this.currentBlendMode = mode;
+			this.currentPremultipliedAlpha = premultipliedAlpha;
 
 			// source factor depends on whether textures use premultiplied alpha
 			const srcAlpha = premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA;

packages/spine-plugin/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 2.0.2
+
+### Fixed
+- Auto-detect `premultipliedAlpha` from atlas pages and set it on the SkeletonRenderer, fixing incorrect blending for PMA textures (e.g. Cloud Pot)
+
 ## 2.0.1
 
 ### Changed

packages/spine-plugin/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@melonjs/spine-plugin",
-	"version": "2.0.1",
+	"version": "2.0.2",
 	"description": "melonJS Spine plugin",
 	"homepage": "https://www.npmjs.com/package/@melonjs/spine-plugin",
 	"type": "module",

packages/spine-plugin/src/Spine.js

@@ -193,6 +193,14 @@ export default class Spine extends Renderable {
 			this.plugin.assetManager.require(jsonFile),
 		);
 
+		// detect premultiplied alpha from atlas pages
+		this.premultipliedAlpha = atlas.pages.some((page) => {
+			return page.pma;
+		});
+		if (this.renderer.WebGLVersion >= 1) {
+			this.skeletonRenderer.premultipliedAlpha = this.premultipliedAlpha;
+		}
+
 		// Instantiate a new skeleton based on the atlas and skeleton data.
 		this.skeleton = new this.runtime.Skeleton(skeletonData);