Dark Bit Factory & Gravity
PROGRAMMING => General coding questions => Topic started by: Gore Motel 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 (http://www.gamerendering.com/2008/10/11/gaussian-blur-filter-shader/). It gives you the shader code which you need to use and the following directions:
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.
-
"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
-
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:
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?
-
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/