Changes between Initial Version and Version 1 of ColorDiscussionFall2015


Ignore:
Timestamp:
Nov 12, 2015 11:29:46 AM (8 years ago)
Author:
Jon Davis
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • ColorDiscussionFall2015

    v1 v1  
     1= WebKit Contributor’s Meeting =
     2
     3= Color =
     4
     5How do web author’s know about wide-gamut displays in their markup?
     6
     7== Code Cleanup ==
     8
     9* deviceRGB vs. sRGB
     10* Darin’s Color Reactoring
     11
     12== Designing content or wide-gamut displays ==
     13
     14'''deviceRGB History'''[[br]]
     15deviceRGB is from another era in WebKit, when it was just working on OS X (from KHTML). No colorspace correction.[[br]]
     16Direct color going to the system. When added, it got really slow. Ruining the browser. Magic value deviceRGB was used to tell the graphics system to use the old fast code path. It is obsolete today. Saying RGB is essentially sRGB. deviceRGB is a fossil in our code. People didn’t understand it. Used 2 places: used for speed, used for specific purposes.
     17
     18Our long nightmare is almost over. Most references have been removed.
     19
     20Beth added attribute to make it look better as opposed to fast. Now we can do both, the attribute isn’t needed.
     21
     22'''Refactoring'''[[br]]
     23Darin approached refactoring to address the bad smell of color correction code. 32-bit int to tell what the color is rgba[[br]]
     24You could pass `1` for the color which would mean transparent light blue.
     25
     26Color refactoring: remove RGBa32.[[br]]
     27`isValid` for null pointers. We love our null pointers.
     28
     29The future of the color class is letting it hold whatever color from CSS. How do we encapsulate this to handle different formats?
     30
     31Lessons learns:
     32
     33* A lot of special-case algorithms
     34    * Inverting colors
     35    * 5-6 places for darkening colors, each with different rules
     36    * canvas and CSS can specify color in HSL, CMYK
     37* Special named values for colors
     38* Multiple ways to convert NSColors to WebCoreColors; and back again
     39
     40Any colorspace ops need to go through our new color class.[[br]]
     41We currently support only one real different color space SRGB: linearized sRGB for SVG that we call Linear RGB. Filters code is affected by it.
     42
     43Getting rid of deviceRGB things, replacing RGB int with a struct with rgba, took a few tests and made them test what they say they’re testing. Efficiency code to handle clamping because we didn’t get the data types right.
     44
     45What are we going to do with the color class now?[[br]]
     46What other agenda do we have for color?[[br]]
     47Do other ports have color needs?[[br]]
     48GTK doesn’t have any color correction support. Go ahead and make your changes.
     49
     50One way to start is to treat all web color as corrected from sRGB.
     51
     52How do web authors think about colors and colorspace outside of sRGB? like P3?
     53
     54For an image tagged with a color profile, webkit does its best to show the most accurate colors for the display it’s on.
     55
     56On wide-gamut displays WebKit shows sRGB as sRGB. Chrome stretches the colorspace to the wide-gamut making images more vibrant. Webkit has more muted colors.
     57
     58Bright red Ferrari isn’t bright enough because you can specify a color bright enough in sRGB. One proposal is to specify color with:
     59
     60{{{
     61rgb(106%, -0.2%, 0)
     62}}}
     63
     64There would be clamping for these values.
     65
     66Wide is more range in the colorspace. Deep means more precision on the color (more colors).
     67
     68A couple ways to specify wide color:[[br]]
     69
     70{{{
     71color(“p3”, …, …, …);
     72}}}
     73
     74Second is a new two-property variant.
     75
     76{{{
     77color-space: “p3”, “sRGB”;
     78}}}
     79
     80@media queries:
     81
     82{{{
     83@media (display-color-depth: depth)
     84@media (IsupportThisLevelOfColorSpace)
     85
     86<picture>
     87    <source src=”normal.jpg”>
     88    <source media=“…” src=”wide.jpg”>
     89</picture>
     90}}}
     91
     92WebGL and 2D Canvas color space issues as well:
     93
     94{{{
     95var c = canvas.getContext(“2d”. { depth: 16, colorspace: &quot;p3&quot;});
     96}}}
     97
     98{{{
     99c.getImageData(x, y…);
     100}}}
     101
     102
     103You get data member defined as a byte array or a uint16 array.[[br]]
     104Currently you’ll have to do the math here.
     105
     106getImageData() will get slower… not exposing backing store…[[br]]
     107the speed is important… getting as close to the hardware as possible…
     108
     109Crazy image processing technique, you have to go outside 0-255, use a deep buffer canvas.
     110
     111'''Simon'''[[br]]
     112For images deeper than 8-bit color is 16-bit color which can use alpha.
     113
     114Formats need exposed in the “accept:” headers.
     115
     116Color intents could be used to help identify conversion options for gamut space.
     117
     118What ColorSync framework can we take advantage of to accelerate the colorspace translation.