使用純粹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。 您可以隨時根據自己的喜好調整變量。