2017-08-26 82 views
0

我正在嘗試使未着色的圖像通過或根據某些條件顯示平鋪紋理的着色器。它或多或少的作品,但我注意到瓷磚的質地並不十分期待權,所以我簡化了測試着色器,因此只會顯示平鋪圖像:着色器中的質量損失(模糊)

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紋理構造函數中完成)。這並沒有什麼區別,所以我只是嘗試從紋理中製作出一個精靈並顯示它,並且它也有同樣的問題,所以我認爲這或者是與視網膜有關的東西,或者是像素特定的東西。

原始紋理從該圖像拍攝:

enter image description here

這裏是着色器的輸出看起來像:

enter image description here

+1

您是否在像素邊界處繪圖?如果你把它畫掉1/2像素,那麼它將在像素之間進行採樣。 – gman

+0

感謝您的建議。我嘗試通過0.5像素和無骨骼抵消x和y座標:( –

回答

2

改變紋理過濾器GL_NEAREST這樣既解決問題。

具體來說,這裏的問題是GPU查找片段時,不是從1個單一紋素中取出顏色,而是使用附近的紋理元素計算顏色,這使得圖片看起來模糊。

+1

我更新了我的問題並提供了回覆。感謝您的建議。 –

+1

如果問題與視網膜顯示有關,那麼您可以參考https:// www .khronos.org/webgl/wiki/HandlingHighDPI –

+1

事實證明,這是一個簡單的視網膜問題,由於我使用的代碼中存在一些奇怪的現象,我不得不加倍注意到您鏈接的說明,非常感謝! –