使用纯粹GLSL的2D运动模糊和高斯模糊

Question

我希望使用纯粹GLSL实现运动模糊或者可能是高斯模糊。
我已经创建了一些基本着色器，并且我已经有一些想法。

我的着色器：

顶点着色器：

attribute vec4 a_color; 
attribute vec2 a_position; 
attribute vec2 a_texCoord0; 

uniform mat4 u_projTrans; 

varying vec4 v_color; 
varying vec2 v_texCoord0; 

void main() { 
    v_color = a_color; 
    v_texCoord0 = a_texCoord0; 
    gl_Position = u_projTrans * vec4(a_position, 0.0f, 1.0f); 
} 

片段着色器：

varying vec4 v_color; 
varying vec2 v_texCoord0; 

uniform vec2 screenSize; 

uniform sampler2D u_texture; 
uniform vec4 v_time; 

const float RADIUS = 0.75; 

const float SOFTNESS = 0.6; 

void main() { 
    vec4 texColor = texture2D(u_texture, v_texCoord0); 
    vec4 timedColor = (v_color + v_time); 

    vec2 position = (gl_FragCoord.xy/screenSize.xy) - vec2(0.5); 
    float len = length(position); 

    float vignette = smoothstep(RADIUS, RADIUS-SOFTNESS, len); 

    texColor.rgb = mix(texColor.rgb, texColor.rgb * vignette, 0.5); 

    gl_FragColor = vec4(texColor.rgb * timedColor.rgb, texColor.a); 
} 

这是个好主意，用纯粹的GLSL创建模糊？有没有人有任何想法如何做到这一点？
我不妨回答我自己的问题，因为我有一些想法。

Answer 1

我要回答我自己的问题。

最后，我只更改了片段着色器：

varying vec4 vColor; 
varying vec2 vTexCoord; 

uniform vec2 screenSize; 

uniform sampler2D u_texture; 
uniform vec4 v_time; 

const float RADIUS = 0.75; 

const float SOFTNESS = 0.6; 

const float blurSize = 1.0/1000.0; 

void main() { 

    vec4 texColor = vec4(0.0); // texture2D(u_texture, vTexCoord) 
    texColor += texture2D(u_texture, vTexCoord - 4.0*blurSize) * 0.05; 
    texColor += texture2D(u_texture, vTexCoord - 3.0*blurSize) * 0.09; 
    texColor += texture2D(u_texture, vTexCoord - 2.0*blurSize) * 0.12; 
    texColor += texture2D(u_texture, vTexCoord - blurSize) * 0.15; 
    texColor += texture2D(u_texture, vTexCoord) * 0.16; 
    texColor += texture2D(u_texture, vTexCoord + blurSize) * 0.15; 
    texColor += texture2D(u_texture, vTexCoord + 2.0*blurSize) * 0.12; 
    texColor += texture2D(u_texture, vTexCoord + 3.0*blurSize) * 0.09; 
    texColor += texture2D(u_texture, vTexCoord + 4.0*blurSize) * 0.05; 

    vec4 timedColor = (vColor + v_time); 

    vec2 position = (gl_FragCoord.xy/screenSize.xy) - vec2(0.5); 
    float len = length(position); 

    float vignette = smoothstep(RADIUS, RADIUS-SOFTNESS, len); 

    texColor.rgb = mix(texColor.rgb, texColor.rgb * vignette, 0.5); 

    gl_FragColor = vec4(texColor.rgb * timedColor.rgb, texColor.a); 
} 

实际的模糊效果，这里所写的：

vec4 texColor = vec4(0.0); // texture2D(u_texture, vTexCoord) 
    texColor += texture2D(u_texture, vTexCoord - 4.0*blurSize) * 0.05; 
    texColor += texture2D(u_texture, vTexCoord - 3.0*blurSize) * 0.09; 
    texColor += texture2D(u_texture, vTexCoord - 2.0*blurSize) * 0.12; 
    texColor += texture2D(u_texture, vTexCoord - blurSize) * 0.15; 
    texColor += texture2D(u_texture, vTexCoord) * 0.16; 
    texColor += texture2D(u_texture, vTexCoord + blurSize) * 0.15; 
    texColor += texture2D(u_texture, vTexCoord + 2.0*blurSize) * 0.12; 
    texColor += texture2D(u_texture, vTexCoord + 3.0*blurSize) * 0.09; 
    texColor += texture2D(u_texture, vTexCoord + 4.0*blurSize) * 0.05; 

的影响使得高斯模糊，纯粹用GLSL。 您可以随时根据自己的喜好调整变量。