Re: [css-compositing] "add" and "subtract" blend modes

On Fri, Aug 24, 2012 at 11:46 AM, Shawn Allen <shawn@stamen.com> wrote:

> On Aug 23, 2012, at 9:38 PM, Rik Cabanier wrote:
> > On Thu, Aug 23, 2012 at 5:32 PM, Shawn Allen <shawn@stamen.com> wrote:
> >> To be blunt, a compositing spec that excludes "add" or "subtract" feels
> incomplete to me, as those are two of the mathematically simplest
> operations.
> >
> > I don't believe there is a blend mode that does a "subtract". Are you
> maybe thinking of "difference"?
>
> "Linear burn" is the subtractive blend mode in Photoshop, though it's a
> bit more sophisticated than simple subtraction because it always subtracts
> the blended pixel values from white. (Sorry for the confusion.) That's the
> one that would let us simulate CMYK overprinting, and that I'm actually
> most interested in because I've used it before, e.g.:
>
>         http://www.flickr.com/photos/shazbot/7190127927/
>         http://www.flickr.com/photos/shazbot/6166343913/
>
> We do a lot of work with maps on the web here at Stamen, so I'm
> particularly interested in the ability to dynamically render individual
> layers of data as SVG and composite them in interesting ways, but this
> approach has all sorts of other applications outside of maps or SVG—think
> cyan, magenta and yellow text, or <canvas> elements each containing a
> single color and blended with CSS.
>
> That's just one stylistic use case, of course; both linear dodge and burn
> effects get a lot of use by Photoshop jockeys though, and, given the
> success of CSS3 features that emulate Photoshop effects, I expect that web
> designers would greatly appreciate the inclusion of these blend modes in
> the spec.
>
> Not that Wikipedia is the ultimate authority, but it does list both linear
> dodge and burn alongside color dodge and burn; and it includes add and
> subtract under "Simple arithmetic blend modes":
>
>         http://en.wikipedia.org/wiki/Blend_modes
>
> Is it reasonable to suggest that this spec should list all of the modes on
> this page?


It's completely reasonable.


> Or that at least the next version should?


That was my plan, but if you believe it's important, I might be able to
move it up.


> If that's the case, then these blend modes could be considered missing
> from the spec:
>
> * Linear dodge:
>         B(Cb, Cs) = Cb + Cs
>
> * Linear burn:
>         B(Cb, Cs) = Cb + Cs - 1
>
> * Vivid light (color dodge + color burn):
>         if (Cs > .5)
>                 B(Cb, Cs) = ColorDodge(Cb, Cs)
>         else
>                 B(Cb, Cs) = ColorBurn(Cb, Cs)
>
> * Linear light (linear dodge + linear burn):
>         if (Cs > .5)
>                 B(Cb, Cs) = LinearDodge(Cb, Cs)
>         else
>                 B(Cb, Cs) = LinearBurn(Cb, Cs)
> or:
>         B(Cb, Cs) = Cb + Cs * 2 - 1
>
> * Divide:
>         B(Cb, Cs) = Cb / Cs
>
> "Dissolve" is also listed on the Wikipedia page, but I don't think that's
> worth including in the spec because it's non-deterministic and not
> particularly useful.
>

I completely agree


>
> >> So yes, I do feel strongly that they should be in the first spec. Do
> the open source browsers have support for all of the other modes already?
> >
> > I just checked and both WebKit and Mozilla have the modes from the
> current spec built-in but none of the Photoshop ones.
>
> That's a bummer. Can any implementors speak to the difficulty or
> complexity of adding new blend modes, though? I'm blissfully ignorant of
> the implementation details, but these things have been relatively easy to
> do in JavaScript with canvas per-pixel operations or fragment shaders.
> (These technologies are way out of reach for web designers without much
> programming experience, though.)
>

I think it would be fairly easy for Chromium and Firefox since they do all
the math themselves.
I'm unsure about Safari because I *think* they just forward it to
CoreGraphics which does not have these. (They could of course always extend
their operating system :-))


>
> Please let me know if I'm being unreasonable. I'm just excited to see all
> of this stuff included because I think it'll be super useful and make for
> some very interesting things on the web.
>
> Cheers,
> --
> Shawn Allen
> shawn@stamen.com
> +1 415 558 1610
>
>