OpenGL es 2.0中的平滑模糊高斯

Question

我尝试使平滑的高斯模糊，但我没有任何想法如何正确地做到这一点。

我试过这样几件事情：

#version 100 

precision mediump float; 

varying vec3 vColor; 
varying vec2 TexCoords; 

uniform sampler2D texture0; 
uniform float radius; 
uniform vec2 dir; 
uniform resolution; 

void main() { 

    vec4 sum = vec4(0.0); 

    vec2 tc = TexCoords; 

    float blur = radius/resolution; 

    float hstep = dir.x; 
    float vstep = dir.y; 


    sum += texture2D(texture0, vec2(tc.x - 4.0*blur*hstep, tc.y - 4.0*blur*vstep)) * 0.0162162162; 
    sum += texture2D(texture0, vec2(tc.x - 3.0*blur*hstep, tc.y - 3.0*blur*vstep)) * 0.0540540541; 
    sum += texture2D(texture0, vec2(tc.x - 2.0*blur*hstep, tc.y - 2.0*blur*vstep)) * 0.1216216216; 
    sum += texture2D(texture0, vec2(tc.x - 1.0*blur*hstep, tc.y - 1.0*blur*vstep)) * 0.1945945946; 

    sum += texture2D(texture0, vec2(tc.x, tc.y)) * 0.2270270270; 

    sum += texture2D(texture0, vec2(tc.x + 1.0*blur*hstep, tc.y + 1.0*blur*vstep)) * 0.1945945946; 
    sum += texture2D(texture0, vec2(tc.x + 2.0*blur*hstep, tc.y + 2.0*blur*vstep)) * 0.1216216216; 
    sum += texture2D(texture0, vec2(tc.x + 3.0*blur*hstep, tc.y + 3.0*blur*vstep)) * 0.0540540541; 
    sum += texture2D(texture0, vec2(tc.x + 4.0*blur*hstep, tc.y + 4.0*blur*vstep)) * 0.0162162162; 

    gl_FragColor = vec4(vColor, 1.0) * vec4(sum.rgb, 1.0); 
} 

但结果是类似的东西： http://i.imgur.com/N6ks3Pw.png

我怎样才能获得更好的效果？

Answer 1

您似乎是在一个正确的方式，但您的vstep和hstep似乎太大。应该设计一个步骤，以便只需要下一个像素，这意味着它应该是1/size，其大小等于您的情况下的纹理大小。

你只需要几个像素周围不会产生太多的模糊。通常你至少需要一个7x7或9x9的矩阵。你所采取的是有点奇怪，因为这看起来像你只使用当前像素周围的一些对角线值。

在概念的结果应该是这样的

for(horizontalOffset = -radius; horizontalOffset<radius; horizontalOffset += step) { 
    for(verticalOffset = -radius; verticalOffset<radius; verticalOffset += step) { 
     sum += texture2D(texture, textureCoordinate+vec2(horizontalOffset, verticalOffset))*gaussFactorForOffset(sqrt(horizontalOffset*horizontalOffset + verticalOffset*verticalOffset)/radius); 
    } 
} 

这是有点慢，但因为对于具有7个步骤的实例将产生49访问其使得O2质地。您可以通过将其分成2个绘制调用进行优化，其中一个是创建垂直模糊，另一个是水平模糊。这意味着你需要2个着色器，其中一个只有一个垂直循环，另一个只有水平循环。结果是你有14次调用纹理的7个步骤，这样就可以花费20多次绘制调用并在内存中拥有另一个纹理（除非你可以重复使用原始纹理进行第二次绘制调用）。

此外，您还可以在页面上找到大量着色器，例如this one。他们通常没有优化，但他们至少可以让你有一个地方开始。