[css-backgrounds][css-masking] multiple mask layers and mask-composite

During the todays CSS WG call, there has been a discussion about mask-composite[1]. It was asked to align masking and background as close together as possible in general.

More specifically, it was asked to view the proposal for mask-composite in the light of background. Similar to background-blend-mode there could be a property background-composite that allows the different compositing operators defined by CSS Compositing[2].

The mask-composite and background-composite properties are both implemented prefixed in WebKit and Blink based browsers. It is possible to experiment with these implementations.

A problem that came up while implementing background-blend-mode is that many graphic libraries do not allow setting a compositing operator other than source-over together with a blend-mode other than normal. WebKit won’t apply blending if you specify a compositing operator other than source-over IIRC.

I will add a use case for compositing of background layers soon. The use case I had was compositing an image with a background color and continue using the result by blending if with another layer.

Greetings,
Dirk

[1] http://dirkschulze.github.io/specs/css-masking-1/#the-mask-composite
[2] http://www.w3.org/TR/compositing-1/#canvascompositingandblending

On Mar 5, 2014, at 9:49 PM, Dirk Schulze <dschulze@adobe.com> wrote:

> 
> On Mar 5, 2014, at 6:02 PM, fantasai <fantasai.lists@inkedblade.net> wrote:
> 
>> On 03/05/2014 03:15 AM, Dirk Schulze wrote:
>>> 
>>>> I vaguely remember the problem being something about choosing between
>>>> - each layer acts individually as a mask over all the layers+content
>>>>   before it
>>>> vs.
>>>> - composite all the mask images, then use that as a mask
>>>> and then the possibility of grouping certain combinations of images
>>>> rather than all or none. Does your proposal address that in a reasonable
>>>> way?
>>> 
>>> I believe so. Not only that, it provides much more control over the content,
>>> many people familiar with globalCompositeOperators from HTML canvas will
>>> appreciate having the same capabilities.
>>> 
>>> The two modes you mention can be archived with source-over (draw layers
>>> on top of each other and mask together) and destination-in (mask each
>>> layer with the the next layer and then mask content with the result).
>> 
>> Can you give an example that would accomplish the two behaviors above?
>> Do I need to be careful with the operator assigned to the last image,
>> for example?
> 
> I added 3 images to the compositing examples[1]. It hope it make things more clear. Please take a look at the examples.
> 
> Greetings,
> Dirk
> 
> [1] http://dirkschulze.github.io/specs/css-masking-1/#the-mask-composite
> 
>> 
>> ~fantasai

Received on Wednesday, 5 March 2014 22:20:29 UTC