From c5d94c55adbf0da0bafe563d5d97834dd97ae160 Mon Sep 17 00:00:00 2001 From: NaN-codeZ <88243095+Vareniel@users.noreply.github.com> Date: Fri, 27 Jun 2025 17:04:52 +0700 Subject: [PATCH 1/4] rendering update! MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Updated how quad compositor render works when updating textures repeatedly - Previously if using canvas renderer, when using multiple Light2D objects at the same position, the colors didn’t blend correctly. This issue is now fixed, and Light2D objects properly blend colors when using the canvas renderer. --- packages/melonjs/src/renderable/renderable.js | 3 ++- .../src/video/webgl/compositors/quad_compositor.js | 10 +++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/melonjs/src/renderable/renderable.js b/packages/melonjs/src/renderable/renderable.js index 6d2c672a4a..e7c72d6862 100644 --- a/packages/melonjs/src/renderable/renderable.js +++ b/packages/melonjs/src/renderable/renderable.js @@ -10,6 +10,7 @@ import { ObservableVector3d } from "../math/observableVector3d.ts"; import { vector2dPool } from "../math/vector2d.ts"; import { matrix2dPool } from "../math/matrix2d.ts"; import { ObservablePoint } from "../geometries/observablePoint.ts"; +import Light2d from "./light2d.js"; /** * additional import for TypeScript @@ -713,7 +714,7 @@ export default class Renderable extends Rect { renderer.setTint(this.tint, this.getOpacity()); // apply blending if different from "normal" - if (this.blendMode !== renderer.getBlendMode()) { + if (this.blendMode !== renderer.getBlendMode() || this instanceof Light2d) { renderer.setBlendMode(this.blendMode); } } diff --git a/packages/melonjs/src/video/webgl/compositors/quad_compositor.js b/packages/melonjs/src/video/webgl/compositors/quad_compositor.js index 438c2e55d0..9391a243e3 100644 --- a/packages/melonjs/src/video/webgl/compositors/quad_compositor.js +++ b/packages/melonjs/src/video/webgl/compositors/quad_compositor.js @@ -100,6 +100,7 @@ export default class QuadCompositor extends Compositor { h = pixels.height, premultipliedAlpha = true, mipmap = true, + texture ) { const gl = this.gl; const isPOT = isPowerOfTwo(w) && isPowerOfTwo(h); @@ -114,9 +115,10 @@ export default class QuadCompositor extends Compositor { ? gl.REPEAT : gl.CLAMP_TO_EDGE; - const texture = gl.createTexture(); + const currentTexture = texture; + if (!currentTexture) currentTexture = gl.createTexture(); - this.bindTexture2D(texture, unit); + this.bindTexture2D(currentTexture, unit); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, rs); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, rt); @@ -170,7 +172,7 @@ export default class QuadCompositor extends Compositor { gl.generateMipmap(gl.TEXTURE_2D); } - return texture; + return currentTexture; } /** @@ -250,6 +252,8 @@ export default class QuadCompositor extends Compositor { w, h, texture.premultipliedAlpha, + undefined, + texture2D ); } else { this.bindTexture2D(texture2D, unit); From d621b0210a8d6aaddcb79df6cc35281a7bde5b44 Mon Sep 17 00:00:00 2001 From: Hanan <88243095+Vareniel@users.noreply.github.com> Date: Fri, 27 Jun 2025 17:21:15 +0700 Subject: [PATCH 2/4] minor fix --- .../melonjs/src/video/webgl/compositors/quad_compositor.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/melonjs/src/video/webgl/compositors/quad_compositor.js b/packages/melonjs/src/video/webgl/compositors/quad_compositor.js index 9391a243e3..104fa78858 100644 --- a/packages/melonjs/src/video/webgl/compositors/quad_compositor.js +++ b/packages/melonjs/src/video/webgl/compositors/quad_compositor.js @@ -100,7 +100,7 @@ export default class QuadCompositor extends Compositor { h = pixels.height, premultipliedAlpha = true, mipmap = true, - texture + texture, ) { const gl = this.gl; const isPOT = isPowerOfTwo(w) && isPowerOfTwo(h); @@ -115,7 +115,7 @@ export default class QuadCompositor extends Compositor { ? gl.REPEAT : gl.CLAMP_TO_EDGE; - const currentTexture = texture; + let currentTexture = texture; if (!currentTexture) currentTexture = gl.createTexture(); this.bindTexture2D(currentTexture, unit); @@ -253,7 +253,7 @@ export default class QuadCompositor extends Compositor { h, texture.premultipliedAlpha, undefined, - texture2D + texture2D, ); } else { this.bindTexture2D(texture2D, unit); From b41f6ed39b49268ff3f485488c24072c2f0db8a9 Mon Sep 17 00:00:00 2001 From: Hanan <88243095+Vareniel@users.noreply.github.com> Date: Fri, 27 Jun 2025 17:40:46 +0700 Subject: [PATCH 3/4] change instanceof to super.preDraw --- packages/melonjs/src/renderable/light2d.js | 11 +++++++++++ packages/melonjs/src/renderable/renderable.js | 3 +-- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/melonjs/src/renderable/light2d.js b/packages/melonjs/src/renderable/light2d.js index c5086f43c8..f26393c801 100644 --- a/packages/melonjs/src/renderable/light2d.js +++ b/packages/melonjs/src/renderable/light2d.js @@ -174,6 +174,17 @@ export default class Light2d extends Renderable { return true; } + /** + * preDraw this Light2d (automatically called by melonJS) + * Note: The renderer should set the blend mode again (after drawing other Light2d objects) + * to ensure colors blend correctly in the CanvasRenderer. + * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer instance + */ + preDraw(renderer) { + super.preDraw(renderer); + renderer.setBlendMode(this.blendMode); + } + /** * draw this Light2d (automatically called by melonJS) * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer instance diff --git a/packages/melonjs/src/renderable/renderable.js b/packages/melonjs/src/renderable/renderable.js index e7c72d6862..6d2c672a4a 100644 --- a/packages/melonjs/src/renderable/renderable.js +++ b/packages/melonjs/src/renderable/renderable.js @@ -10,7 +10,6 @@ import { ObservableVector3d } from "../math/observableVector3d.ts"; import { vector2dPool } from "../math/vector2d.ts"; import { matrix2dPool } from "../math/matrix2d.ts"; import { ObservablePoint } from "../geometries/observablePoint.ts"; -import Light2d from "./light2d.js"; /** * additional import for TypeScript @@ -714,7 +713,7 @@ export default class Renderable extends Rect { renderer.setTint(this.tint, this.getOpacity()); // apply blending if different from "normal" - if (this.blendMode !== renderer.getBlendMode() || this instanceof Light2d) { + if (this.blendMode !== renderer.getBlendMode()) { renderer.setBlendMode(this.blendMode); } } From 2dfbfadc8b395b08411ddd845c100894150e359b Mon Sep 17 00:00:00 2001 From: Hanan <88243095+Vareniel@users.noreply.github.com> Date: Fri, 27 Jun 2025 17:48:14 +0700 Subject: [PATCH 4/4] Update quad_compositor.js --- .../melonjs/src/video/webgl/compositors/quad_compositor.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/melonjs/src/video/webgl/compositors/quad_compositor.js b/packages/melonjs/src/video/webgl/compositors/quad_compositor.js index 104fa78858..2bc98c4eab 100644 --- a/packages/melonjs/src/video/webgl/compositors/quad_compositor.js +++ b/packages/melonjs/src/video/webgl/compositors/quad_compositor.js @@ -116,7 +116,9 @@ export default class QuadCompositor extends Compositor { : gl.CLAMP_TO_EDGE; let currentTexture = texture; - if (!currentTexture) currentTexture = gl.createTexture(); + if (!currentTexture) { + currentTexture = gl.createTexture(); + } this.bindTexture2D(currentTexture, unit);