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

【问题标题】：Fuzzy pixelated outlines around shapes in my PNG images我的 PNG 图像中形状周围的模糊像素化轮廓
【发布时间】：2018-10-16 03:02:01
【问题描述】：

我有一个 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 中放大原始图像，形状周围的边框看起来很完美，没有像素化/模糊/模糊：

我错过了什么？

【问题讨论】：

youtube.com/watch?v=fy9Pby0Gzsc

标签： image-processing three.js 2d fragment-shader

【解决方案1】：

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

this post 会解决你的问题。

关于这个fiddle的演示。注释掉纹理过滤将带回模糊的边界。

【讨论】：

【解决方案2】：

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

【讨论】：