Quality loss (bluriness) in shader

151 Views Asked by At

I am trying to make a shader that either passes through an image unaltered or displays a tiled texture depending on some conditions. It more or less works, but I noticed that the tiled texture doesn't quite looks right, so I simplified the shader for testing so it would only show the tiled image:

precision highp float;

uniform sampler2D uSampler;
varying vec2 vTextureCoord;
varying vec4 vColor;
varying vec2 vFilterCoord;
uniform vec2 dimensions;
uniform vec4 filterArea;

uniform sampler2D selector;
uniform vec2 selectorSize;

uniform sampler2D alternate;
uniform vec2 alternateSize;

vec2 mapCoord( vec2 coord )
{
    coord *= filterArea.xy;
    coord += filterArea.zw;

    return coord;
}

vec2 unmapCoord( vec2 coord )
{
    coord -= filterArea.zw;
    coord /= filterArea.xy;

    return coord;
}

void main()
{
    vec2 coord  = vTextureCoord;
         coord  = mapCoord(coord);

    // sample the alternate:
    vec2 av = mod( coord, alternateSize ) / (alternateSize - 1.0);
    vec4 alt = texture2D(alternate, av);

    gl_FragColor = alt ;
}

I am not quite sure what's going on. The original image is 100x100, and the repeating area is 100x100. The pattern looks the same, but it's slightly blurred in in the shader (see screenshots below). Does this have to do with retina? (I haven't done anything special to setup retina) Mipmaps? Something else?

UPDATE: As suggested by @danieltran, I tried setting the texture to GL_NEAREST (In pixi, this is done by passing the Pixi.SCALE_MODES.NEAREST to the texture constructor). And it made no difference, so then I just tried making a sprite from the texture and displaying that, and it has the same problem, so I think this is either something related to retina, or something pixi-specific.

Original texture is taken from this image:

enter image description here

Here's what the output of the shader looks like:

enter image description here

1

There are 1 best solutions below

3
On

Change the texture filter to GL_NEAREST then it will solve the issue.

To be specific, the problem here is when GPU look up for the fragment, instead of taking the colour from 1 single texel, it calculate the colour using nearby texels also, that make the picture looks blurry.