Shader Programming, Volume 15

Photoshop-like Screen Effect Shaders

Chapter 8.2

Brightness, Saturation, and Contrast with Screen Effects

We’re gonna take the same process for creating Screen Effects we learned in the last article and use it to implement a Screen Effect shader that gives us control of the Brightness, Saturation, and Contrast of our scene.

Go ahead and make a test scene with a three spheres of a different color. Make a new script called BSCImageEffect.cs and a new shader called BSCImageEffect.shader and attach the script to the camera. Just like the last scene, really. I threw a skybox in there for good measure.

Anyway, here’s the shader code:

In the BrightnessSaturationContrast() function you may be unfamiliar with some of the calculations, as I was, but apparently the calculations and coefficients are based on CIE color matching functions and are pretty much industry-standard, if you believe the book. luminanceCoefficient variable stores values that give us the overall brightness of the image. We can get the overall brightness of the image by doing a dot product of the current image with these luminance coefficients. After that it’s a simple matter of using lerp functions to blend between zero saturation and maximum saturation, as well as minimum contrast and maxium contrast.

And here’s the script code to work with that shader:

Don’t forget to attach the BSCImageEffect.shader to the BSCImageEffect.cs script in the Inspector!

After all of that you should have a scene that you can manipulate like this:

Brightness, Saturation, Contrast Image Effect

Next up on our mission to recreate Photoshop in Unity (for some reason), implementing Blend modes with Screen Effects!