[Shader Library] Gaussian Blur Post Processing Filter in GLSL

GeeXLab - Gaussian blur post processing effect
A cute nurse half blurred in GeeXLab



Gaussian blur is a filter widely used in computer graphics. In real time 3D, Gaussian blur is used in many effects like depth of field or bloom.

GeeXLab - Depth of field effect
Depth of field effect uses Gaussian blur filter

Many years ago, I wrote a tutorial about image filtering with GLSL where I gave an example of Gaussian filter. Few days ago, Daniel Rakos wrote a detailed article about an efficient Gaussian blur with linear sampling.

Since I’m always looking for new effects and shaders for GeeXlab, I decided to implement Daniel’s work in a GeeXLab demo.

Basically, the gaussian blur filter works with two passes: one vertical and the other horizontal. Why two passes? Wikipedia gives us the answer:

A Gaussian blur effect is typically generated by convolving an image with a kernel of Gaussian values. In practice, it is best to take advantage of the Gaussian Blur’s linearly separable property by dividing the process into two passes. In the first pass, a one-dimensional kernel is used to blur the image in only the horizontal or vertical direction. In the second pass, another one-dimensional kernel is used to blur in the remaining direction. The resulting effect is the same as convolving with a two-dimensional kernel in a single pass, but requires fewer calculations.

Here is the complete vertical gaussian filter used in the demo (you can download the demo at the end of the post):

[Vertex_Shader]
void main(void)
{
  gl_Position = ftransform();
  gl_TexCoord[0] = gl_MultiTexCoord0;
}
[Pixel_Shader]
uniform sampler2D sceneTex; // 0

uniform float rt_w; // render target width
uniform float rt_h; // render target height
uniform float vx_offset;

float offset[3] = float[]( 0.0, 1.3846153846, 3.2307692308 );
float weight[3] = float[]( 0.2270270270, 0.3162162162, 0.0702702703 );

void main() 
{ 
  vec3 tc = vec3(1.0, 0.0, 0.0);
  if (gl_TexCoord[0].x<(vx_offset-0.01))
  {
    vec2 uv = gl_TexCoord[0].xy;
    tc = texture2D(sceneTex, uv).rgb * weight[0];
    for (int i=1; i<3; i++) 
    {
      tc += texture2D(sceneTex, uv + vec2(0.0, offset[i])/rt_h).rgb \
              * weight[i];
      tc += texture2D(sceneTex, uv - vec2(0.0, offset[i])/rt_h).rgb \
             * weight[i];
    }
  }
  else if (gl_TexCoord[0].x>=(vx_offset+0.01))
  {
    tc = texture2D(sceneTex, gl_TexCoord[0].xy).rgb;
  }
  gl_FragColor = vec4(tc, 1.0);
}

And here is the complete horizontal gaussian filter used in the demo:

[Vertex_Shader]
void main(void)
{
  gl_Position = ftransform();
  gl_TexCoord[0] = gl_MultiTexCoord0;
}
[Pixel_Shader]
uniform sampler2D sceneTex; // 0

uniform float rt_w; // render target width
uniform float rt_h; // render target height
uniform float vx_offset;

float offset[3] = float[]( 0.0, 1.3846153846, 3.2307692308 );
float weight[3] = float[]( 0.2270270270, 0.3162162162, 0.0702702703 );

void main() 
{ 
  vec3 tc = vec3(1.0, 0.0, 0.0);
  if (gl_TexCoord[0].x<(vx_offset-0.01))
  {
    vec2 uv = gl_TexCoord[0].xy;
    tc = texture2D(sceneTex, uv).rgb * weight[0];
    for (int i=1; i<3; i++) 
    {
      tc += texture2D(sceneTex, uv + vec2(offset[i])/rt_w, 0.0).rgb \
              * weight[i];
      tc += texture2D(sceneTex, uv - vec2(offset[i])/rt_w, 0.0).rgb \
              * weight[i];
    }
  }
  else if (gl_TexCoord[0].x>=(vx_offset+0.01))
  {
    tc = texture2D(sceneTex, gl_TexCoord[0].xy).rgb;
  }
  gl_FragColor = vec4(tc, 1.0);
}

The vx_offset uniform allows to control the X position of the vertical red line:

GeeXLab - Gaussian blur post processing effect
vx_offset = 0.71

GeeXLab - Gaussian blur post processing effect
vx_offset = 0.12


The vx_offset is controled by the tweak bar and the value is divided by 100: 71 gives 0.71.



And what about the background image???
Just visit this page: KusoPOP Nurse by *VampBeauty or this one: vampbeauty.com ;)

With that kind of image, post FX coding is a real pleasure…


DOWNLOAD

Left-click to download (right-click disabled)
Download GeeXLab - Post FX - Gaussian blur demo Version 2010.09.09

*** You need GeeXLab 0.2.4 or higher to run this demo. ***

Unzip the demo somewhere, start GeeXLab and drop in the main window the demo source code (GaussianBlur_Effect_Demo.xml). Gaussian blur shaders are localized in the PostFX_GaussianBlur_Lib.xml file. The shortcut [Ctrl+R] in GeeXLab allows to reload the demo once you have modified the source code.

Enjoy!




Geeks3D.com

↑ Grab this Headline Animator