光滑的锯齿状像素 [英] Smooth jagged pixels

问题描述

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

I've created a pinch filter/effect on canvas using the following algorithm:

// 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的比较：

I've struggled a lot to get it to this point and I'm quite happy with the result. Nevertheless, I have a small problem; jagged pixels. Compare the JS pinch with Gimp's:

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

I don't know what I'm missing. Do I need to apply another filter after the actual filter? Or is my algorithm wrong altogether?

我无法在此处添加完整代码（作为SO片段），因为它包含4个base64图像/纹理（总共65k个字符）。相反，这是一个 JSFiddle 。

I can't add the full code here (as a SO snippet) because it contains 4 base64 images/textures (65k chars in total). Instead, here's a JSFiddle.

推荐答案

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

One way to clean up the result is supersampling. Here's a simple example: https://jsfiddle.net/Lawmo4q8/

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

Basically, instead of calculating a single value for a single pixel, you take multiple value samples within/around the pixel...

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);

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

...and merge the results in some way.

color /= 4;

这篇关于光滑的锯齿状像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！