# Tutorial: Shader Programming Desaturation

# Adding New Effect

Make sure you have enabled the Asset Creation options in the editor!

  • Click on Add Effect on the right.
  • Click on New at the bottom of the dialog.
  • Enter a new name for the effect (in this example: "Desaturate") and click OK.

# Editing the Shader

Click on Edit next to the fragment shader to open the shader editor. You will be presented with a default shader that does nothing but can be used as a starting point.

Add a new line of code just before albedo is returned to add a basic desaturation function:

albedo.rgb = CAST3(dot(vec3(0.11, 0.59, 0.3), albedo.rgb));

This code will take the current color of the image, make a dot product with a constant vector (the 0.11, 0.59, 0.3 constants are typically used to determine luminosity) and then turn the single resulting float into a vec3 by using the CAST3 function. The fragment shader should now look like this:

uniform sampler2D g_Texture0; // {"material":"framebuffer","label":"ui_editor_properties_framebuffer","hidden":true}
varying vec4 v_TexCoord;
void main() {
	vec4 albedo = texSample2D(g_Texture0, v_TexCoord.xy);
	albedo.rgb = CAST3(dot(vec3(0.11, 0.59, 0.3), albedo.rgb));
	gl_FragColor = albedo;

You can now click on OK on the right and you will already see that the image becomes fully desaturated through this new effect.

# Making the effect configurable

To make the effect a bit more useful, we'll add a slider to control how much the image will be desaturated. This can later also be combined with user properties or SceneScript for additional use-cases. Use the Snippets menu to create a new float slider.

Rename the slider variable and change the label, like this:

uniform float u_DesaturationAmount; // {"material":"Amount","default":1,"range":[0,1]}

Now add the new slider value to the code. Using the GLSL mix function we can blend between the original and desaturated color like this:

albedo.rgb = mix(albedo.rgb, CAST3(dot(vec3(0.11, 0.59, 0.3), albedo.rgb)),	u_DesaturationAmount);

Click on OK in the shader editor and you should immediately see the slider appear below the shader edit buttons. Your new effect now has a slider that allows you to tweak the amount of desaturation easily and you can even bind a script or a user property to it.

You can see the steps from this section in the following video, including the finished effect: