Gaussian Blur Filter Shader

There are different ways to perform blur and this is one of the most common way to do it in a shader. It’s a two step method with first a horizontal blur and then a vertical blur. By splitting the work in two directions (two passes) you can save a lot of computation.

The method can be divided in the following parts:

  1. Render the scene you want to blur to a texture (could be downsampled)
  2. Render a screen aligned quad with the horizontal blur shader to a texture
  3. Render a screen aligned quad with the vertical blur shader to the screen or texture depending on what you want to use it for

The following image shows how the blur works when splitted up in two directions.

Separable blur filter

Here’s the horizontal blur shader.

Vertex Shader (GLSL) . This shader screen align a quad with width 1. Any method to render a screen aligned quad will work. So you’re free to use other shaders.

varying vec2 vTexCoord;
 
// remember that you should draw a screen aligned quad
void main(void)
{
   gl_Position = ftransform();;
  
   // Clean up inaccuracies
   vec2 Pos;
   Pos = sign(gl_Vertex.xy);
 
   gl_Position = vec4(Pos, 0.0, 1.0);
   // Image-space
   vTexCoord = Pos * 0.5 + 0.5;
}

Fragment Shader (GLSL) 

uniform sampler2D RTScene; // the texture with the scene you want to blur
varying vec2 vTexCoord;
 
const float blurSize = 1.0/512.0; // I've chosen this size because this will result in that every step will be one pixel wide if the RTScene texture is of size 512x512
 
void main(void)
{
   vec4 sum = vec4(0.0);
 
   // blur in y (vertical)
   // take nine samples, with the distance blurSize between them
   sum += texture2D(RTScene, vec2(vTexCoord.x - 4.0*blurSize, vTexCoord.y)) * 0.05;
   sum += texture2D(RTScene, vec2(vTexCoord.x - 3.0*blurSize, vTexCoord.y)) * 0.09;
   sum += texture2D(RTScene, vec2(vTexCoord.x - 2.0*blurSize, vTexCoord.y)) * 0.12;
   sum += texture2D(RTScene, vec2(vTexCoord.x - blurSize, vTexCoord.y)) * 0.15;
   sum += texture2D(RTScene, vec2(vTexCoord.x, vTexCoord.y)) * 0.16;
   sum += texture2D(RTScene, vec2(vTexCoord.x + blurSize, vTexCoord.y)) * 0.15;
   sum += texture2D(RTScene, vec2(vTexCoord.x + 2.0*blurSize, vTexCoord.y)) * 0.12;
   sum += texture2D(RTScene, vec2(vTexCoord.x + 3.0*blurSize, vTexCoord.y)) * 0.09;
   sum += texture2D(RTScene, vec2(vTexCoord.x + 4.0*blurSize, vTexCoord.y)) * 0.05;
 
   gl_FragColor = sum;
}

And here’s the vertical blur shader.

Vertex Shader (GLSL) (the same as for the blur in horizontal direction)

varying vec2 vTexCoord;
 
// remember that you should draw a screen aligned quad
void main(void)
{
   gl_Position = ftransform();;
  
   // Clean up inaccuracies
   vec2 Pos;
   Pos = sign(gl_Vertex.xy);
 
   gl_Position = vec4(Pos, 0.0, 1.0);
   // Image-space
   vTexCoord = Pos * 0.5 + 0.5;
}

Fragment Shader (GLSL) 

uniform sampler2D RTBlurH; // this should hold the texture rendered by the horizontal blur pass
varying vec2 vTexCoord;
 
const float blurSize = 1.0/512.0;
 
void main(void)
{
   vec4 sum = vec4(0.0);
 
   // blur in y (vertical)
   // take nine samples, with the distance blurSize between them
   sum += texture2D(RTBlurH, vec2(vTexCoord.x, vTexCoord.y - 4.0*blurSize)) * 0.05;
   sum += texture2D(RTBlurH, vec2(vTexCoord.x, vTexCoord.y - 3.0*blurSize)) * 0.09;
   sum += texture2D(RTBlurH, vec2(vTexCoord.x, vTexCoord.y - 2.0*blurSize)) * 0.12;
   sum += texture2D(RTBlurH, vec2(vTexCoord.x, vTexCoord.y - blurSize)) * 0.15;
   sum += texture2D(RTBlurH, vec2(vTexCoord.x, vTexCoord.y)) * 0.16;
   sum += texture2D(RTBlurH, vec2(vTexCoord.x, vTexCoord.y + blurSize)) * 0.15;
   sum += texture2D(RTBlurH, vec2(vTexCoord.x, vTexCoord.y + 2.0*blurSize)) * 0.12;
   sum += texture2D(RTBlurH, vec2(vTexCoord.x, vTexCoord.y + 3.0*blurSize)) * 0.09;
   sum += texture2D(RTBlurH, vec2(vTexCoord.x, vTexCoord.y + 4.0*blurSize)) * 0.05;
 
   gl_FragColor = sum;
}

And this is a scene without blur.

Scene before bluring

And this is the same scene but with gaussian blur.

Blured Scene

You can tweak the blur radius to change the size of the blur and change the number of samples in each direction.

Cost for separable blur shader : 9+9 = 18 (number of texture samples)
Cost for shader if blured in one pass: 9*9 = 81 (number of texture samples)
So splitting up in two directions saves a lot.

The gaussian weights are calculated accordingly to the gaussian function with standard deviation of 2.7. These calculations were done in the excel document found [2].

Here’s a description of blur shaders and other image processing shaders in DirectX:
[1] http://ati.amd.com/developer/shaderx/ShaderX2_AdvancedImageProcessing.pdf

More info about calculating weights for separable gaussian blur:
[2] http://theinstructionlimit.com/?p=40

Be Sociable, Share!

42 thoughts on “Gaussian Blur Filter Shader

    1. admin Post author

      Sorry for confusing you, this vertex shader might not be useful for everyone since it’s goal is to align a simple quad to the view and stretch it to cover the entire screen. If you’re already sending in a screen aligned quad, you can skip the vertex shader!

      Reply
  1. Justin

    Isn’t this just a box filter blur? Gaussian blurs are weighted based on their distance from the center. In your pixel shader you just take the average of all the pixels. This works fine in practice, but calling it a Gaussian blur is misleading.

    Reply
  2. Justin

    I take that back. You ARE weighting the neighbors based on their distance. Sorry about that. However, their weight is based on a linear decay, not a Gaussian function.

    Reply
    1. admin Post author

      Yes, I’m using the distance, but as you say, the weights are not really gaussian weights. But they are actually close enough to look good. I will add the “true” gaussian weights to this example since it’s more correct that way.

      Thanks for the feedback!

      Reply
  3. Promit Roy

    Your filter weights are wrong somewhere.
    2 * (0.05 + 0.09 + 0.12 + 0.15) + 0.16 = 0.98
    This is probably the reason for #2′s darkness problem, and if you try to use this blur with VSM for example the results will be completely wrong.

    Reply
  4. John

    Thanks for this, I’m looking for a good blur effect to blur a particle system so that I can make stuff like fire, fireworks, pulsating clouds etc …. I reckon this might do the trick!

    Reply
  5. Luke

    I am a student and doing Image Processing Coursework

    Do you apply the Gaussian mask to the RGB components ot the YCbCr components of the image?

    I have tried and both seem to produce the same result.

    Reply
  6. Chris

    What happens at the borders when texture2D is trying to read pixels outside the image? For example when vTexCoord.x is 0 and you call texture2D to access pixels at vTexCoord.x – 4 * blursize? What is the texture2D return value in this case and how does it contribute to the filter kernel?

    Reply
  7. Pingback: ND2D – Blur - nulldesign // lars gerckens

  8. Pingback: Faster Gaussian Blur in GLSL | xissburg

  9. court reporter u quiz site

    Hey there! I know this is kinda off topic however , I’d figured I’d
    ask. Would you be interested in exchanging links
    or maybe guest writing a blog article or vice-versa? My website covers a lot of the same subjects as yours and
    I believe we could greatly benefit from each other.
    If you are interested feel free to send me an e-mail. I look forward to
    hearing from you! Fantastic blog by the way!

    Reply
  10. Nick Wiggill

    Hi admin,

    You mentioned that vertex shaders are not necessary if you’re already passing in a screen-aligned quad. In that case, how would you make the draw call? As you surely do not need to pass any geometry in for the blur passes?

    Thanks,

    Nick

    Reply
  11. Nick Wiggill

    Not to worry, I’m just being silly. Of course I will be passing in the fullscreen quad’s geometry via glDrawElements.

    Reply
  12. Pingback: Desfoque Gaussiano Mais Rápido em GLSL | xissburg

  13. Pingback: Custom Blur Shader for Unity3D | Ana Todor Blog Journey | blur shader

  14. préstamos rápidos

    Hi there this is kinda of off topic but I was wondering if blogs use WYSIWYG editors or if you have
    to manually code with HTML. I’m starting a blog soon but have no coding know-how so I wanted to get guidance from someone with experience. Any help would be greatly appreciated!

    Reply
  15. Pingback: Magic in-depth | Harmony & Rainbow Factory

  16. Kiera

    Does your website have a contact page? I’m having problems locating it but, I’d like to
    send you an email. I’ve got some recommendations for your blog you might be interested in hearing. Either way, great site and I look forward to seeing it develop over time. Thanks, so much appreciated!

    Reply
  17. celine shoulder bag

    Just wanna input on few general things, The website design is perfect, the content is really fantastic. “To imagine is everything, to know is nothing at all.” by Anatole France.

    Reply
  18. www.flickr.com

    Wonderful work! That is the kind of information that are supposed to be shared across the internet.
    Shame on Google for not positioning this publish upper! Come on over and talk over with my website
    . Thanks =)

    Reply
  19. Louis Vuitton Handbags

    When I initially commented I clicked the “Notify me when new comments are added” checkbox and now
    each time a comment is added I get several emails
    with the same comment. Is there any way you can remove people
    from that service? Thank you!

    Reply
  20. bliss bath products

    Simon Neil of japanese stone bunch Biffy Clyro executes with the major degree of
    the moment special day of the whole “c within the Park” tracks festival
    inside Kinross on june 12, 2008. The expensive vacation event honors the fiskars 6201 momentum’s
    15th anniversary this current year with title of the article functions
    such as the Verve, anger Against The contraption,
    and R.E.M. likely to conduct throughout the three-day festival.
    AFP Photo/Ed Jones

    Here is my weblog bliss bath products

    Reply
  21. play.google.com

    Hi! I’m at work surfing around your blog from my new iphone!
    Just wanted to say I love reading your blog and look forward to all your posts!
    Carry on the excellent work!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>