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

我有一个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>

均匀的二维纹理1；
可变vec2 vUv；
void main（）{
vec4 tColor=纹理2D（纹理1，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=新颜色；
}
否则{
gl_FragColor=t颜色；
}
}

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

---

我遗漏了什么？

这可以通过过滤纹理轻松解决：

magFilter

、

minFilter

和

各向异性

而且会解决你的问题

---

演示一下这个。注释掉纹理过滤将恢复模糊边界。

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