-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Feature: Canvas Blend and Boolean modes #8661
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
dunkeroni
wants to merge
17
commits into
invoke-ai:main
Choose a base branch
from
dunkeroni:feature/raster-blend-boolean
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
+327
−6
Conversation
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
…menu; support per-layer globalCompositeOperation in compositor; UI to toggle and select color blend modes (multiply, screen, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, hue, saturation, color, luminosity).
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
Adds Blend Modes and Boolean merge operations to the canvas raster layers.
Both of these are handled with the globalCompositeOperation feature, and due to some technical limitations on how we render things, blend modes are implemented as a non-destructive state of the raster layer and boolean merges are a destructive action.
Blend Modes are a common feature of other image creation platforms, used for easy creation of light, shadows, textures, and recoloring objects.
Technical Info:
Because we're using the features built into Konva and CSS rendering already, the effect fits nicely into the pipeline after all pixel information is resolved (e.g. Adjustments panel) and before layer transparency is applied. This means that users can enable a blend mode, and then continue to adjust the brightness and tone, and also leverage the layer transparency to control the strength of the effect. Users can also draw and erase on a layer with an active blend mode without any additional overhead.
We use and interact with raster layer information supported as Konva objects; and when merging or combining layers for img2img actions this PR uses the Konva global composite operation to resolve those layers. However, the live view is handled through the HTMLCanvasElement's mixBlendMode, which is functionally identical for the color modes we are using but doesn't support the boolean operations. Hence booleans are an independent action submenu instead.
Some caveats of using the HTML mixBlendMode:
QA Instructions
Create some layers and mash them together.
Boolean Operations:
Booleans are accessible via the right click menu. They work on the current layer and the layer directly below it (similar to "Merge Down").

Intersect: Returns the top layer where it overlaps the bottom layer.
Cut Out: Returns the bottom layer where it overlaps the top layer.
Cut Away: Returns the top layer where it does not overlap the bottom layer.
Exclude: Returns both layers where they do not overlap.
Blend Modes:
Blend mode is accessible via the right click menu.



Example: Adding glow effect

Example: Adding half-tone dot matrix texture

Texture got from: https://texturelabs.org/textures/grunge_265/ and applied with Overlay mode.
Merge Plan
Ready to merge. Most of the PR is just new menus that interact with our existing features.
Checklist
What's Newcopy (if doing a release after this PR)