Color Spread Effect GLSL Shaders Opengl ES 2.0

Question

I am looking to create a effect using GLSL on Android and OpenGL ES 2.0 where at the beginning I convert a colored image into greyscale using shaders and later show the original colors spreading one pixel at a time starting from any one corner vertex of the image.

I have been to able to successfully apply the first effect (convert to greyscale)

But I cant figure out how to choose one pixel at a time and show a spreading effect on the image ?

(Can anyone just push me in the right direction ?)

Final Requirement

Isn't this a simple matter of displaying both grayscale and color image on top of another, and then GL_CLIP the contents of the color sprite? — LearnCocos2D

Alexander Miller Alexander Miller · Accepted Answer · 2014-09-24T14:23:51

First, I think you'll need to create a bitmap in client memory. This bitmap will serve to tell your shader which pixels should be converted to grayscale. Imagine a giant 2-D array of Boolean values. Zeros for false, ones for true. You only need one channel.

For each rendered frame, you will convert your bitmap into GL texture with glTexImage2D and pass it into your shader along with the color image.

Your frag shader will look something like this:

uniform Sampler2D s_input;
uniform Sampler2D s_pixelsToGrayscale;
varying vec2 v_texCoord;

main() {
    vec4 color = texture2D(s_input, v_texCoord);
    vec4 isGrayscalePixel = texture2D(s_pixelsToGrayscale, v_texCoord);
    if( isGrayscalePixel.x > 0.0 ) {
        color = vec4(0.2126*color.r + 0.7152*color.g + 0.722*color.b);
    }
    gl_FragColor = color;
}

The most annoying part of this is going to be creating your bitmap, unless you are new to post process effects (in which case you might want to start investigating a full-screen quad) This should be enough to at least send you in the right direction, but if you're uncomfortable reading this kind of shader, I imagine you have your work cut out for you.

Color Spread Effect GLSL Shaders Opengl ES 2.0

1 Answers