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图像中的形状周围的模糊像素化轮廓

2 个答案: