CanvasItem retro shader

levels/ghost_ship/ghost_ship.tscn

@@ -1,8 +1,9 @@
-[gd_scene load_steps=4 format=3 uid="uid://bov4ok76woyc"]
+[gd_scene load_steps=5 format=3 uid="uid://bov4ok76woyc"]
 
 [ext_resource type="PackedScene" uid="uid://crydi5cjgfwe5" path="res://levels/ghost_ship/ghost_ship_level.tscn" id="1_aj2m7"]
 [ext_resource type="Environment" uid="uid://bkvij3ljl5ox3" path="res://levels/ghost_ship/environment_3.tres" id="1_wwgrl"]
 [ext_resource type="PackedScene" uid="uid://bwe2jdmvinhqd" path="res://src/player/player.tscn" id="2_0ef5p"]
+[ext_resource type="PackedScene" uid="uid://d1kacn4b60ucy" path="res://src/ui/post_processing.tscn" id="3_o7mxe"]
 
 [node name="GhostShip" type="Node3D"]
 
@@ -53,5 +54,7 @@ visible = false
 light_energy = 1.6
 omni_range = 10.0
 
+[node name="PostProcessing" parent="." instance=ExtResource("3_o7mxe")]
+
 [node name="Player" parent="." instance=ExtResource("2_0ef5p")]
 transform = Transform3D(-1, 0, -8.74228e-08, 0, 1, 0, 8.74228e-08, 0, -1, 0, 1, 0)

src/shaders/canvas_retro.gdshader

@@ -0,0 +1,168 @@
+// CanvasItem Retro Post-processing
+// Adapted from https://godotshaders.com/shader/retro-post-processing/
+
+shader_type canvas_item;
+
+
+// Handles the resolution changes, color depth, and dithering
+uniform sampler2D screen_texture : hint_screen_texture, repeat_disable, filter_nearest;
+
+
+group_uniforms resolution_and_colors;
+uniform bool change_color_depth = false;
+uniform int target_color_depth : hint_range(1, 8) = 5;
+uniform bool dithering = false;
+uniform bool scale_resolution = false;
+uniform int target_resolution_scale = 3;
+
+
+// Handles the LUTish recoloring
+group_uniforms gradient_recoloring;
+uniform bool enable_recolor = false;
+uniform sampler2D to_gradient: hint_default_black;
+
+
+int dithering_pattern(ivec2 fragcoord) {
+	const int pattern[] = {
+		-4, +0, -3, +1,
+		+2, -2, +3, -1,
+		-3, +1, -4, +0,
+		+3, -1, +2, -2
+	};
+
+	int x = fragcoord.x % 4;
+	int y = fragcoord.y % 4;
+
+	return pattern[y * 4 + x];
+}
+
+
+vec3 rgb2hsv(vec3 rgb) { //Converts RGB values to HSV
+	float r = rgb.r;
+	float g = rgb.g;
+	float b = rgb.b;
+
+
+	float cmax = max(r,max(g,b));
+	float cmin = min(r,min(g,b));
+	float delta = cmax - cmin;
+
+
+	float h = 0.f; //hue
+
+
+	if (delta > 0.f){
+		if (cmax == r){
+			h = (g-b)/delta;
+			h = mod(h,6.f);
+		} else if (cmax == g){
+			h = ((b - r) / delta) + 2.f;
+		} else {
+			h = ((r-g)/delta) + 4.f;
+		}
+		h = h * 60.f;
+	}
+
+
+	float s = 0.f; //saturation
+	if (cmax > 0.f){
+		s = delta / cmax;
+	}
+
+
+	return vec3(h,s,cmax); // Keep original alpha value
+
+
+}
+
+
+vec3 hsv2rgb(vec3 hsv) { //Converts HSV values to RGB
+	float h = hsv.r;
+	float s = hsv.g;
+	float v = hsv.b;
+	float c = v * s;
+	//X = C × (1 - |(H / 60°) mod 2 - 1|)
+	float x = h / 60.f;
+	x = mod(x,2.f);
+	x = abs(x - 1.f);
+	x = c * (1.f - x);
+
+
+	float m = v - c;
+
+
+	vec3 rgb = vec3(0.f,0.f,0.f);
+
+
+	if (h < 60.f) {
+		rgb = vec3(c,x,0.f);
+	} else if (h < 120.f){
+		rgb = vec3(x,c,0.f);
+	} else if (h < 180.f){
+		rgb = vec3(0.f,c,x);
+	} else if (h < 240.f){
+		rgb = vec3(0.f,x,c);
+	} else if (h < 300.f){
+		rgb = vec3(x,0.f,c);
+	} else if (h < 360.f){
+		rgb = vec3(c,0.f,x);
+	}
+	rgb[0] = rgb[0] + m;
+	rgb[1] = rgb[1] + m;
+	rgb[2] = rgb[2] + m;
+
+
+	return rgb;
+}
+
+
+void fragment() {
+
+	vec2 iResolution = 1.0 / SCREEN_PIXEL_SIZE;
+    vec2 q = FRAGCOORD.xy / iResolution.xy;
+	ivec2 uv = ivec2(q);
+
+	vec3 color = texture(screen_texture, vec2(q.x,q.y) ).xyz;
+
+	if(scale_resolution){
+		uv = ivec2(FRAGCOORD.xy / float(target_resolution_scale));
+		color = texelFetch(screen_texture, uv * target_resolution_scale, 0).rgb;
+	} else {
+		uv = ivec2(FRAGCOORD.xy);
+		color = texelFetch(screen_texture, uv, 0).rgb;
+	}
+
+	if(enable_recolor){
+		vec3 hsv = rgb2hsv(color);
+		float color_pos = (hsv.x / 360.0);
+		vec3 new_color = texture(to_gradient, vec2((color_pos), 0.5)).rgb;
+		vec3 new_hsv = rgb2hsv(new_color);
+		hsv.x = new_hsv.x;
+		vec3 final_rgb = hsv2rgb(hsv);
+
+
+		color.rgb = final_rgb;
+	}
+
+
+
+	// Convert from [0.0, 1.0] range to [0, 255] range
+	ivec3 c = ivec3(round(color * 255.0));
+
+	// Apply the dithering pattern
+	if (dithering) {
+		c += ivec3(dithering_pattern(uv));
+	}
+
+	vec3 final_color;
+	if(change_color_depth){
+		// Truncate from 8 bits to color_depth bits
+		c >>= (8 - target_color_depth);
+		final_color = vec3(c) / float(1 << target_color_depth);
+	} else {
+		final_color = vec3(c) / float(1 << 8);
+	}
+
+	// Convert back to [0.0, 1.0] range
+	COLOR.rgb = final_color;
+}

src/shaders/canvas_retro.gdshader.uid

@@ -0,0 +1 @@
+uid://bsdv5d3gxmjc

src/ui/post_processing.tscn

@@ -0,0 +1,20 @@
+[gd_scene load_steps=3 format=3 uid="uid://d1kacn4b60ucy"]
+
+[ext_resource type="Shader" uid="uid://bsdv5d3gxmjc" path="res://src/shaders/canvas_retro.gdshader" id="1_mr66v"]
+
+[sub_resource type="ShaderMaterial" id="ShaderMaterial_ejh2c"]
+shader = ExtResource("1_mr66v")
+shader_parameter/change_color_depth = true
+shader_parameter/target_color_depth = 5
+shader_parameter/dithering = true
+shader_parameter/scale_resolution = true
+shader_parameter/target_resolution_scale = 3
+shader_parameter/enable_recolor = false
+
+[node name="PostProcessing" type="ColorRect"]
+material = SubResource("ShaderMaterial_ejh2c")
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2