How to add vertical Gaussian blur - opengl

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.

Answer 1

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