Expand blend mode support with darken/lighten in WebGL2#1317
Merged
Conversation
Canvas: support all CSS blend modes (overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion). WebGL: add darken/lighten via gl.MIN/gl.MAX (WebGL2 only, falls back to normal on WebGL1). Add "add" as alias for "additive"/"lighter". Add gl.blendEquation calls for correct state management. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add per-blend-mode images for JSDoc documentation - Add Blend Modes example with green/red support indicators - Update JSDoc on both renderers with all blend mode images - Add image generation tool (scripts/generate-blendmode-images.html) - setBlendMode now returns the actually applied blend mode Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Expands blend mode support across renderers by adding CSS-style composite modes to Canvas (with capability detection) and adding darken/lighten support in WebGL2 via gl.MIN/gl.MAX, plus new documentation images and an examples-page visual comparison.
Changes:
- WebGLRenderer: add
darken/lighten(WebGL2) and ensure correct blend state transitions by applyinggl.blendEquationon mode switches;setBlendModenow returns the applied mode. - CanvasRenderer: support additional CSS blend modes with runtime acceptance checks; add
"add"alias;setBlendModenow returns the applied mode. - Documentation/examples: add per-blend-mode images, update JSDoc, add a new “Blend Modes” example, and update the changelog.
Reviewed changes
Copilot reviewed 5 out of 18 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/melonjs/src/video/webgl/webgl_renderer.js | WebGL2 darken/lighten support + blend equation state management; updated JSDoc and return value. |
| packages/melonjs/src/video/canvas/canvas_renderer.js | Adds CSS blend-mode support with browser acceptance probing; updated JSDoc and return value. |
| packages/melonjs/CHANGELOG.md | Documents the new blend mode support in Canvas/WebGL2. |
| packages/examples/src/main.tsx | Registers the new Blend Modes example in the examples app. |
| packages/examples/src/examples/blendModes/ExampleBlendModes.tsx | New visual grid example that probes blend mode support and displays results. |
| packages/melonjs/src/video/images/add-blendmode.png | New JSDoc image asset for “add” mode. |
| packages/melonjs/src/video/images/color-burn-blendmode.png | New JSDoc image asset for “color-burn” mode. |
| packages/melonjs/src/video/images/color-dodge-blendmode.png | New JSDoc image asset for “color-dodge” mode. |
| packages/melonjs/src/video/images/darken-blendmode.png | New JSDoc image asset for “darken” mode. |
| packages/melonjs/src/video/images/difference-blendmode.png | New JSDoc image asset for “difference” mode. |
| packages/melonjs/src/video/images/exclusion-blendmode.png | New JSDoc image asset for “exclusion” mode. |
| packages/melonjs/src/video/images/hard-light-blendmode.png | New JSDoc image asset for “hard-light” mode. |
| packages/melonjs/src/video/images/lighten-blendmode.png | New JSDoc image asset for “lighten” mode. |
| packages/melonjs/src/video/images/multiply-blendmode.png | New/updated JSDoc image asset for “multiply” mode. |
| packages/melonjs/src/video/images/normal-blendmode.png | New/updated JSDoc image asset for “normal” mode. |
| packages/melonjs/src/video/images/overlay-blendmode.png | New JSDoc image asset for “overlay” mode. |
| packages/melonjs/src/video/images/screen-blendmode.png | New/updated JSDoc image asset for “screen” mode. |
| packages/melonjs/src/video/images/soft-light-blendmode.png | New JSDoc image asset for “soft-light” mode. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+121
to
+126
| * Canvas and WebGL2: <br> | ||
| * - "darken" : retains the darkest pixels of both layers <br> | ||
| * <img src="../images/darken-blendmode.png" width="180"/> <br> | ||
| * - "lighten" : retains the lightest pixels of both layers <br> | ||
| * <img src="../images/lighten-blendmode.png" width="180"/> <br> | ||
| * Canvas only (falls back to "normal" in WebGL): <br> |
There was a problem hiding this comment.
The JSDoc implies "Canvas and WebGL2" support for darken/lighten, but this implementation explicitly probes globalCompositeOperation and falls back to normal when the browser rejects a mode. Consider rewording this section to reflect that Canvas support is browser-dependent (e.g., "Canvas (if supported by the browser) and WebGL2").
Comment on lines
+743
to
+744
| * "difference", "exclusion") are only supported by the Canvas renderer | ||
| * and will fall back to "normal" in WebGL. <br> |
There was a problem hiding this comment.
This JSDoc says the listed CSS modes are "only supported by the Canvas renderer", but CanvasRenderer.setBlendMode now includes capability detection and may fall back to normal if the browser rejects a given mode. Consider clarifying the wording to indicate Canvas support depends on browser support (and that WebGL always falls back).
Suggested change
| * "difference", "exclusion") are only supported by the Canvas renderer | |
| * and will fall back to "normal" in WebGL. <br> | |
| * "difference", "exclusion") may be supported by the Canvas renderer, depending on browser support, | |
| * and will always fall back to "normal" when using the WebGL renderer. <br> |
packages/melonjs/CHANGELOG.md
Outdated
| - TMX: support Tiled 1.8+ class-type custom properties (`type="class"` with nested properties) | ||
| - TMX: use Tiled 1.10+ `isCollection` tileset flag when available (fallback to image detection for older maps) | ||
| - TMX: support Tiled 1.12+ per-object opacity and visibility | ||
| - CanvasRenderer: support all CSS blend modes (`overlay`, `darken`, `lighten`, `color-dodge`, `color-burn`, `hard-light`, `soft-light`, `difference`, `exclusion`) |
There was a problem hiding this comment.
The changelog entry says CanvasRenderer "support all CSS blend modes", but the implementation uses capability detection and will fall back to normal when a browser rejects a mode. Consider tweaking the wording to set expectations (e.g., "adds support for additional CSS blend modes when supported by the browser", or mention the fallback behavior).
Suggested change
| - CanvasRenderer: support all CSS blend modes (`overlay`, `darken`, `lighten`, `color-dodge`, `color-burn`, `hard-light`, `soft-light`, `difference`, `exclusion`) | |
| - CanvasRenderer: add support for additional CSS blend modes (`overlay`, `darken`, `lighten`, `color-dodge`, `color-burn`, `hard-light`, `soft-light`, `difference`, `exclusion`) when supported by the browser (unsupported modes fall back to `normal`) |
Clarify JSDoc and CHANGELOG wording: Canvas blend mode support is browser-dependent (falls back to normal if unsupported), WebGL always falls back for advanced modes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Test plan
🤖 Generated with Claude Code