This can be also considered as a development blog post we will talk about some basics of Shadertoy fragment shader and converting RGB colors to graycale.

A Tiny Introduction to Shadertoy

Shadertoy helps you to create/test your shaders via using a web browser, which can support OpenGL of course. “Image shaders” of Shadertoy are basically fragment shaders. mainImage() function is used to generate the image and it is called per pixel. mainImage() takes out vec4 fragColor and in vec2 fragCoord parameters where fragCoord contains the pixel coordinates in the 0.5 to resolution-0.5 range and fragColor is the resultant color for the pixel.

There are some built-in uniforms provided by Shadertoy, such as time (iTime), resolution of the image generated (iResolution), and so on. You can also easily add extra buffer, texture, input handlers, sound, and more.

You can check the whole details from Shadertoy’s How To page.

How to Grayscale

There are three algorithms for converting RGB colors to grayscale colors; lightness method, average method, and luminosity.

The lightness method gets the max and min values in the given RGB values and average the maximum and minimum.

The average method literally averages the values:

The luminosity method still averages the RGB values, but produces better results than the methods above since it performs a (predetermind) weighted average by taking account of human perception.

If you need more details or want to find out more algorithms, please check the references.

The Shader

So, here is the shader that will take your texture and transform the colors between grayscale and original RGB based on the time.