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

[khushalsagar]

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]

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

[svgeesus]

(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]

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]

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]

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

[svgeesus]

I do not

[jakearchibald]

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

[LeaVerou]

(Shouldn't this issue be over here? )

Yes! Transferred.

[jakearchibald]

PR and tests #444

[khushalsagar]

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

[khushalsagar]

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.

[smfr]

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

[css-meeting-bot]

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.

[jakearchibald]

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

[jakearchibald]

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]

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]

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]

Spec and tests have landed. This can be closed.