Skip to content
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

Jump to bottom

[css-compositing-2] Add lighter composite operator to mix-blend-mode #445

Closed
khushalsagar opened this issue Nov 17, 2021 · 18 comments
Closed

[css-compositing-2] Add lighter composite operator to mix-blend-mode #445

khushalsagar opened this issue Nov 17, 2021 · 18 comments

Comments

@khushalsagar
Copy link
Member

This issue proposes adding "plus-lighter" to the list of blend modes specified in the Compositing and Blending spec. This blend mode is useful when cross-fading 2 elements for which all or a subset of pixels have identical color values. An example showing the problem is here : https://static-misc-3.glitch.me/composite-test/2.html.

Consider 2 elements each having a pixel with value C. These 2 elements are multiplied with opacity α and (1-α) respectively and placed in an isolated group. When blending using the 'normal' blend mode, the resulting pixel value is produced by source over compositing of the 2 elements :

Co = αs x Cs + αb x Cb x (1 – αs).

In this example, Cs = Cb = C; αs = α; αb = (1-α), which results in the follow color :
C0 = C x ( 1 - α + α^2);

For α = 0.5, this would be C x 0.75 while the desired result is C x 1.

The proposed "plus-lighter" blend-mode will add the source and backdrop color value : B(Cb, Cs) = min(Cb x αb + Cs x αs, 1). The backdrop is replaced by the result of this blending operation. For the example above this would result in :

Co = min(C x α + C x (1 - α)) = C

This issue is related to the proposal in w3c/csswg-drafts#6464 with the problem referenced in the explainer under cross-fading
@jakearchibald
Copy link
Contributor

I threw a few more demos together for this over at https://jakearchibald.com/2021/dom-cross-fade/

@svgeesus
Copy link
Contributor

(Shouldn't this issue be over here? )

I agree that the plus-lighter and plus-darker blend modes from Compositing-2 are useful. A sentence or two of explanation in the spec, in addition to the equations, would be helpful.

@jakearchibald
Copy link
Contributor

A sentence or two of explanation in the spec, in addition to the equations, would be helpful.

As in, explaining how they're useful for cross-fading?

@svgeesus
Copy link
Contributor

Like the others have, for example

Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images.

But yes, saying briefly why they are useful for cross fading would be good.

@jakearchibald
Copy link
Contributor

@svgeesus do you know why mix-blend-mode was limited to a subset of things available to canvas' globalCompositeOperation?

@svgeesus
Copy link
Contributor

I do not

@jakearchibald
Copy link
Contributor

This issue is kinda a dupe of #181, except lighter vs plus-lighter

@LeaVerou LeaVerou transferred this issue from w3c/csswg-drafts Nov 26, 2021
@LeaVerou
Copy link
Member

(Shouldn't this issue be over here? )

Yes! Transferred.

@jakearchibald
Copy link
Contributor

PR and tests #444

@khushalsagar
Copy link
Member Author

Thanks for moving this to the right place @LeaVerou. Could you let me know what the approval/resolution process is from here?

@khushalsagar
Copy link
Member Author

khushalsagar commented Dec 14, 2021 •
edited

Updating the proposal based on the discussion here.

I propose introducing "lighter" value for the CSS property mix-blend-mode. This would map to using normal blending and lighter compositing operation when an element with this property is composited with its backdrop.

The proposal above follows the pattern of globalCompositeOperation in 2D Canvas which allows developers to configure both blend mode and compositing operators. The pattern is as follows :

  1. If a blend mode value is specified, the compositing operator defaults to source-over.
  2. If a compositing operator is specified, the blend mode defaults to normal.

The current proposal is limited to exposing the "lighter" compositing operator since the use-case here requires only this mode. But we can allow specifying any compositing operator going forward which would make mix-blend-mode consistent with the capabilities globalCompositeOperation provides for 2D canvas.

@khushalsagar khushalsagar changed the title [css-compositing-2] Add plus-lighter to mix-blend-mode [css-compositing-2] Add lighter composite operator to mix-blend-mode Dec 14, 2021
@smfr
Copy link

smfr commented Dec 15, 2021

WebKit already supports plus-darker and plus-lighter in mix-blend-mode.

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed Add lighter composite operation, and agreed to the following:

  • RESOLVED: Add plus-lighter and plus-darker to mix-blend-mode in Compositing 2.
The full IRC log of that discussion <TabAtkins> Topic: Add lighter composite operation
<TabAtkins> github: https://github.com//issues/445
<smfr> q+
<TabAtkins> vmpstr: We'd like to add a plus-lighter to mix-blend-mode, and smfr says WebKit already supports plus-lighter and plus-darker
<TabAtkins> vmpstr: They're comp operations, not blend, so they'd work in the same way that canvas works, where if you set a blend mode the comp op is src-over; if you set a comp op the blend mode is normal
<Rossen_> ack smfr
<chris> q+
<TabAtkins> smfr: Issue says lighter, bu tyou're asking for plus-lighter?
<TabAtkins> vmpstr: I think the diff is just whether the color is clamped to 1
<TabAtkins> vmpstr: Okay for our use-case either way
<TabAtkins> smfr: Preferable to me, because our graphics framework doesn't support lighter. plus-lighter is fine
<TabAtkins> vmpstr: That's fine for us, yes.
<Rossen_> ack chris
<TabAtkins> chris: Good to see the alignment between CSS and Canvas as well.
<TabAtkins> chris: This'll be in Compositing 2? Have we had FPWD?
<TabAtkins> Rossen_: Don't think so
<TabAtkins> chris: Okay to request that?
<TabAtkins> Rossen_: Resolve on this issue first.
<TabAtkins> Rossen_: Objectiosn to adding plus-lighter and plus-darker?
<TabAtkins> RESOLVED: Add plus-lighter and plus-darker to mix-blend-mode in Compositing 2.
<TabAtkins> fantasai: Might want to give a chance to review, so fpwd next year.
<TabAtkins> Rossen_: Yeah, let's call for it next y ear.

@vmpstr vmpstr mentioned this issue Jan 5, 2022
Closed
@jakearchibald
Copy link
Contributor

@smfr Can you give me a practical example of plus-darker? I'd like to add an example to the spec.

@jakearchibald
Copy link
Contributor

Safari doesn't support plus-lighter in background-blend-mode, only mix-blend-mode. It seems weird to have it in one but not the other. Any objections to adding it to background-blend-mode too?

@jakearchibald
Copy link
Contributor

Ok, I'm a bit stuck trying to write tests for plus-darker. I'm pretty sure the definition we have is all wrong https://drafts.fxtf.org/compositing/#porterduffcompositingoperators_plus_darker.

co = max(0, 1 - αs x Cs + 1 - αb x Cb)
// Assuming
// αs = 1
// αb = 1
// Cs = 0.5
// Cb = 0
co = max(0, 1 - 1 x 0.5 + 1 - 1 x 0)
co = max(0, 1.5)
co = 1.5

That just doesn't make sense.

@jakearchibald
Copy link
Contributor

jakearchibald commented Jan 11, 2022 •
edited

I've removed plus-darker from the PR, since there isn't really a spec or a use-case. The PR is ready now #444

Opened #447 to discuss plus-darker further.

@jakearchibald
Copy link
Contributor

Spec and tests have landed. This can be closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@smfr @jakearchibald @LeaVerou @svgeesus @chrishtr @css-meeting-bot @khushalsagar