平滑锯齿状像素

Question

我使用以下算法在画布上创建了捏合滤镜/效果：

// iterate pixels
for (var i = 0; i < originalPixels.data.length; i+= 4) {

    // calculate a pixel's position, distance, and angle
    var pixel = new Pixel(affectedPixels, i, origin);

    // check if the pixel is in the effect area
    if (pixel.dist < effectRadius) {

        // initial method (flawed)
        // iterate original pixels and calculate the new position of the current pixel in the affected pixels
        if (method.value == "org2aff") {

            var targetDist = ( pixel.dist - (1 - pixel.dist / effectRadius) * (effectStrength * effectRadius) ).clamp(0, effectRadius);
            var targetPos  = calcPos(origin, pixel.angle, targetDist);

            setPixel(affectedPixels, targetPos.x, targetPos.y, getPixel(originalPixels, pixel.pos.x, pixel.pos.y));

        } else {

            // alternative method (better)
            // iterate affected pixels and calculate the original position of the current pixel in the original pixels
            var originalDist = (pixel.dist + (effectStrength * effectRadius)) / (1 + effectStrength);
            var originalPos  = calcPos(origin, pixel.angle, originalDist);

            setPixel(affectedPixels, pixel.pos.x, pixel.pos.y, getPixel(originalPixels, originalPos.x, originalPos.y));

        }

    } else {
        // copy unaffected pixels from original to new image
        setPixel(affectedPixels, pixel.pos.x, pixel.pos.y, getPixel(originalPixels, pixel.pos.x, pixel.pos.y));
    }
}

我为此付出了很多努力，我对结果感到非常满意。不过，我有一个小问题；锯齿状像素。比较 JS 捏和 Gimp 的：

我不知道我错过了什么。我需要在实际过滤器之后应用另一个过滤器吗？还是我的算法完全错误？

---

我无法在此处添加完整代码（作为 SO sn-p），因为它包含 4 个 base64 图像/纹理（总共 65k 个字符）。取而代之的是JSFiddle。

Answer 1

清理结果的一种方法是超级采样。这是一个简单的例子：https://jsfiddle.net/Lawmo4q8/

基本上，不是为单个像素计算单个值，而是在像素内/周围获取多个值样本...

let color =
    calcColor(x - 0.25, y - 0.25) + calcColor(x + 0.25, y - 0.25) +
    calcColor(x - 0.25, y + 0.25) + calcColor(x + 0.25, y + 0.25);

...并以某种方式合并结果。

color /= 4;