GLSL - Change specific Color of Texture to another Color

GLSL: Dynamically Changing Specific Colors in Textures

Learn how to use GLSL shaders to identify and replace a specific color within a texture, enabling dynamic visual effects in OpenGL ES applications.

In graphics programming, particularly with OpenGL ES and GLSL (OpenGL Shading Language), you often need to manipulate textures beyond simple sampling. A common requirement is to change a specific color within a texture to another color, perhaps to customize assets, indicate states, or apply dynamic effects. This article will guide you through the process of implementing such a color replacement using a fragment shader.

Understanding the Fragment Shader's Role

The fragment shader is the ideal place for per-pixel operations like color replacement. For each pixel (fragment) being rendered, the fragment shader executes, determining its final color. By sampling the texture at the current fragment's coordinates, we can inspect its color and, if it matches our target color, replace it with a new one. This process is highly efficient as it leverages the GPU's parallel processing capabilities.

flowchart TD
    A[Start Fragment Shader] --> B{Sample Texture at `gl_FragCoord`}
    B --> C[Get `texelColor`]
    C --> D{Is `texelColor` approximately equal to `targetColor`?}
    D -- Yes --> E[Set `gl_FragColor` to `replacementColor`]
    D -- No --> F[Set `gl_FragColor` to `texelColor`]
    E --> G[End Fragment Shader]
    F --> G

Fragment Shader Logic for Color Replacement

Implementing Color Replacement in GLSL

To achieve color replacement, we'll need a fragment shader that takes the texture, a target color, and a replacement color as uniforms. The shader will then compare each sampled texel's color to the target color, applying the replacement if a match is found. Due to floating-point precision issues, direct equality comparison (==) for colors is often unreliable. Instead, we'll use a small epsilon value to check if the color components are 'close enough' to each other.

precision mediump float;

varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec4 u_targetColor;
uniform vec4 u_replacementColor;
uniform float u_epsilon;

void main() {
    vec4 texelColor = texture2D(u_texture, v_texCoord);
    
    // Check if the texel color is approximately equal to the target color
    bool r_match = abs(texelColor.r - u_targetColor.r) < u_epsilon;
    bool g_match = abs(texelColor.g - u_targetColor.g) < u_epsilon;
    bool b_match = abs(texelColor.b - u_targetColor.b) < u_epsilon;
    bool a_match = abs(texelColor.a - u_targetColor.a) < u_epsilon;
    
    if (r_match && g_match && b_match && a_match) {
        gl_FragColor = u_replacementColor;
    } else {
        gl_FragColor = texelColor;
    }
}

GLSL Fragment Shader for Specific Color Replacement

Integrating with OpenGL ES (iOS Example)

To use this shader in an iOS OpenGL ES application, you would typically load the shader source, compile and link it into a program, and then set the uniform values before drawing. Here's a conceptual outline of how you'd pass the colors and epsilon value from your Objective-C or Swift code to the shader.

// Assuming 'program' is your compiled GLSL program
// and 'targetColor', 'replacementColor' are `GLKVector4` or similar

GLint targetColorUniform = glGetUniformLocation(program, "u_targetColor");
GLint replacementColorUniform = glGetUniformLocation(program, "u_replacementColor");
GLint epsilonUniform = glGetUniformLocation(program, "u_epsilon");

// Set the uniform values
glUniform4f(targetColorUniform, targetColor.r, targetColor.g, targetColor.b, targetColor.a);
glUniform4f(replacementColorUniform, replacementColor.r, replacementColor.g, replacementColor.b, replacementColor.a);
glUniform1f(epsilonUniform, 0.01f); // Example epsilon value

// Bind texture, set vertex attributes, and draw...

Setting GLSL Uniforms in Objective-C for iOS