2013-08-06 63 views
0

我一直在玩着稱爲ShaderToy的玩具着色器,並試圖根據Jonas Wagner的代碼(着色器)爲2D遊戲創建自上而下的視圖水效果。您可以在ShaderToy中輕鬆複製/粘貼此代碼並查看效果。着色器沒有正常顯示

着色器外觀很酷,在ShaderToy,但是當我嘗試複製相同的在我的代碼,不順心的事,見下圖:

http://ivan.org.es/temp/shader_problems.png

頂點着色器(我不「知道什麼是在使用ShaderToy一):

uniform mat4 Projection; 
attribute vec2 Position; 

void main(){ 
    gl_Position = Projection*vec4(Position, 0.0, 1.0); 
} 

片段着色器:

precision lowp float; 

vec3 sunDirection = normalize(vec3(0.0, -1.0, 0.0)); 
vec3 sunColor = vec3(1.0, 0.8, 0.7); 
vec3 eye = vec3(0.0, 1.0, 0.0); 

vec4 getNoise(vec2 uv){ 
    vec2 uv0 = (uv/103.0)+vec2(iGlobalTime/17.0, iGlobalTime/29.0); 
    vec2 uv1 = uv/107.0-vec2(iGlobalTime/-19.0, iGlobalTime/31.0); 
    vec2 uv2 = uv/vec2(897.0, 983.0)+vec2(iGlobalTime/101.0, iGlobalTime/97.0); 
    vec2 uv3 = uv/vec2(991.0, 877.0)-vec2(iGlobalTime/109.0, iGlobalTime/-113.0); 
    vec4 noise = (texture2D(iChannel0, uv0)) + 
       (texture2D(iChannel0, uv1)) + 
       (texture2D(iChannel0, uv2)) + 
       (texture2D(iChannel0, uv3)); 
    return noise*0.5-1.0; 
} 

void sunLight(const vec3 surfaceNormal, const vec3 eyeDirection, float shiny, float spec, float diffuse, inout vec3 diffuseColor, inout vec3 specularColor){ 
    vec3 reflection = normalize(reflect(-sunDirection, surfaceNormal)); 
    float direction = max(0.0, dot(eyeDirection, reflection)); 
    specularColor += pow(direction, shiny)*sunColor*spec; 
    diffuseColor += max(dot(sunDirection, surfaceNormal),0.0)*sunColor*diffuse; 
} 

void main(){ 
    vec2 uv = gl_FragCoord.xy/iResolution.xy; 
    uv *= 100.0; 

    vec4 noise = getNoise(uv); 
    vec3 surfaceNormal = normalize(noise.xzy*vec3(2.0, 1.0, 2.0)); 

    vec3 diffuse = vec3(0.3); 
    vec3 specular = vec3(0.0); 

    vec3 worldToEye = vec3(0.0, 1.0, 0.0);//eye-worldPosition; 
    vec3 eyeDirection = normalize(worldToEye); 
    sunLight(surfaceNormal, eyeDirection, 100.0, 1.5, 0.5, diffuse, specular); 

    gl_FragColor = vec4((diffuse+specular+vec3(0.1))*vec3(0.3, 0.5, 0.9), 1.0); 
} 

請注意,片段着色器代碼正好是在ShaderToy和我的引擎一樣,在我看來,像gl_FragCoord UV COORDS在某種程度上錯誤或精度的問題,因爲雖然效果變糟糕的後而且更糟。我正在使用一個正交投影,但它不應該有太多的事情要做,因爲我直接從屏幕獲取uv座標。

有關發生了什麼的一些見解?

+1

嘗試提高這裏所描述的精度http://stackoverflow.com/a/6336285/187752 – Kimi

+0

啊......我用GL_CLAMP_TO_EDGE加載我的紋理,並且噪聲函數假設爲GL_REPEAT。現在它可以工作。 – Ivan

+0

請回答你自己的問題。但無論如何,你必須在片段着色器中指定精度 - 這是根據OpenGL ES 2.0規範。請閱讀@Kimi提供的鏈接瞭解更多信息。 – keaukraine

回答

0

事實證明,我是我的加載與紋理

glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); 
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); 

着色器噪音的功能期待GL_REPEAT代替。