我的 PNG 图像中形状周围的模糊像素化轮廓

Question

我有一个 32 位 64x64 PNG 图像，它显示了一些不同颜色的形状：

当我在浏览器中以更大尺寸显示此图像时，形状开始变得模糊：

这是个问题，因为当我尝试使用着色器替换特定颜色时，模糊像素与我尝试替换的颜色不匹配。例如这里我想将红色像素换成白色像素，但我仍然得到红色轮廓：

我在这个例子中的着色器是一个片段着色器做一个直接的像素交换：

        <script id="fragmentShader" type="x-shader/x-fragment">
        uniform sampler2D texture1;
        varying vec2 vUv;

        void main() {
            vec4 tColor = texture2D( texture1, vUv );
            vec4 maskColor = vec4(1.0, 0.0, 0.0, 1.0);
            vec4 newColor = vec4(0.0, 1.0, 0.0, 0.5);
            if (tColor.rgb == maskColor.rgb){
                gl_FragColor = newColor;
            }
            else {
                gl_FragColor = tColor;
            }

        }
    </script>

如何避免图像像素化？令人困惑的是，如果我在 Paint .Net 中放大原始图像，形状周围的边界看起来很完美，没有像素化/模糊/模糊：

我错过了什么？

Answer 1

这可以通过过滤纹理轻松解决：magFilter、minFilter 和 anisotropy。

而this post将解决您的问题。

此 fiddle 的演示。注释掉纹理过滤将恢复模糊边界。

Answer 2

我只想补充一点，在这种情况下，潜在问题的原因通常是透明区域的颜色。像素点可以完全透明，但是在采样和过滤过程中，除非选择合适的方法（将Alpha通道作为透明处理），否则两个像素点之间的区域会从可见到不可见进行插值，颜色也会进行插值，部分静止可见区域会捕捉到透明区域中包含的一些颜色。如果由于某种原因上述解决方案（Hesha 的回答）不可行，可以通过在例如 GIMP 中打开图像、复制图层、模糊底层、将其 alpha 设置为非常低（被夹紧）来实现某种程度的修复通过着色器）并保存图像。但这不太可能成为您的最后手段。

我的 PNG 图像中形状周围的模糊像素化轮廓

Fuzzy pixelated outlines around shapes in my PNG images

2d

image-processing

fragment-shader

three.js