Shaders Desaturate overtime shader

[cidwel]

Hello!

I'm trying to find a good shader that will let me convert any sprite into greyscale over a time variable.

Right now I have this:

void main( void ) {

    vec3 color = vec3(1,0,0);
    
    vec3 c1 = color;
    

    float compRMax = 0.3;
    float compGMax = 0.59;
    float compBMax = 0.11;
    

    float compR = 1.0 - time*0.2;
    if (compR < compRMax) {
        compR = compRMax;
    }
    float compG = 1.0 - time*0.2;
    if (compG < compGMax) {
        compG = compGMax;
    }
    float compB = 1.0 - time*0.2;
    if (compB < compBMax) {
        compB = compBMax;
    }
    
    vec3 c2 = vec3(compR,compG,compB);
    
    float grayscale = dot(c1,c2);
        
    gl_FragColor = vec4(grayscale,0,0,1.0);

but seems not working as it is trying to turn values just in black.

For some reason I can't find any resource on internet that will let me modify the saturation overtime.

Anyone knows a good example for achieving this? The idea is to get a shader that receives a time input and will get the color and desaturate it slowly until is full greyscale

Many thanks

 

[Bingdom]

You'll want a shader to convert from rgb to hsv.

Desaturate from there. You'll need a uniform.

Then convert back to rgb.

The shader can easily be found online and it's copypastable. I've found it before.

Edit:
A faster approach is to use mix() combined with a greyscale shader.