- From: Alan Gresley <alan@css-class.com>
- Date: Mon, 05 Sep 2011 23:22:14 +1000
- To: Brian Manthos <brianman@microsoft.com>
- CC: "Tab Atkins Jr." <jackalmage@gmail.com>, Cameron McCormack <cam@mcc.id.au>, "www-style@w3.org" <www-style@w3.org>
On 23/08/2011 3:24 AM, Brian Manthos wrote:
> Alan, your definition of pre-multiplied doesn't match our working
> definition -- at least as I understand it.
>
> More specifically...
>
>> non-premultiplied composite on black
>>
>> 100% rgba(255,255,255,1.0) = rgb(255,255,255) 50%
>> rgba(127,127,127,0.5) = rgb(64,64,64) 75%
>> rgba(64,64,64,0.25) = rgb(16,16,16) 87.5%
>> rgba(32,32,32,0.125) = rgb(4,4,4) 93.75%
>> rgba(16,16,16,0.0625) = rgb(1,1,1)
>
> The 2nd column is valid by our working definition of
> non-pre-multiplied, for the last three rows the first column and the
> second column don't align -- at least the way I would label them.
> Also, the pattern from the 1st two rows and the last three rows is
> inconsistent -- the alpha is dropping but the percentage is rising.
Your correct but back to front. It should have been charted like below
(beginning at O% for first column in the first row).
non-premultiplied composite on black
0% rgba(255,255,255,1.0) = rgb(255,255,255)
50% rgba(127,127,127,0.5) = rgb(64,64,64)
75% rgba(64,64,64,0.25) = rgb(16,16,16)
87.5% rgba(32,32,32,0.125) = rgb(4,4,4)
93.75% rgba(16,16,16,0.0625) = rgb(1,1,1)
The first column are the steps (of even temperaments) of a gradient from
beginning to end or from 0% to 100%. If we swapped 'white' for
'indianred' (composite on a black background), we have the same scaling
(slightly out by rounding decimal place).
non-premultiplied composite on black
0% rgba(205,92,92,1.0) = rgb(205,92,92)
50% rgba(102,46,46,0.5) = rgb(51,23,23)
75% rgba(51,23,23,0.25) = rgb(13,6,6)
87.5% rgba(27,12,12,0.125) = rgb(3,1,1)
93.75% rgba(13,6,6,0.0625) = rgb(1,0,0)
There is a mathematical symmetry (a negative) with the reversed gradient
on a white background.
non-premultiplied composite on white
0% rgba(0,0,0,1.0) = rgb(0,0,0)
50% rgba(127,127,127,0.5) = rgb(191,191,191)
75% rgba(191,191,191,0.25) = rgb(239,239,239)
87.5% rgba(223,223,223,0.125) = rgb(251,251,251)
93.75% rgba(239,239,239,0.0625) = rgb(254,254,254)
For each step, this mathematical symmetry will result in rgb(255,255,255).
composite on black composite on white
0% rgb(255,255,255) rgb(0,0,0)
50% rgb(64,64,64) rgb(191,191,191)
75% rgb(16,16,16) rgb(239,239,239)
87.5% rgb(4,4,4) rgb(251,251,251)
93.75% rgb(1,1,1) rgb(254,254,254)
The below SVG plots this symmetry (the vertical lines of lime are 50% =
127, 75% = 191, 87.5% = 223 and 93.75% = 239).
http://css-class.com/test/svg/multiplied-alpha.svg
1. white to transparent-black composite of a
white background
2. white to transparent-black composite on a
black background
3. black to transparent-white composite of a
white background
4. black to transparent-white composite of a
black background
For those who can do the maths (not Alan's color cube maths). What is
happening in the SVG? I can see halves of halves repeating to infinity.
> Nonetheless, rounding aside (2nd row), your characterization of
> composition on black (3rd column) aligns with what I would expect.
>
>> premultiplied composite on black
>>
>> 100% rgba(255,255,255,1.0) = rgb(255,255,255) 50%
>> rgba(255,255,255,0.5) = rgb(127,127,127) 75%
>> rgba(255,255,255,0.25) = rgb(64,64,64) 87.5%
>> rgba(255,255,255,0.125) = rgb(32,32,32) 93.75%
>> rgba(255,255,255,0.0625) = rgb(16,16,16)
>
> [Same issue with alpha dropping but percentage rising.] [Same issue
> with rounding in second row; and now present in 3rd, 4th, and 5th
> rows.]
Same mistake by me. It should have been charted like this.
premultiplied composite on black
0% rgba(255,255,255,1.0) = rgb(255,255,255)
50% rgba(255,255,255,0.5) = rgb(127,127,127)
75% rgba(255,255,255,0.25) = rgb(64,64,64)
87.5% rgba(255,255,255,0.125) = rgb(32,32,32)
93.75% rgba(255,255,255,0.0625) = rgb(16,16,16)
> This doesn't match our working definition of premultiplied. More
> specifically, all but the first row are invalid pre-multiplied
> representations because the R, G, and B channels must be at or below
> (255 * A).
>
> The bucketing is as follows...
>
> Invalid prgba(255,255,255,0.5); ... prgba(128,128,128,0.5);
Agree, invalid.
> Valid prgba(127.5,127.5,127.5,0.5); ... prgba(0,0,0,0.5);
Correct, the color does not change. Even Tab would agree with me here.
Please reread this comment from fantasai here.
http://lists.w3.org/Archives/Public/www-style/2011Jun/0650.html
| Is there a way to avoid things like this? It
| seems to me that having 'transparent' mean
| 'transparent black' means you almost never
| get what you want, which is the *opacity*
| fading *without the color itself changing*.
| I think that's a common enough use case
| that it should be easy to do.
> Now, if you'd like to suggest pushing back on our
> working definition of pre-multiplied you can do so
No (see above concerning no change in color and below about Alpha
compositing).
> -- but then we need a new term for
> the CSS (and SVG) specification(s), and I suspect the industry as a
> whole.
Not at all. Maybe some understanding of what is multiplied, what is
perceptual color space and how Alpha compositing has this concept of
pre-multiplied color. There is no such thing as pre-multiplied space.
There are just pre-multiplied color points.
I would suggest using pre-transparent' for pre-multiplied gradients and
'transparent' (which is transparent-black) for (post)multiplied gradients.
> Perhaps "alpha-multiplied" vs. "non-alpha-multiplied".
There is no non-alpha-multiplied. There is premultiplied alpha and
non-premultiplied RGBA tuples.
> I think David's characterization of the current working
> definition of pre-multiplied is a pretty good one:
> # "pre" in this context really means # "have already
>been" rather than "before",
No. See it as non-traversal of multiplied space with only a
multiplication in alpha. Instead of traversing RGB multiplied space, the
gradient color is never changed. The composite color will always be
relative to the colors in one of the multiplied planes (faces) that
forms the six sides of a cube of multiplied color space.
Lets look at Alpha compositing.
http://en.wikipedia.org/wiki/Alpha_compositing
| If an alpha channel is used in an image,
| it is common to also multiply the color
| by the alpha value, to save on additional
| multiplications during compositing. This
| is usually referred to as premultiplied
| alpha.
(Note: to save on additional multiplications is what
premultiplied implies so 'pre' means 'before')
| Assuming that the pixel color is expressed
| using straight (non-premultiplied) RGBA tuples,
| a pixel value of (0.0, 0.5, 0.0, 0.5) implies
| a pixel which has 50% of the maximum green
| intensity and 50% opacity. If the color were
| fully green, its RGBA would be (0, 1, 0, 0.5).
| However, if this pixel uses premultiplied
| alpha, all of the RGB values (0, 1, 0) are
| multiplied by 0.5 and then the alpha is
| appended to the end to yield (0, 0.5, 0, 0.5).
| In this case, the 0.5 value for the G channel
| actually indicates 100% green intensity
| (with 50% opacity). For this reason, knowing
| whether a file uses premultiplied or straight
| alpha is essential to correctly process or
| composite it.
I will end this message here since I have been working on and off on
this message as well as color in general for many weeks. All I have done
is seen color as it truly should be represented.
http://en.wikipedia.org/wiki/RGB_color_space
http://upload.wikimedia.org/wikipedia/commons/b/b8/RGB.GIF
Within this representation are what I call HSL planes (view in WebKit).
http://css-class.com/test/css/3/3d-animation/color-cube4.htm
When you understand what HSL planes are, then you will know why yellow
to transparent black has olive with 50% opacity (not green which belongs
to the hue of lime) when composite on a white background.
You will also understand why I say that the usual representation of HSL
color is an abstraction (distortion) along with HSV color which are just
different cylindrical-coordinate representations.
http://en.wikipedia.org/wiki/HSL_and_HSV
This will come together here (lacking content and articulation of the
abstract view which is visualizing 3D color cubes and planes on a flat
display device).
http://css-class.com/articles/color/
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Monday, 5 September 2011 13:22:05 UTC