Functional Shaders: A Colorful Intro-Part5 Tinting With Sepia Tone
Time to go old school or a least look like it…
Missed Part 1?
In the previous article we learned how to strip out the colors and just use the luminesce and make the image gray scale. In this article we will add color back tinting the image.
Starting Point For Tinting With Sepia Color
Sepia Tone filter is achieved by multiplying a gray scale image with a color. A simple way is to convert to gray scale and then tint with a color. This however is not as precise as we can be.
// make a sepia tone color
vec3 sepia = vec3(1.2, 1.0, 0.8);
// get gray/intensity scale
float gray = (texColor.r + texColor.g + texColor.b) / 3.0;
// combine
vec3 color = gray * sepia;Try it with different colors instead of the Sepia Tone.
Another way
The sepia tone filter emulates the yellowing seen on some old-timey photographs. Because the result isn’t greyscale, it’s not sufficient to find a single luminance value . Each output color channel needs to be based on each color input channel.
// sorry about the formatting, code also on shadertoy examples
vec3 SepiaChannels(vec3 inputColor)
{
vec3 outputColor; outputColor.r = (inputColor.r * 0.393) + (inputColor.g * 0.769) +(inputColor.b * 0.189); outputColor.g = (inputColor.r * 0.349) + (inputColor.g * 0.686) + (inputColor.b * 0.168);
outputColor.b = (inputColor.r * 0.272) + (inputColor.g * 0.534) + (inputColor.b * 0.131);
return outputColor;
}
Instead of a simple vector multiplication, as seen in the previous code. We can multiply the input RGB values of each pixel with this matrix of coefficients to obtain our output RGB values.
vec3 Sepia(vec3 inputColor)
{
const mat3 Mat = mat3(
0.393, 0.769, 0.189,
0.349, 0.686, 0.168,
0.272, 0.534, 0.131);
return inputColor * Mat;
}More Info On Linear Algebra Calculation
Completed Shader
Links
For an in depth look at gray scale check out:
In the next article we continue with gray scale to create a Black & White filter using a threshold.
