change saturation for one channel color

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By DexterFstone

how to change saturation for one channel color (RGB)? any idea, demo, or tool, or shader code?

I mean like this picture

how to show all color gray Except one color?

DexterFstone | 2021-10-29 18:31

:bust_in_silhouette: Reply From: aXu_AP

Method is quite simple, altough you need to implement some color maths to achieve it. Generally steps are these (loop over every pixel of an image, or write a fragment shader if you need it real time):

Convert color into hsv (hue saturation value)
If hue is in certain range, leave color as is.
Else set saturation to 0 and convert color back into rgb.

Godot has inbuilt tools to convert to and back from hsv in Color class, but if you want to make it with shader, you need to write the conversion yourself. You can google for rgb to hsv conversion algorithms, there’s good explanations and code examples how to achieve this.

Expanding on your answer, shader-wise, there is a base here for desaturation effect, should give you something to experiment with:

Desaturation Shader - Godot Shaders

shader_type canvas_item;

uniform float saturation;

void fragment() {
    vec4 tex_color = texture(TEXTURE, UV);

    COLOR.rgb = mix(vec3(dot(tex_color.rgb, vec3(0.299, 0.587, 0.114))), tex_color.rgb, saturation);
	COLOR.a = tex_color.a;

I remember some old shader codes that was interesting to experiment on previous versions of godot made by Juan, I think it was for 2.x, but I didn’t found them on my stuff.

The_Black_Chess_King | 2021-10-31 19:58