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

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? Or that at least the next version should? 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.

>> 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.)

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

Received on Friday, 24 August 2012 18:47:07 UTC