Perte de qualité (flou) dans le shader

Question

J'essaie de créer un shader qui soit traverse une image inchangée, soit affiche une texture en mosaïque en fonction de certaines conditions. Il plus d'œuvres ou moins, mais je remarque que la texture en mosaïque ne semble tout à fait raison, donc je simplifie le shader pour le test donc il ne montrer la image en mosaïque:

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

Je ne suis pas tout à fait sûr de ce qui se passe sur. L'image originale est 100x100 et la zone répétée est 100x100. Le motif est le même, mais il est légèrement flou dans le shader (voir les captures d'écran ci-dessous). Est-ce que cela a à voir avec la rétine? (Je n'ai rien fait de spécial pour installer la rétine) Mipmaps? Autre chose?

MISE À JOUR: Comme le suggère @danieltran, j'ai essayé le réglage de la texture à GL_NEAREST (En pixi, cela se fait en passant le Pixi.SCALE_MODES.NEAREST au constructeur de texture). Et ça n'a fait aucune différence, alors j'ai juste essayé de faire un sprite à partir de la texture et de l'afficher, et ça a le même problème, donc je pense que c'est quelque chose lié à la rétine, ou quelque chose de pixi spécifique.

texture originale est tirée de cette image:

Voici ce que la sortie du shader ressemble:

Answer 1

Changer le filtre de texture à GL_NEAREST il résoudra le problème. Pour être précis, le problème ici est que lorsque le GPU recherche le fragment, au lieu de prendre la couleur d'un seul texel, il calcule la couleur en utilisant des texels proches, ce qui rend l'image floue.