W3C home > Mailing lists > Public > www-style@w3.org > May 2011

Re: [css3-images] cross-fade()

From: Brendan Kenny <bckenny@gmail.com>
Date: Fri, 6 May 2011 11:15:21 -0700
Message-ID: <BANLkTin8DSFepfhKc8Z71y3uPNid9ayFkQ@mail.gmail.com>
To: "L. David Baron" <dbaron@dbaron.org>
Cc: Alex Danilo <alex@abbra.com>, fantasai <fantasai.lists@inkedblade.net>, www-style@w3.org
To back up all the "I think"s with another, this looks correct. It
does seem a little strange to algebraically define how to linearly
interpolate the image size but then defer to Porter-Duff for addition,
though :)

It seems like the more important phrase to be careful with is "has a
global alpha applied to it." Is this defined elsewhere? It's not a
huge leap, but it seems better to just identify this as Porter-Duff's
dissolve operator and dispel any confusion about premultiplication or
whether all components are scaled equally.

Brendan

On Thu, May 5, 2011 at 8:30 PM, L. David Baron <dbaron@dbaron.org> wrote:
> On Friday 2011-05-06 12:47 +1000, Alex Danilo wrote:
>> Hi Fantasai & All,
>>
>> --Original Message--:
>> >On 05/04/2011 02:43 PM, Rik Cabanier wrote:
>> >> David Baron wrote:
>> >>> I think the current definition of cross-fade() in
>> >>> http://dev.w3.org/csswg/css3-images/#cross-fade-function is
>> >>> incorrect. It defines cross-fade() in terms of the porter-duff over
>> >>> operator, which is not symmetric. This means that cross-fade(A, B,
>> >>> 30%) is different from cross-fade(B, A, 70%).
>
> The version we're discussing is:
> http://dev.w3.org/cvsweb/~checkout~/csswg/css3-images/Overview.html?rev=1.81;content-type=text%2Fhtml#cross-fade-function
>
>> This is not correct, they are the same.
>>
>> A * (1 - 0.3) + B * 0.3 == B * (1 - 0.7) + A * 0.7
>
> No, the formulation with over, for cross-fade(A, B, p) is:
> C_R = (1-p) * C_A + p * C_B * (1 - (_A * (1-p)))
> since over multiplies the image underneath by 1 minus the alpha of
> the image on top. Plus does not, so with with plus it's just:
> C_R = (1-p) * C_A + p + C_B
>
> (I'm using C_R, C_A, C_B for the value for a given pixel of each
> color component of the result, image A, or image B, and _A for the
> alpha component of image A.)
>
> -David
>
>
>
>>
>> >>> I *think*, though I'm not sure, that the right way to define
>> >>> cross-fade is in terms of the plus operator described in section 4.5
>> >>> of the original Porter-Duff paper:
>> >>> http://keithp.com/~keithp/porterduff/
>> >>
>> >> I *think* you're right.
>> >>
>> >> It should read either:
>> >>
>> >>  Then, the start image has a global alpha applied to it equal to
>> >>  (1-p), the end image has a global alpha applied to it equal to p,
>> >>  and the end image is then composited over the start image with
>> >>  the plus operation
>> >>
>> >> or
>> >>
>> >>  Then, the end image has a global alpha applied to it equal to p,
>> >>  and the end image is then composited over the start image
>> >>  with the source-over operation
>> >>
>> >> but I could be wrong...
>> >
>> >Ok, I've updated the spec with s/source-over/plus/ per dbaron's instructions.
>> >But as I'm not a graphics person /at all/, I would like someone to confirm
>> >whether the resulting is correct. :)
>> >  http://dev.w3.org/csswg/css3-images/#cross-fade-function
>>
>> I don't think you want 'plus' here.
>>
>> If you are using the alpha, src-over is just an addition - do
>> not confuse it with the 'plus' operator which adds the
>> unpremultiplied colors, then clamps them to avoid overflow.
>>
>> What the function seems to be doing is just a src-over. If 'p'
>> is 30% you'll get 30% of one image, and 70% of the other. (1 - p).
>> Those would normally be composited with src-over which is plain
>> old alpha compositing.
>>
>> 'Plus' is used for a different kind of cross-fade as used in
>> movies. The two images are combined in such a way that values
>> exceed '1'. So, clipping of maximum values must be applied. The
>> effect of 'plus' is the second image appearing to take over the
>> old one - without any fade of the old one, then you kind of
>> reduce the old one by dropping it's alpha down. Hard to explain
>> in English.
>>
>> Anyway, I doubt it would make any sense to expect web browser
>> makers and anyone using existing graphics libraries to add
>> P-D 'plus' just for image transitions.
>>
>> Alex
>>
>> >~fantasai
>> >
>> >
>>
>
> --
> L. David Baron                 http://dbaron.org/
> Mozilla Corporation            http://www.mozilla.com/
>
>
Received on Friday, 6 May 2011 18:15:52 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:40 GMT