Re: [csswg-drafts] [filter-effects] Clarify the feComposite's arithmetic mode (#3831)

Still can't understand how it should be implemented. Looks like a simple task, but I've spend a whole without any progress.

Here is the simplest implementation using C++/Qt:

```c++
#include <QImage>
#include <QPainter>

static const int ImgWidth = 500;
static const int ImgHeight = 500;

static const double K1 = 0.1;
static const double K2 = 0.2;
static const double K3 = 0.3;
static const double K4 = 0.4;

static int calc(int c1, int c2)
{
    const double i1 = c1 / 255.0;
    const double i2 = c2 / 255.0;
    const double result = K1*i1*i2 + K2*i1 + K3*i2 + K4;

    return (int)(qBound(0.0, result, 1.0) * 255.0);
}

int main()
{
    QImage img1(ImgWidth, ImgHeight, QImage::Format_ARGB32); // not premultiplied
    img1.fill(Qt::transparent);

    QImage img2(ImgWidth, ImgHeight, QImage::Format_ARGB32);
    img2.fill(Qt::transparent);

    QImage img3(ImgWidth, ImgHeight, QImage::Format_ARGB32);
    img3.fill(Qt::transparent);

    {
        QPainter p(&img1);
        p.setOpacity(0.5);
        p.fillRect(0, 0, 500, 500, Qt::green);
    }

    {
        QPainter p(&img2);
        p.fillRect(100, 100, 300, 300, Qt::blue);
    }

    for (int x = 0; x < ImgWidth; ++x) {
        for (int y = 0; y < ImgHeight; ++y) {
            const auto p1 = img1.pixelColor(x, y);
            const auto p2 = img2.pixelColor(x, y);

            const auto r = calc(p1.red(),   p2.red());
            const auto g = calc(p1.green(), p2.green());
            const auto b = calc(p1.blue(),  p2.blue());
            const auto a = calc(p1.alpha(), p2.alpha());

            img3.setPixelColor(x, y, QColor(r, g, b, a));
        }
    }

    img3.save("test.png");

    return 0;
}
```

The same thing, but using SVG:

```xml
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
    <filter id="filter1" color-interpolation-filters="sRGB" x="0" y="0" width="1" height="1">
        <feFlood flood-color="blue" x="100" y="100" width="300" height="300" result="r1"/>
        <feFlood flood-color="green" flood-opacity="0.5" x="0" y="0" width="500" height="500" result="r2"/>
        <feComposite operator="arithmetic" in="r1" in2="r2" k1="0.1" k2="0.2" k3="0.3" k4="0.4"/>
    </filter>
    <rect width="500" height="500" fill="none" filter="url(#filter1)"/>
</svg>
```

Expected | Actual
--- | ---
![expected](https://user-images.githubusercontent.com/725494/56238428-2e063e00-6097-11e9-89fa-99026a891881.png) | ![actual](https://user-images.githubusercontent.com/725494/56238431-3199c500-6097-11e9-960e-98e5e82e6e04.png)

I'm close, but still not there.

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

Received on Tuesday, 16 April 2019 19:35:24 UTC