Question

我正在尝试制作一个着色器，它可以不改变地通过图像，也可以根据某些条件显示平铺纹理。它或多或少有效，但我注意到平铺纹理看起来不太正确，所以我简化了着色器进行测试，因此它只显示平铺图像：

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

我不太确定发生了什么。原始图像为100x100，重复区域为100x100。该模式看起来相同，但在着色器中略微模糊（请参见下面的屏幕截图）。这与视网膜有关吗？（我没有做任何特殊的设置视网膜）Mipmaps？还有别的吗？

UPDATE：正如@danieltran所建议的，我尝试将纹理设置为GL_NEAREST（在pixi中，这是通过将Pixi.SCALE_MODES.NEAREST传递给纹理构造函数来完成的。它没有任何区别，所以我只是尝试从纹理制作一个精灵并显示它，它有同样的问题，所以我认为这是与视网膜有关的东西，或者像pixi特定的东西。

原始纹理取自此图片：

以下是着色器的输出结果：

Answer 1

将纹理过滤器更改为GL_NEAREST然后它将解决问题。

具体来说，这里的问题是当GPU查找片段时，不是从1个单纹素中获取颜色，而是使用附近的纹素计算颜色，这会使图片看起来模糊。

着色器中的质量损失（模糊）

1 个答案: