Gradient Color Correction for ViewportTextures

If you tried to add a FPS weapon to your game rendering it with a ViewportTexture and gradient color correction, you might have noticed that ViewportTextures with transparency don’t work with most World Environment settings.

So I made this simple shader that mimics the Adjustment properties from World Environment, which includes brightness, contrast, saturation and gradient color correction.

How to use it

Add this shader to the Canvas Item material of the node being used to render the Viewport Texture and use the same settings from your main scene.

Credits

• Godot Official Docs for brightness, contrast and saturation code.
• GDQuest for the gradient color correction code.

Shader code

shader_type canvas_item;

uniform float brightness : hint_range(0.0,8.0) = 1.0;
uniform float contrast : hint_range(0.0,8.0) = 1.0;
uniform float saturation : hint_range(0.0,8.0) = 1.0;

// Use a GradientTexture for the color correction
uniform sampler2D gradient;


void fragment(){
	// Viewport texture
	vec4 input_color = texture(TEXTURE, UV);
	
	//Brightness adjustment
	input_color.rgb = mix(vec3(0.0), input_color.rgb, brightness);
	
	//Contrast adjustment	
    input_color.rgb = mix(vec3(0.5), input_color.rgb, contrast);
	
	//Saturation adjustment	
    input_color.rgb = mix(vec3(dot(vec3(1.0), input_color.rgb) * 0.33333), input_color.rgb, saturation);
	
	// Color correction
	float grayscale_value = dot(input_color.rgb, vec3(0.299, 0.587, 0.114));
	vec3 sampled_color = texture(gradient, vec2(grayscale_value, 0.0)).rgb;
	
	//Final result
	COLOR.rgb = sampled_color;
	COLOR.a = input_color.a;
}

Tags