Re: [csswg-drafts] [css-color-4] Gamut Mapping Algorithm and Color Banding (#7135)

Here is my tester code, using color.js but re-implementing the GMA from the pseudocode above. I found that epsilon cold be reduced without noticeable impact on runtime. In general this algorithm is running 4-5x faster than the current color.js one (which uses CIE LCH as the GM space and deltaE2000 as the distance metric, and also makes more in-gamut checks and uses more large objects):

```js
    const JND = 0.02;
    const ε = 0.0001;


    function gamutMap (origin, destination) {
        // OKLCH is the CSS GMA working space
        let origin_OKLCH = to(origin, 'oklch');
        let L = origin_OKLCH.coords[0];
        // return media white or black, if lightness is out of range
        if (L >= 1) return {space: destination, coords: [1, 1, 1], alpha: origin.alpha};
        if (L <= 0) return {space: destination, coords: [0, 0, 0], alpha: origin.alpha};
        // otherwise, return origin in destination, if in gamut
        if (inGamut(origin, destination)) return to(origin, destination);
        // set up for OKLCH chroma reduction
        let min = 0;
        let max = origin_OKLCH.coords[1];
        let min_inGamut = true;
        let current = clone(origin_OKLCH);
        let clipped = clip(current, destination);
        // but first check if we are "close" to in gamut
        let E = deltaEOK(clipped, current);
        if (E < JND) return clipped;
        // now actually binary search for the in-gamut chroma value
        // console.log("pre-checks complete, still here, doing actual gamut mapping");
        while (max - min > ε) {
            let chroma = (min + max) / 2;
            current.coords[1] = chroma;
            if (min_inGamut && inGamut(current, destination)) {
                min = chroma
            } else {
                clipped = clip(current, destination);
                E = deltaEOK(clipped, current);
                if (E < JND) {
                    if (E - JND < ε) {
                        return clipped;
                    } else {
                        min_inGamut =  false;
                        min = chroma
                    }
                } else {
                    max = chroma;
                }
            }
        } //  end of chroma reduction loop
    }
```

Live versions:

 - [CIE Lab explorer](https://svgees.us/Color/CIEexplorer.html)
 - [OKLab explorer](https://svgees.us/Color/okexplorer.html)

-- 
GitHub Notification of comment by svgeesus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7135#issuecomment-1173836089 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 4 July 2022 13:40:32 UTC