How to add vertical Gaussian blur

Question

This is my Fragment shader code where i am applying gaussian blur to a Texture2D image.

vec3 incrementalGaussian;
incrementalGaussian.x = 1.0f / (sqrt(2.0f * pi) * BlurValue  );
incrementalGaussian.y = exp(-0.5f / (BlurValue  * BlurValue ));
incrementalGaussian.z = incrementalGaussian.y * incrementalGaussian.y;
 vec4 avgValue = vec4(0.0f, 0.0f, 0.0f, 0.0f);
float coefficientSum = 0.0f;

// Take the central sample first...
avgValue += texture2D(text, TexCoords.st) * incrementalGaussian.x;
coefficientSum += incrementalGaussian.x;
incrementalGaussian.xy *= incrementalGaussian.yz;

//Go through the remaining 8 vertical samples (4 on each side of the center)

for (float i = 1.0f; i <= numBlurPixelsPerSide ; i++) { 
    avgValue += texture2D(text, TexCoords.st - i * 0.01f * 
               blurMultiplyVec) * incrementalGaussian.x;         
    avgValue += texture2D(text, TexCoords.st + i * 0.01f * 
                blurMultiplyVec) * incrementalGaussian.x;         
    coefficientSum += 2 * incrementalGaussian.x;
    incrementalGaussian.xy *= incrementalGaussian.yz;
avgValue.g = avgValue.r;
avgValue.b = avgValue.r;
color =  avgValue * vec4(textColor, 1.0)  / coefficientSum ;
}

this only applies a horizontal blur , How can i also add vertical Gaussian blur.

Rabbid76 · Accepted Answer · 2019-07-19T13:58:46.063

2

In general for the gaussian blur are used 2 passes. For the vertical blur, you've to add a 2nd pass. First do the horizontal blur, then apply the vertical blur to the result.

For the horizontal blur the u-component of the texture coordinate is displaced:

for (float i = 1.0f; i <= numBlurPixelsPerSide ; i++) { 
    float offset = i * 0.01f * blurMultiplyVec;
    avgValue += texture2D(text, TexCoords.st - vec2(offset, 0.0) * incrementalGaussian.x;
    avgValue += texture2D(text, TexCoords.st + vec2(offset, 0.0) * incrementalGaussian.x;
    // ...
}

And for the vertical blur the v-component of the texture coordinate is displaced:

for (float i = 1.0f; i <= numBlurPixelsPerSide ; i++) { 
    float offset = i * 0.01f * blurMultiplyVec;
    avgValue += texture2D(text, TexCoords.st - vec2(0.0, offset) * incrementalGaussian.x;
    avgValue += texture2D(text, TexCoords.st + vec2(0.0, offset) * incrementalGaussian.x;
    // ...
}

A related question is What kind of blurs can be implemented in pixel shaders?
There are a lot of good tutorials all over the web, e.g. LearnOpenGL.com - Gaussian blur

edited Jul 19 '19 at 13:58

answered Jul 18 '19 at 08:19

Rabbid76

202,892
27
131
174

i have a question , if we want to apply blur to the scene than we render it to our framebuffer and create a texture from and pass it to the shader. – Jul 18 '19 at 08:30
for texture we dont have to render it to our frame buffer. – Jul 18 '19 at 08:31
how can we have multiple passes for the texture. – Jul 18 '19 at 08:32
same as this LearnOpenGL.com - Gaussian blur being done on a image , not a scene. – Jul 18 '19 at 08:33
1

@shomit The first pass renders a texture to a new texture and the 2nd pass renders the texture to the scene. – Rabbid76 Jul 18 '19 at 08:33

How to add vertical Gaussian blur

1 Answers1