roguish

Grey Shaders — mobile app

GreyShaders is a mobile application/tool available on the Google and Apple App Stores. It is a demo of several Greyscale Conversion Shaders applied to a test image.

Get it on Google Play

Comments are welcome! Share references and knowledge about color space conversion in the comments section below and I’ll continue to expand this post with relevant updates at the bottom of this post. Enjoy the app!

Humans sense pure Green as brighter than pure Red, and Red is sensed as brighter than Blue. Therefore when we create a greyscale image based on a source color image we derive most of the brightness from the Green channel of the source image, followed by the Red channel, and finally the Blue channel contributes the least to the brightness of the converted image.

This weighted-conversion from color to greyscale can be done using several algorithms that approximate the perceived brightnesses of colors. Some algorithms do a better job of selecting the appropriate greyscale tone to represent the colors in the original image.

The Grey Shader app demonstrates several popular conversion algorithms. Users can toggle between the original full-color image and each shader-modified greyscale version. This allows optimal A/B comparison. More info about the Grey Shader app and each of the GLSL shaders it uses is below.


Download Full Size Screenshots

  1. Basic Coefficients, Equal Weight for all 3 Colors: R: 0.333, G: 0.333, B: 0.333
  2. Basic Coefficients, Perceptual Luminance Weights: R: 0.212655, G: 0.715158, B: 0.072187
  3. Basic Coefficients, Perceptual Luminance Weights: R: 0.299, G: 0.587, B: 0.114
  4. Square/Square Root. Coefficients: R: 0.212655, G: 0.715158, B: 0.072187
  5. Square/Square Root. Coefficients: R: 0.299, G: 0.587, B: 0.114
  6. Inverse Gamma, apply Coefficients, Apply Gamma. Coefficients: R: 0.212655, G: 0.715158, B: 0.072187
  7. Inverse Gamma, apply Coefficients, Apply Gamma. Coefficients: R: 0.299, G: 0.587, B: 0.114

Many of the algorithms used in Grey Shader were sourced from info found on the following thread on StackOverflow. These algorithms concur with many other resources and standards for greyscale conversion.
http://stackoverflow.com/questions/596216/formula-to-determine-brightness-of-rgb-color

All the perceptual luminance coefficient sets are similar: pure Blue is the darkest, pure Red is approximately 3 times brighter, and pure Green is approximately 2-3 times brighter than Red. These ratios were determined in studies performed in the early 1900s with measurements of human perception of the comparative brightness of different colors.

Note:
The Kohlrausch Effect (link below) causes high-saturation colors to appear more vibrant and prominent than low-saturation colors. It’s noticeable in the Grey Shader app. When toggling between full color and one of the greyscale images, the red apple and other red elements have a visual prominence in the color image that isn’t represented with similar brightness prominence in the corresponding greyscale image. The cyan and magenta color swatches on the test cards also have a similar effect.
http://en.wikipedia.org/wiki/Helmholtz%E2%80%93Kohlrausch_effect

GitHub
The repo has the necessary files to add to a base Cocos2d-x project (I didn’t commit the whole 500Mb directory)
https://github.com/ElliotMebane/GreyShaders
Direct link to the directory containing the shaders:
https://github.com/ElliotMebane/GreyShaders/tree/master/Resources/shaders

PhotoDisc PDI Image Freeware License

Leave a Reply