OpenGL 2D Screen Filters in the BGE - Part 1

Hey, there. So today, we'll look into using some simple GLSL (OpenGL Shading Language) functions with the Blender Game Engine to make some 2D screen filters. Theoretically, you could even implement this with other game engines to create 2D screen filters, even engines using other programming languages, like Microsoft's HLSL (High Level Shading Language).


The principle behind a 2d screen filter is not complex at all. The idea is that each pixel on-screen basically runs a script that you write, in which you control the pixel's color. You perform math on the pixel's color, and can even pass in external variables, like a timer or percentage. It's actually surprisingly simple. Today, we'll make a really simple 2D screen filter to swap out some colors, making red turn to green, green to blue, and blue to red. The only real problem that may arise is that the 2D filter is written in C++ and GLSL, even though we communicate with the BGE using Python. However, the code isn't very complex, and if you've seen C++ for even a little while, there's probably nothing too surprising here. So, let's take a look at the source code:
---------------------------------------------------------------------------------------------------------------------------

from bge import logic

cont = logic.getCurrentController()
obj = cont.owner

filter = cont.actuators['Filter 2D'] # Get the 2D filter actuator

# Notice that while the BGE uses Python, 2D filters (or 3D shaders) are written in C++ and use GLSL. So, the syntax and style of our script here is Python until
# we start to edit the filter script below, in which we switch to C++ (hence the semicolons and //-style comments).

filter.shaderText = """              
    uniform sampler2D bgl_RenderedTexture;
   
    void main(void)
    {
        vec4 color = texture2D(bgl_RenderedTexture, gl_TexCoord[0].st); // This line gets the color from the texture that the BGE renders; as the coordinates, it uses
                    // the texture coordinate of each pixel in the viewport - gl_TexCoord[0]. I believe gl_TexCoord[1] is the texture coordinates of each pixel
                    // *in the viewport* once scaled to the size of the viewport
        gl_FragColor = color.gbra;  // This line sets the final color of each pixel (gl_FragColor) to be the color vector, in which r is the red channel,
        // b is the blue, g is the green, and a is the alpha channel. By switching these around, we can manipulate the final color of the screen so that
        // red is now where green should be, blue where green was, and green where red originally is.
    }
   
"""

if not 'init' in obj:
    cont.activate(filter)   ## The BGE will keep a 2D filter active once the 2D filter actuator has been activated; notice that we only do this once because
    obj['init'] = 1         ## activating the 2D filter takes a bit of time, so it's far more efficient to activate it only once than to constantly do so
---------------------------------------------------------------------------------------------------------------------------
Nothing is particularly outstanding except for the shader script itself. We just get the 2D filter actuator connected to the Python module running this script, set the script, and then activate and run the 2D filter. Simple. So the real problem is just understanding the script itself.

uniform sampler2D bgl_RenderedTexture;
   
    void main(void)
    {
        vec4 color = texture2D(bgl_RenderedTexture, gl_TexCoord[0].st); // This line gets the color from the texture that the BGE renders; as the coordinates, it uses
                    // the texture coordinate of each pixel in the viewport - gl_TexCoord[0]. I believe gl_TexCoord[1] is the texture coordinates of each pixel
                    // *in the viewport* once scaled to the size of the viewport
        gl_FragColor = color.gbra;  // This line sets the final color of each pixel (gl_FragColor) to be the color vector, in which r is the red channel,
        // b is the blue, g is the green, and a is the alpha channel. By switching these around, we can manipulate the final color of the screen so that
        // red is now where green should be, blue where green was, and green where red originally is.
    }

The first line gets the rendered texture that the BGE created, which we will be manipulating. It is what is called a sampler2D, or essentially a 2D image. The void main(void) line simply starts the main portion of the shader script. The first line creates a 4-component vector that contains the color of the screen, unaltered. The next line is also the last one, gl_FragColor = color.gbra. This line simply sets the final color of the pixel to be the color contained in the color vector variable. Notice, though, that it sets the final color to be offset from the usual channels. You see, normally, the color of a pixel is in the format RGBA, where R is red, G is green, B is blue, and A is the alpha channel. However, we rearranged the color values simply by pushing the letters that correspond to each color around. In the end, green is now red, blue is now green, and red is now green. That's it for the shader script, and we end up with a switched-up color pallete, just like that! Download the source blend file here.

The next tutorial will implement a more complex 2D screen filter. Keep coming back, and I'll keep making more tutorials. Have fun!