More tutorial on custom shader effects

Color boosting
We can increase the contribution of a particular color by multiplying it with a scaling factor. For example, to increase red factor by 50% we can perform the following operations,

precision mediump float;
uniform sampler2D vTex;
varying vec2 vCoord;
void main(void)
{
vec3 col = texture2D(vTex, vCoord).bgr;
gl_FragColor = vec4(col.r * 1.5, col.g, col.b, 1.0);
}

The following example increase blue factor by 50%,

precision mediump float;
uniform sampler2D vTex;
varying vec2 vCoord;
void main(void)
{
vec3 col = texture2D(vTex, vCoord).bgr;
gl_FragColor = vec4(col.r, col.g, col.b * 1.5, 1.0);
}

And another example to increase yellow factor by 50%

precision mediump float;
uniform sampler2D vTex;
varying vec2 vCoord;
void main(void)
{
vec3 col = texture2D(vTex, vCoord).bgr;
gl_FragColor = vec4(col.r * 1.5, col.g * 1.5, col.b, 1.0);
}

They will produce output as follow,

Color shifting
We can produce weird output by swapping RGB color channel. For example swapping red with green and green with blue as follow

precision mediump float;
uniform sampler2D vTex;
varying vec2 vCoord;
void main(void)
{
vec3 col = texture2D(vTex, vCoord).bgr;
gl_FragColor = vec4(col.g, col.b, col.r, 1.0);
}

or swapping red with blue and green with red,

precision mediump float;
uniform sampler2D vTex;
varying vec2 vCoord;
void main(void)
{
vec3 col = texture2D(vTex, vCoord).bgr;
gl_FragColor = vec4(col.b, col.r, col.g, 1.0);
}

will produce this output,











Grayscale
To convert RGB to grayscale we can use the following formula
float grayscale = 0.3 * red + 0.59 * green + 0.11 * blue

To reduce the number of grayscale tones, we can clamp the value to a specific threshold. For example to create 3 tones grayscale we can use the following code,

precision mediump float;
uniform sampler2D vTex;
varying vec2 vCoord;
void main(void)
{
vec3 col = texture2D(vTex, vCoord).bgr;
float y = 0.3 *col.r + 0.59 * col.g + 0.11 * col.b;
y = y < 0.3 ? 0.0 : (y < 0.6 ? 0.5 : 1.0);
col = vec3(y, y, y);
gl_FragColor = vec4(col, 1.0);
}

and another variation where only red-channel is used,

precision mediump float;
uniform sampler2D vTex;
varying vec2 vCoord;
void main(void)
{
vec3 col = texture2D(vTex, vCoord).bgr;
float y = 0.3 *col.r + 0.59 * col.g + 0.11 * col.b;
y = y < 0.3 ? 0.0 : (y < 0.6 ? 0.5 : 1.0);
col = vec3(y, 0.0, 0.0);
gl_FragColor = vec4(col, 1.0);
}

Those code will produce the following output,