Author Topic: How do I apply blur filters in OpenGL?  (Read 4842 times)

0 Members and 1 Guest are viewing this topic.

Offline Gore Motel

  • C= 64
  • **
  • Posts: 45
  • Karma: 18
    • View Profile
    • Gore Motel
How do I apply blur filters in OpenGL?
« on: March 30, 2014 »
I want to perform some post-processing effects in OpenGL and right now I'm particularly interested in blurring.

I found the following article which seems simple enough: Gaussian Blur Filter Shader. It gives you the shader code which you need to use and the following directions:

Quote
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

Right now I'm creating an FBO, attaching a texture to it and rendering stuff to that texture, but I'm unsure on how to proceed.

Do I apply horizontal blurring to the texture, then take the result of that process and apply vertical blurring to it, then take the result of that and render it to the screen?

Or do I render the original texture to the screen, then apply horizontal blurring to the original texture and render the result of that process to the screen, then apply vertical blurring to the original texture and render that to the screen? It would be kind of like a three-layered sandwich: original texture + original texture blurred horizontally + original texture blurred vertically.

Or do I render the original texture to the screen, then apply horizontal blurring to the original texture, then apply vertical blurring to the horizontally blurred texture and render the result of that process to the screen? If I do that, it would be like a two-layered sandwich: original texture + original texture blurred horizontally and vertically.

Am I on the right track? Also, if you know of any other good articles about post-processing effects in OpenGL using shaders (especially about blur filters), feel free to post them.

Offline Voltage

  • Professor
  • Pentium
  • *****
  • Posts: 857
  • Karma: 53
    • View Profile
Re: How do I apply blur filters in OpenGL?
« Reply #1 on: March 31, 2014 »
"Do I apply horizontal blurring to the texture, then take the result of that process and apply vertical blurring to it, then take the result of that and render it to the screen?"

Yes, you can do it this way.

Or more advanced... choosing what glows, and what doesn't: http://www.gamasutra.com/view/feature/130520/realtime_glow.php?print=1

Challenge Trophies Won:

Offline Gore Motel

  • C= 64
  • **
  • Posts: 45
  • Karma: 18
    • View Profile
    • Gore Motel
Re: How do I apply blur filters in OpenGL?
« Reply #2 on: March 31, 2014 »
Cheers mate!

Now I wonder, why did he use two fragment shaders to implement the blur effect, one for horizontal blurring and a second one for vertical blurring? Couldn't he have done all the calculations in one shader?

And a second question, here's part of the shader for horizontal blurring:

Quote
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;

How did he figure to use those numbers: 4.0 and 0.05, 3.0 and 0.09, 2.0 and 0.12 and so on?

Offline Voltage

  • Professor
  • Pentium
  • *****
  • Posts: 857
  • Karma: 53
    • View Profile
Re: How do I apply blur filters in OpenGL?
« Reply #3 on: March 31, 2014 »
2 shaders are used as an optimization.  You can do it with one shader pass, but if each pixel looks up a surrounding 5x5 pixel box then you have to do 25 lookups.

If you do horizontal 5 pixels in one pass and then vertical 5 pixels on the result od the horizontal pass, you have only done 10 lookups per pixel (instead of 25) for the same(similar?) result.

The numbers he uses are "weights based on how far the lookup is from the centre pixel (current pixel).

See here: http://www.aishack.in/2010/08/image-convolution-examples/

« Last Edit: March 31, 2014 by Voltage »
Challenge Trophies Won: