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

问题描述：

我正在尝试使未着色的图像通过或根据某些条件显示平铺纹理的着色器。它或多或少的作品，但我注意到瓷砖的质地并不十分期待权，所以我简化了测试着色器，因此只会显示平铺图像：着色器中的质量损失（模糊）

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纹理构造函数中完成）。这并没有什么区别，所以我只是尝试从纹理中制作出一个精灵并显示它，并且它也有同样的问题，所以我认为这或者是与视网膜有关的东西，或者是像素特定的东西。

原始纹理从该图像拍摄：

这里是着色器的输出看起来像：

您是否在像素边界处绘图？如果你把它画掉1/2像素，那么它将在像素之间进行采样。 – gman

感谢您的建议。我尝试通过0.5像素和无骨骼抵消x和y坐标：（ –

答

改变纹理过滤器GL_NEAREST这样既解决问题。

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

我更新了我的问题并提供了回复。感谢您的建议。 –

如果问题与视网膜显示有关，那么您可以参考https：// www .khronos.org/webgl/wiki/HandlingHighDPI –

事实证明，这是一个简单的视网膜问题，由于我使用的代码中存在一些奇怪的现象，我不得不加倍注意到您链接的说明，非常感谢！ –

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

相关推荐