Camera effects in CanvasLayer (+Cromatic Aberration)

camera-effects/camera-pixelate.tscn

@@ -1,26 +0,0 @@
-[gd_scene load_steps=5 format=3 uid="uid://dgv546pcp176"]
-
-[sub_resource type="Gradient" id="Gradient_hmc0v"]
-offsets = PackedFloat32Array(0.225256, 0.703072)
-colors = PackedColorArray(0, 0, 0, 0, 0, 0, 0, 1)
-
-[sub_resource type="GradientTexture2D" id="GradientTexture2D_1cjfc"]
-gradient = SubResource("Gradient_hmc0v")
-width = 256
-height = 256
-fill = 1
-fill_from = Vector2(0.5, 0.5)
-
-[sub_resource type="StandardMaterial3D" id="StandardMaterial3D_q043q"]
-transparency = 1
-albedo_texture = SubResource("GradientTexture2D_1cjfc")
-roughness = 0.0
-
-[sub_resource type="QuadMesh" id="QuadMesh_002xp"]
-material = SubResource("StandardMaterial3D_q043q")
-size = Vector2(24, 14)
-
-[node name="Pixelate" type="MeshInstance3D"]
-transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, -0.820396)
-visible = false
-mesh = SubResource("QuadMesh_002xp")

camera-effects/camera-vignette.tscn

@@ -1,47 +0,0 @@
-[gd_scene load_steps=8 format=3 uid="uid://b3fmmgvf3owwy"]
-
-[sub_resource type="Curve" id="Curve_kdxx2"]
-max_value = 1.5
-_data = [Vector2(0, 1.5), 0.0, 0.0, 0, 0, Vector2(0.498361, 1.28219), 0.0, 0.0, 0, 0, Vector2(1, 1.5), 0.0, 0.0, 0, 0]
-point_count = 3
-
-[sub_resource type="CurveTexture" id="CurveTexture_ts23d"]
-curve = SubResource("Curve_kdxx2")
-
-[sub_resource type="ParticleProcessMaterial" id="ParticleProcessMaterial_a08vp"]
-gravity = Vector3(0, 0, 0)
-scale_curve = SubResource("CurveTexture_ts23d")
-
-[sub_resource type="Gradient" id="Gradient_0ankm"]
-offsets = PackedFloat32Array(0.430605, 0.733096)
-colors = PackedColorArray(0, 0, 0, 0, 0.392157, 0, 0, 1)
-
-[sub_resource type="GradientTexture2D" id="GradientTexture2D_s3frb"]
-gradient = SubResource("Gradient_0ankm")
-width = 256
-height = 256
-fill = 1
-fill_from = Vector2(0.5, 0.5)
-
-[sub_resource type="StandardMaterial3D" id="StandardMaterial3D_8laxd"]
-transparency = 1
-vertex_color_use_as_albedo = true
-albedo_texture = SubResource("GradientTexture2D_s3frb")
-roughness = 0.0
-billboard_mode = 3
-billboard_keep_scale = true
-particles_anim_h_frames = 1
-particles_anim_v_frames = 1
-particles_anim_loop = false
-
-[sub_resource type="QuadMesh" id="QuadMesh_hh0er"]
-material = SubResource("StandardMaterial3D_8laxd")
-size = Vector2(24, 14)
-
-[node name="Vignette" type="GPUParticles3D"]
-transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, -0.5)
-amount = 1
-lifetime = 3.0
-fixed_fps = 60
-process_material = SubResource("ParticleProcessMaterial_a08vp")
-draw_pass_1 = SubResource("QuadMesh_hh0er")

camera-effects/chromatic-aberration.gdshader

@@ -0,0 +1,15 @@
+shader_type canvas_item;
+
+// inspired by: https://www.youtube.com/watch?v=aVzY6n3e19A
+
+uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear;
+uniform float ca_strength = 20.0;
+
+void fragment() {
+	vec2 ca_offset = vec2(ca_strength, 0.0) * SCREEN_PIXEL_SIZE;
+	float red = texture(SCREEN_TEXTURE, SCREEN_UV - ca_offset).r;
+	float green = texture(SCREEN_TEXTURE, SCREEN_UV).g;
+	float blue = texture(SCREEN_TEXTURE, SCREEN_UV + ca_offset).b;
+	
+	COLOR = vec4(red, green, blue, 1.0);
+}

camera-effects/chromatic_aberration.tscn

@@ -0,0 +1,15 @@
+[gd_scene load_steps=3 format=3 uid="uid://sy04esp2kle1"]
+
+[ext_resource type="Shader" path="res://camera-effects/chromatic-aberration.gdshader" id="1_qe316"]
+
+[sub_resource type="ShaderMaterial" id="ShaderMaterial_bla75"]
+shader = ExtResource("1_qe316")
+shader_parameter/ca_strength = 20.0
+
+[node name="Chromatic Aberration" type="ColorRect"]
+material = SubResource("ShaderMaterial_bla75")
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2

camera-effects/pixelate.gdshader

@@ -1,9 +1,14 @@
-shader_type spatial;
+shader_type canvas_item;
+
 uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear;
 uniform int pixel_size = 1;
 uniform float alpha = 0.1;
 
+// inspired by https://www.youtube.com/watch?v=77F4ZjmQ07U
+
 void fragment() {
+	vec2 VIEWPORT_SIZE = 1.0 / SCREEN_PIXEL_SIZE;
+	
 	// a variant of nearest neighbour fragment shader_type
 	float x = float(int(FRAGCOORD.x) % pixel_size);
 	float y = float(int(FRAGCOORD.y) % pixel_size);
@@ -12,6 +17,5 @@ void fragment() {
 	y = FRAGCOORD.y + floor(float(pixel_size) / 2.0) - y;
 	
 	// set albedo value on the current coordinate based on vec2(x,y) / viewport_size
-	ALBEDO = texture(SCREEN_TEXTURE, vec2(x, y) / VIEWPORT_SIZE).xyz;
-	ALPHA = alpha;
+	COLOR = vec4(texture(SCREEN_TEXTURE, vec2(x, y) / VIEWPORT_SIZE).xyz, alpha);
 }

camera-effects/pixelate.tscn

@@ -0,0 +1,16 @@
+[gd_scene load_steps=3 format=3 uid="uid://djsrvtsqjesw8"]
+
+[ext_resource type="Shader" path="res://camera-effects/pixelate.gdshader" id="1_boqib"]
+
+[sub_resource type="ShaderMaterial" id="ShaderMaterial_1p2bf"]
+shader = ExtResource("1_boqib")
+shader_parameter/pixel_size = 4
+shader_parameter/alpha = 1.0
+
+[node name="Pixelate" type="ColorRect"]
+material = SubResource("ShaderMaterial_1p2bf")
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2

camera-effects/vignette.gdshader

@@ -0,0 +1,20 @@
+shader_type canvas_item;
+
+uniform vec4 color : source_color;
+uniform float speed = 3.0;
+uniform float pulse_strength = 0.1;
+uniform float internal_radius = 0.4;
+uniform float external_radius = 0.7;
+
+float smoothCircle(vec2 center, float positioner, vec2 uv)
+{
+	float d = distance(center, uv);
+    return smoothstep(internal_radius + positioner, external_radius + positioner, d);
+}
+
+void fragment() {
+	vec2 CENTER = vec2(0.5, 0.5);
+	float position = sin(TIME * speed) * pulse_strength;
+	float circle = smoothCircle(CENTER, position, UV);
+	COLOR = vec4(color.rgb, circle);
+}

camera-effects/vignette.tscn

@@ -0,0 +1,19 @@
+[gd_scene load_steps=3 format=3 uid="uid://ds5xw2us1br3q"]
+
+[ext_resource type="Shader" path="res://camera-effects/vignette.gdshader" id="1_pj8nl"]
+
+[sub_resource type="ShaderMaterial" id="ShaderMaterial_p1c5j"]
+shader = ExtResource("1_pj8nl")
+shader_parameter/color = Color(0.411765, 0, 0, 1)
+shader_parameter/speed = 3.0
+shader_parameter/pulse_strength = 0.1
+shader_parameter/internal_radius = 0.4
+shader_parameter/external_radius = 0.7
+
+[node name="Vignette" type="ColorRect"]
+material = SubResource("ShaderMaterial_p1c5j")
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2