Re: [css3-images] Gradients feedback

Boris Zbarsky wrote:
> On 9/8/10 7:38 AM, Alan Gresley wrote:
>> Ok, here we go. In sRGB space, all colors are fully opaque so any
>> gradient that goes from one point to another point within the sRGB space
>> will be a gradient of fully opaque color.
> 
> Yes.  As long as all colors are fully opaque, premultiplied and 
> un-premultiplied alpha behave exactly the same way, note.


Ok, need to get my head around that.


>> You would like the midway point between a gradient between yellow and
>> transparent to also be #ff7
> 
> No, I would like a gradient halfway from #ff0 to transparent to be 
> rgba(255, 255, 0, 0.5).
> 
> In un-premultiplied space, what you get instead is rgba(127, 127, 0, 0.5).


Correct.


>> or to been non-premultiplied but this would
>> mean that all colors (points) within sRGB space that are gradients to
>> transparent would have to be somewhat non-premultiplied. I don't know
>> how this can be done.
> 
> I have no idea what you're trying to say there.


What I mean is that all colors (points) within sRGB space that are 
gradients to transparent and are over a white background would be 
appear the same as if the same colors (points) within sRGB space were 
a gradient to white (opaque).


>> To explain the precise mathematics, I will use the example of the
>> gradient between yellow and transparent. The current midway point as
>> implemented by Gecko and WebKit is #bb7 (fully opaque).
> 
> No.  The current midway point as implemented by Gecko is rgba(127, 127, 
> 0, 0.5).  I can't speak to what webkit does authoritatively, but the 
> rendering in Webkit looks identical to Gecko's (see below).


WebKit seems to do the same.


> Note that _if_ you happen to composite rgba(127, 127, 0, 0.5) on top of 
> white you will get something like #bebe7f.


Correct.


> So if your "precise 
> mathematics" is coming from applying a color picker to the results of 
> compositing a gradient from yellow to transparent onto a white 
> background I can see you getting the numbers you get.


No, I came to that opaque color (out by one hexadecimal) based on a 
mental assumption which when plotted on my sRGB space / hexagon diagram.


> Testcase that shows that the gradient's intermediate points are not in 
> fact opaque in either engine:
> 
> <!DOCTYPE html>
> <style>
>   div { width: 100px; height: 100px; }
>   div.g {
>         background: -moz-linear-gradient(yellow, transparent);
>         background: -webkit-gradient(linear, center top, center bottom,
>                                      from(yellow), to(transparent));
>   }
> </style>
> <div style="background: white"><div class="g"></div></div>
> <div style="background: red"><div class="g"></div></div>


Ok, you make a very valid point here concerning a intermediate point 
which is semi-opaque. I was just understanding what was happening with 
a gradient from color to transparent before I move on to a gradient 
from color to color.


>> This same color #bb7 is also the midway point of the gradient from 
>> #770 to white.
> 
> Yes, but that's an accident of happening to composite onto a white 
> background.  See above.


It is not an accident, it is how color space works.


>> Using another example, the gradient between blue and transparent. The
>> current midway point as implemented by Gecko and WebKit is #77b (fully
>> opaque).
> 
> Again, no.  The current midway point is rgba(0, 0, 127, 0.5). 
> Compositing that onto a white background gives #7f7fbe, which is what 
> you seem to have measured with your color picker.


No, I didn't use a color picker for any of the midway points. I only 
used the color picker for 25% and 75%.



>> This all changes when the background behind the element with the
>> gradient is not white.
> 
> Nothing about the _gradient_ changes.  All that changes is what it's 
> composited against.  Given that you made this observation, I'm not sure 
> how you can claim with a straight face that the intermediate gradient 
> colors are "fully opaque".


What you think is a semi-opaque color can only be conceptualized when 
such semi-opaque colors have a background (not uniformed) that reveals 
transparency.

What is seen with rgba(255, 255, 0, 0.5) when the light is emitted by 
a monitor screen is many device pixels composed of vertical lines of 
RGB where both the R and G channels are 255 each and the blue channel 
is 0. The only true transparent colors are those that sit out the 
visible color spectrum, ei. radio waves or x-rays. I make such claims 
with a straight face /-:


>>> Computing gradients in premultiplied space makes gradients to
>>> transparent work much better. In non-premultiplied space they all
>>> look black-ish in the middle.
>>
>> Yes, it does look grayish or blackish but this is because our eyes have
>> difficulty see a light hue on a light background.
> 
> No, it's because you're desaturating the color in addition to changing 
> its opacity value if you transition to rgba(0,0,0,0) in unpremultiplied 
> space.


So I guess the special issue of Scientific American Mind - Volume 20, 
Number 1, Summer 2010 is wrong in it's discussion about the 
neuroscience of illusion.

<http://www.scientificamerican.com/slideshow.cfm?id=169-best-illusions>


>> The yellow lines shows the color (mapped to sRGB space) when the
>> background is white.
> 
> Gradients need to be defined independently of what they're being 
> composited onto.
> 
>> I hope this all makes some sense.
> 
> The part starting with the link to graphic doesn't sorry...
> 
> -Boris


The only reason that I am doing this is because I would like to be 
able to as an author to use premultiplied un-premultiplied gradients.

Is this what Gecko does (second of each test) with un-premultiplied 
gradients?


<http://css-class.com/test/css/colors/yellow-blue-premultiplied-un-premultiplied.htm>


   .a6 {background: rgba(255, 255, 0, 1);}
   .a7 {background: rgba(191, 191, 0, 0.75);}
   .a8 {background: rgba(127, 127, 0, 0.5);}
   .a9 {background: rgba(63, 63, 0, 0.25);}
   .a10 {background: rgba(0, 0, 0, 0);}


   .a16 {background: rgba(0, 0, 255, 1);}
   .a17 {background: rgba(0, 0, 191, 0.75);}
   .a18 {background: rgba(0, 0, 127, 0.5);}
   .a19 {background: rgba(0, 0, 63, 0.25);}
   .a20 {background: rgba(0, 0, 0, 0);}




-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Friday, 10 September 2010 07:36:26 UTC