#3 Color shaders

Check out the last tutorial if you haven't already. Today we'll be learning how to make a sepia shader and an invert shader. This one will be relatively short. The next one is likely going to be long.

Sepia shader

Lets make a sepia shader! Using the same basic concepts of the black and white shader, we will be able to create a sepia shader. That is because sepia shaders are like yellow versions of a black and white shader. So we can try getting just the red from the black and white shader.

 The code should look like this:

varying vec2 v_vTexcoord;
varying vec4 v_vColour;

void main()
{
    vec4 Color = texture2D( gm_BaseTexture, v_vTexcoord );
    vec3 lum = vec3(0.299, 0.587, 0.114);
    float bw = dot( Color.rgb, lum);//black and white result
    gl_FragColor = vec4( vec3(bw,0.0,0.0), Color.a);
}


The result is this:

On the left is the normal background and on the right is the shader version.
As you can see, that doesn't look like a sepia shader. It should have more green and a little more blue. Right now, it only has the red. So we will try a different vector so that there is still some green and blue. I found that the vector "vec3( 1.0, 0.8, 0.4)" was my favorite, though if you wanted you could tweak it. The code I used looks like this:

varying vec2 v_vTexcoord;
varying vec4 v_vColour;

void main()
{
    vec4 Color = texture2D( gm_BaseTexture, v_vTexcoord );
    vec3 lum = vec3(0.299, 0.587, 0.114);
    float bw = dot( Color.rgb, lum);//black and white result
    gl_FragColor = vec4( bw * vec3( 1.0, 0.8, 0.4), Color.a);
}



Here are the results:

On left is my background and on the right is after the shader. That looks a lot better.
Next will test another simple shader.

Invert shader

Since we already learned that colors and alpha should always be in the 0 to 1 range we can simply invert the colors by changing it to negative and adding one. So this is a very simple shader to make. The code should look like this: 

varying vec2 v_vTexcoord;
varying vec4 v_vColour;

void main()
{
    vec4 Color = texture2D( gm_BaseTexture, v_vTexcoord );
    gl_FragColor = vec4( vec3(1.0) - Color.rgb, Color.a);
}

Here are the next results:

Before and after.


SEPIA EXAMPLE
INVERT EXAMPLE