Fuzzy pixelated outlines around shapes in my PNG images

Question

I have a 32 bit 64x64 PNG image which shows some different coloured shapes:

When I display this image at a larger size in a browser, the shapes start to get fuzzy outlines:

This is a problem, because when I try to replace a particular color using a shader, the fuzzy pixels do not match the color I am trying to replace. For example here I want to swap red for white pixels, but I am still getting a red outline:

My shader in this example is a fragment shader doing a straight pixel swap:

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

How can I avoid this pixelation of my image? Whats confusing is if I zoom into the original image in Paint .Net, the borders around the shapes appear to be perfect with no pixelation / fuzziness / blurriness:

What am I missing?

Answer 1

This can easily be solved with filtering your texture : magFilter, minFilter and anisotropy.

And this post will solve your problem.

Demo on this fiddle. Commenting out the texture filtering will bring back the fuzzy borders.

Answer 2

I just want to add that in this sort of cases the reason for the underlying problem is usually a color of the transparent areas. Pixel can be completely transparent, but during sampling and filtering, unless proper method is selected (to have Alpha channel treated as transparency), the area between two pixels will interpolate from visible to non visible, the color will also interpolate, and part of still visible area will catch a bit of color contained within the transparent areas. If for some reason above mentioned solution (Hesha's answer) is not viable, the somewhat fix could be achieved by opening image in, for example, GIMP, duplicating a layer, blurring the bottom layer, settings it's alpha to very low (to be clamped by shader) and saving the image. But it's unlikely that this would have to be your last resort.