Basic OpenGL 2D Screen Filters in the BGE - Part 3

Hey. This time, we'll be looking into something new - a blur filter! What? We did that already? Oh... Well... What if we controlled it with a VARIABLE?! EH?

So... Yeah. That's the new filter that we'll be making - a variable-controlled blur filter. This is actually pretty simple. In fact, the script is mostly the same as the blur script - the only difference is that we interpolate between the blurred texture and the non-blurred texture with a variable. Here's the script...

filter.shaderText = """

            uniform sampler2D bgl_RenderedTexture;

    uniform float percent;

            void main(void)

            {

                        float value = 0.0015;      // Here, value = distance away to check for pixel color

                       

                        vec4 color = texture2D(bgl_RenderedTexture, vec2(gl_TexCoord[0].st.x + value, gl_TexCoord[0].st.y + value)); // Sample area around current pixel

            color += texture2D(bgl_RenderedTexture, vec2(gl_TexCoord[0].st.x - value, gl_TexCoord[0].st.y - value));

            color += texture2D(bgl_RenderedTexture, vec2(gl_TexCoord[0].st.x + value, gl_TexCoord[0].st.y - value));

            color += texture2D(bgl_RenderedTexture, vec2(gl_TexCoord[0].st.x - value, gl_TexCoord[0].st.y + value));

   

            color /= 4.0;         // And average out the final color by number of samples; this could be in a for-loop

   

        vec4 origcolor = texture2D(bgl_RenderedTexture, gl_TexCoord[0].st); // This is a slight difference from the blur filter;

   

            gl_FragColor = origcolor + percent * (color - origcolor); // Here, we use a simple formula where if percent = 0, then we simply use the original color. Otherwise, we use the blurred color;

        // This forumla is called linear interpolation, and is a + scaler * (b - a), so then when scaler = 0, a is returned, and when scaler = 1, then b is returned

        // By using this, we can control how powerful our filter is.

            }

"""

There's really not too much of a difference between the Blur script in part 2, and this script. Let's examine the changes in the code in detail.

vec4 origcolor = texture2D(bgl_RenderedTexture, gl_TexCoord[0].st);

gl_FragColor = origcolor + percent * (color - origcolor);

As you can see, we don't simply set gl_FragColor to be the color variable as we did in the previous part of this series. In the first line, we create a new vector, the original color of the pixel that we're altering. So, we have two vector variables at this point - the blurred color, and the original color. Then, we set gl_FragColor to be the result of a simple formula, one called a linear interpolation.

The formula for a linear interpolation is (a + scaler * (b - a)). This formula essentially is saying that when scaler is 0, then you will get the value of a, and when scaler is 1, you will get the value of b.You can use different number values for a or b, which is what we do in our example, using our two color vectors.

3/21/11 Addition: The linear interpolation formula works, and is a good formula to have around, but you can also use the mix function in a GLSL screen filter script, which takes as arguments for the first a color vector, the second another color, and the third a percentage.

So, we should be able to control how blurry our image is by controlling the scaler variable, which is in this case, percent. Where is percent created in the script, though? Well, it isn't created in the script at all - we actually create it outside of the shader script, and it is passed into the script in the line near the top - the line that says uniform float percent. That is the point of uniform variables - they allow us to pass values from variables elsewhere into our shader script.  Another example of a uniform variable is the bgl_RenderedTexture, which we don't create - the BGE creates and passes it to the shader script for us.

So, in this script, we can control the percent variable in our game code, and the script will automatically update it to blur our screen as much or little as we want. However, we still need to create the percent variable in our game object, as it is a user-defined variable. The BGE handles uniform user-defined variables with object variables - if we have an object variable, then the BGE will use that as the same uniform variable in the shader script. So, all we need to do is create a percent variable in the object, as can be seen in the screenshot. Since the object variable 'percent' is named the same as in our shader script, the script will reference that object variable when it runs. That's all there is to it!

Now, you should be able to control a 2D filter through means of a user-defined uniform variable, one that the BGE automatically passes from an object variable. Download the source code for Part 3 of the Basic OpenGL 2D Screen Filters series here. As always, have fun!