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.



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;
brightness, Color, color correction, contrast, correction, environment, gradient, saturation, viewport
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

Related shaders

Gradient Color Fog

color splash (show only one color)

Dither Gradient Shader

Inline Feedbacks
View all comments