Skip to content

Commit e2e91c3

Browse files
hiulithiulit
committed
Bumped to v2.0.0
1 parent dd2d1fa commit e2e91c3

File tree

7 files changed

+126
-101
lines changed

7 files changed

+126
-101
lines changed

‎README.md

Lines changed: 46 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,101 +3,115 @@
33
A 2D shader for Godot 3 simulating a CRT.
44

55
![A 2D shader for Godot 3 simulating a CRT - OFF](/examples/crt-off.png)
6-
![A 2D shader for Godot 3 simulating a CRT- ON](/examples/crt-on.png)
6+
![A 2D shader for Godot 3 simulating a CRT - ON](/examples/crt-on.png)
77

88
## Usage
99

1010
* Create a `CanvasLayer`.
1111
* Add a `ColorRect` as a child node of the `CanvasLayer`.
1212
* In the `ColorRect` properties:
1313
* Go to the **Material** section.
14-
* Click on the `[empty]` **Material** and load `crt_material.tres`.
14+
* Click on the `[empty]` dropdown from **Material** and load `crt_material.tres`.
1515

16-
If for for reason, when loading the `crt_material.tres`, the `crt.shader` is empty, just open it with any text editor, copy the code in the **Shader** editor and save it.
16+
### Note
17+
If for some reason, when loading the `crt_material.tres`, the `crt_shader.shader` is empty, just open it with any text editor, copy the code in the **Shader** editor and save it.
1718

1819
## Shader Parameters
1920

20-
### Boost
21+
### Screen size
2122

2223
| Name | Type | Default | Description |
2324
| --- | --- | --- | --- |
24-
| `boost` | `float` | `1.2` | Gives extra brightness to compensate for the grille, the scanlines and the vignette. Range from `1.0` to `2.0` with `0.01` steps. |
25+
| `screen_size` | `vec2` | `vec2(320.0, 180.0)` | The size of your project's `display/window/size`. |
2526

26-
### Grille opacity
27+
### Show curvature
2728

2829
| Name | Type | Default | Description |
2930
| --- | --- | --- | --- |
30-
| `grille_opacity` | `float` | `0.85` | Controls the opacity of the grille. `0.0` is complete opaque. Range from `0.0` to `1.0` with `0.01` steps. |
31+
| `show_curvature` | `bool` | `true` | Enables/disables the curvature effect. |
3132

32-
### Scanlines opacity
33+
Works best in `window/stretch/mode="2d"`.
34+
35+
### Curvature X amount
3336

3437
| Name | Type | Default | Description |
3538
| --- | --- | --- | --- |
36-
| `scanlines_opacity` | `float` | `0.95` | Controls the opacity of the scanlines. `0.0` is complete opaque. Range from `0.0` to `1.0` with `0.01` steps. |
39+
| `curvature_x_amount` | `float` | `6.0` | Controls the curvature on the X axis. The lower the amount, the lower distortion. Range from `3.0` to `15.0` with `0.01` steps. |
3740

38-
### Vignette opacity
41+
### Curvature Y amount
3942

4043
| Name | Type | Default | Description |
4144
| --- | --- | --- | --- |
42-
| `vignette_opacity` | `float` | `0.2` | Controls the opacity of the vignette. Range from `0.1` to `0.5` with `0.01` steps. |
45+
| `curvature_y_amount` | `float` | `6.0` | Controls the curvature on the Y axis. The lower the amount, the lower distortion. Range from `3.0` to `15.0` with `0.01` steps. |
4346

44-
### Scanlines speed
47+
### Corner color
48+
| Name | Type | Default | Description |
49+
| --- | --- | --- | --- |
50+
| `corner_color` | `vec4` | `vec4(0.0, 0.0, 0.0, 1.0)` | The color of the blank space on the corners left by the curvature. |
51+
52+
### Show vignette
4553

4654
| Name | Type | Default | Description |
4755
| --- | --- | --- | --- |
48-
| `scanlines_speed` | `float` | `1.0` | Controls the speed of the scanlines. Range from `0.0` to `1.0` with `0.01` steps. |
56+
| `show_vignette` | `bool` | `true` | Enables/disables the vignette effect. |
4957

50-
### Show grille
58+
### Vignette opacity
5159

5260
| Name | Type | Default | Description |
5361
| --- | --- | --- | --- |
54-
| `show_grille` | `bool` | `true` | Enables/disables the grille. |
62+
| `vignette_opacity` | `float` | `0.2` | Controls the opacity of the vignette. Range from `0.0` to `1.0` with `0.01` steps. |
5563

56-
### Show scanlines
64+
### Show horizontal scan lines
5765

5866
| Name | Type | Default | Description |
5967
| --- | --- | --- | --- |
60-
| `show_scanlines` | `bool` | `true` | Enable/disable the scanlines. |
68+
| `show_horizontal_scan_lines` | `bool` | `true` | Enables/disables the horizontal scan lines. |
6169

62-
### Show vignette
70+
### Horizontal scan lines amount
6371

6472
| Name | Type | Default | Description |
6573
| --- | --- | --- | --- |
66-
| `show_vignette` | `bool` | `true` | Enables/disables the vignette. |
74+
| `horizontal_scan_lines_amount` | `float` | `180.0` | Controls how many horizontal scan lines appear. |
6775

68-
### Show curvature
76+
Setting it to your project's `windows/size/height` should work fine, but you can play with it to get the results best fitted to your liking.
77+
78+
### Horizontal scan lines opacity
6979

7080
| Name | Type | Default | Description |
7181
| --- | --- | --- | --- |
72-
| `show_curvature` | `bool` | `true` | Enables/disables the curvature. |
82+
| `horizontal_scan_lines_opacity` | `float` | `1.0` | Controls the opacity of the horizontal scan lines. `0.0` is complete opaque. Range from `0.0` to `1.0` with `0.01` steps. |
7383

74-
Works best in `window/stretch/mode="2d"`.
84+
### Show vertical scan lines
7585

76-
### Screen size
86+
| Name | Type | Default | Description |
87+
| --- | --- | --- | --- |
88+
| `show_vertical_scan_lines` | `bool` | `true` | Enables/disables the vertical scan lines. |
89+
90+
### Vertical scan lines amount
7791

7892
| Name | Type | Default | Description |
7993
| --- | --- | --- | --- |
80-
| `screen_size` | `vec2` | `(320.0, 180.0)` | Controls how many grille lines and scanlines appear. Having fewer grille lines and scanlines will make them larger, which makes it harder for the moire effect to appear. |
94+
| `vertical_scan_lines_amount` | `float` | `320.0` | Controls how many vertical scan lines appear. |
8195

82-
Setting it to your project's `windows/size` should work fine, but you can play with it to get the results best fitted to your liking.
96+
Setting it to your project's `windows/size/width` should work fine, but you can play with it to get the results best fitted to your liking.
8397

84-
### Aberration amount
98+
### Vertical scan lines opacity
8599

86100
| Name | Type | Default | Description |
87101
| --- | --- | --- | --- |
88-
| `aberration_amount` | `float` | `0.0` | Controls the amount of chromatic aberration. Range from `0.0` to `10.0` with `1.0` steps. |
102+
| `vertical_scan_lines_opacity` | `float` | `1.0` | Controls the opacity of the vertical scan lines. `0.0` is complete opaque. Range from `0.0` to `1.0` with `0.01` steps. |
89103

90-
### Move aberration
104+
### Boost
91105

92106
| Name | Type | Default | Description |
93107
| --- | --- | --- | --- |
94-
| `move_aberration` | `bool` | `false` | Enables/disables the chromatic aberration movement. |
108+
| `boost` | `float` | `1.2` | Gives extra brightness to compensate the scanlines and the vignette. Range from `1.0` to `2.0` with `0.01` steps. |
95109

96-
### Aberration speed
110+
### Aberration amount
97111

98112
| Name | Type | Default | Description |
99113
| --- | --- | --- | --- |
100-
| `aberration_speed` | `float` | `1.0` | Controls the speed of the moving chromatic aberration (the greater the value the slower the movement). Range from `0.01` to `10.0` with `0.01` steps. |
114+
| `aberration_amount` | `float` | `0.0` | Controls the amount of chromatic aberration. Range from `0.0` to `10.0` with `1.0` steps. |
101115

102116
## Changelog
103117

@@ -114,6 +128,7 @@ Thanks to:
114128
* **knarkowicz** - For the orginal shader code, taken from https://www.shadertoy.com/view/XtlSD7.
115129
* [CowThing](https://github.com/CowThing) - For helping **a lot** in bringing actual distortion and many other improvements to the shader with [#1](https://github.com/hiulit/Godot-3-2D-CRT-Shader/pull/1).
116130
* [uheartbeast](https://twitter.com/uheartbeast) - For the amazing [chromatic aberration shader video tutorial](https://www.youtube.com/watch?v=-PJOHAsBcoI).
131+
* [Tom (Let's GameDev)](https://twitter.com/letsgamedev) - For the amazing [CRT shader video tutorial](https://www.youtube.com/watch?v=Dn8joy4tP2Q), which I took the scan lines from.
117132

118133
## License
119134

‎crt_material.tres

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,18 @@
44

55
[resource]
66
shader = ExtResource( 1 )
7-
shader_param/boost = 1.2
8-
shader_param/grille_opacity = 0.85
9-
shader_param/scanlines_opacity = 0.95
10-
shader_param/vignette_opacity = 0.2
11-
shader_param/scanlines_speed = 1.0
12-
shader_param/show_grille = true
13-
shader_param/show_scanlines = true
14-
shader_param/show_vignette = true
15-
shader_param/show_curvature = true
167
shader_param/screen_size = Vector2( 320, 180 )
8+
shader_param/show_curvature = true
9+
shader_param/curvature_x_amount = 6.0
10+
shader_param/curvature_y_amount = 4.0
11+
shader_param/corner_color = Color( 0, 0, 0, 1 )
12+
shader_param/show_vignette = true
13+
shader_param/vignette_opacity = 0.2
14+
shader_param/show_horizontal_scan_lines = true
15+
shader_param/horizontal_scan_lines_amount = 180.0
16+
shader_param/horizontal_scan_lines_opacity = 1.0
17+
shader_param/show_vertical_scan_lines = false
18+
shader_param/vertical_scan_lines_amount = 320.0
19+
shader_param/vertical_scan_lines_opacity = 1.0
20+
shader_param/boost = 1.2
1721
shader_param/aberration_amount = 0.0
18-
shader_param/move_aberration = false
19-
shader_param/aberration_speed = 1.0
20-

‎crt_shader.shader

Lines changed: 62 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,85 @@
1+
/*
2+
Godot 3 2D CRT Shader.
3+
A 2D shader for Godot 3 simulating a CRT..
4+
5+
Author: hiulit
6+
Repository: https://github.com/hiulit/Godot-3-2D-CRT-Shader
7+
Issues: https://github.com/hiulit/Godot-3-2D-CRT-Shader/issues
8+
License: MIT https://github.com/hiulit/Godot-3-2D-CRT-Shader/blob/master/LICENSE
9+
*/
10+
111
shader_type canvas_item;
212

3-
uniform float boost : hint_range(1.0, 2.0, 0.01) = float(1.2);
4-
uniform float grille_opacity : hint_range(0.0, 1.0, 0.01) = float(0.85);
5-
uniform float scanlines_opacity : hint_range(0.0, 1.0, 0.01) = float(0.95);
6-
uniform float vignette_opacity : hint_range(0.1, 0.5, 0.01) = float(0.2);
7-
uniform float scanlines_speed : hint_range(0.0, 1.0, 0.01) = float(1.0);
8-
uniform bool show_grille = true;
9-
uniform bool show_scanlines = true;
10-
uniform bool show_vignette = true;
11-
uniform bool show_curvature = true; // Curvature works best on stretch mode 2d.
13+
const float PI = 3.14159265359;
14+
1215
uniform vec2 screen_size = vec2(320.0, 180.0);
13-
uniform float aberration_amount : hint_range(0.0, 10.0, 1.0) = float(0.0);
14-
uniform bool move_aberration = false;
15-
uniform float aberration_speed : hint_range(0.01, 10.0, 0.01) = float(1.0);
16+
uniform bool show_curvature = true;
17+
uniform float curvature_x_amount : hint_range(3.0, 15.0, 0.01) = float(6.0);
18+
uniform float curvature_y_amount : hint_range(3.0, 15.0, 0.01) = float(4.0);
19+
uniform vec4 corner_color : hint_color = vec4(0.0, 0.0, 0.0, 1.0);
20+
uniform bool show_vignette = true;
21+
uniform float vignette_opacity : hint_range(0.0, 1.0, 0.01) = 0.2;
22+
uniform bool show_horizontal_scan_lines = true;
23+
uniform float horizontal_scan_lines_amount : hint_range(0.0, 180.0) = 180.0;
24+
uniform float horizontal_scan_lines_opacity : hint_range(0.0, 1.0, 0.01) = 1.0;
25+
uniform bool show_vertical_scan_lines = false;
26+
uniform float vertical_scan_lines_amount : hint_range(0.0, 320.0) = 320.0;
27+
uniform float vertical_scan_lines_opacity : hint_range(0.0, 1.0, 0.01) = 1.0;
28+
uniform float boost : hint_range(1.0, 2.0, 0.01) = 1.2;
29+
uniform float aberration_amount : hint_range(0.0, 10.0, 0.01) = 0.0;
1630

17-
vec2 CRTCurveUV(vec2 uv) {
18-
if(show_curvature) {
31+
vec2 uv_curve(vec2 uv) {
32+
if (show_curvature) {
1933
uv = uv * 2.0 - 1.0;
20-
vec2 offset = abs(uv.yx) / vec2(6.0, 4.0);
34+
vec2 offset = abs(uv.yx) / vec2(curvature_x_amount, curvature_y_amount);
2135
uv = uv + uv * offset * offset;
2236
uv = uv * 0.5 + 0.5;
2337
}
38+
2439
return uv;
2540
}
2641

27-
void DrawVignette(inout vec3 color, vec2 uv) {
28-
if(show_vignette) {
42+
43+
void fragment() {
44+
vec2 uv = uv_curve(UV);
45+
vec2 screen_uv = uv_curve(SCREEN_UV);
46+
vec3 color = texture(SCREEN_TEXTURE, screen_uv).rgb;
47+
48+
if (aberration_amount > 0.0) {
49+
float adjusted_amount = aberration_amount / screen_size.x;
50+
color.r = texture(SCREEN_TEXTURE, vec2(screen_uv.x + adjusted_amount, screen_uv.y)).r;
51+
color.g = texture(SCREEN_TEXTURE, screen_uv).g;
52+
color.b = texture(SCREEN_TEXTURE, vec2(screen_uv.x - adjusted_amount, screen_uv.y)).b;
53+
}
54+
55+
if (show_vignette) {
2956
float vignette = uv.x * uv.y * (1.0 - uv.x) * (1.0 - uv.y);
3057
vignette = clamp(pow((screen_size.x / 4.0) * vignette, vignette_opacity), 0.0, 1.0);
3158
color *= vignette;
32-
} else {
33-
return;
3459
}
35-
}
36-
37-
void DrawScanline(inout vec3 color, vec2 uv, float time) {
38-
float scanline = clamp((scanlines_opacity - 0.05) + 0.05 * sin(3.1415926535 * (uv.y + 0.008 * time) * screen_size.y), 0.0, 1.0);
39-
float grille = (grille_opacity - 0.15) + 0.15 * clamp(1.5 * sin(3.1415926535 * uv.x * screen_size.x), 0.0, 1.0);
4060

41-
if (show_scanlines) {
42-
color *= scanline;
61+
if (show_horizontal_scan_lines) {
62+
float s = sin(screen_uv.y * horizontal_scan_lines_amount * PI * 2.0);
63+
s = (s * 0.5 + 0.5) * 0.9 + 0.1;
64+
vec4 scan_line = vec4(vec3(pow(s, horizontal_scan_lines_opacity)), 1.0);
65+
color *= scan_line.rgb;
4366
}
4467

45-
if (show_grille) {
46-
color *= grille;
68+
if (show_vertical_scan_lines) {
69+
float s = sin(screen_uv.x * vertical_scan_lines_amount * PI * 2.0);
70+
s = (s * 0.5 + 0.5) * 0.9 + 0.1;
71+
vec4 scan_line = vec4(vec3(pow(s, vertical_scan_lines_opacity)), 1.0);
72+
color *= scan_line.rgb;
4773
}
4874

49-
color *= boost;
50-
}
51-
52-
void fragment() {
53-
vec2 screen_crtUV = CRTCurveUV(SCREEN_UV);
54-
vec3 color = texture(SCREEN_TEXTURE, screen_crtUV).rgb;
55-
56-
if (aberration_amount > 0.0) {
57-
float adjusted_amount = aberration_amount / screen_size.x;
58-
59-
if (move_aberration == true) {
60-
adjusted_amount = (aberration_amount / screen_size.x) * cos((2.0 * 3.14159265359) * (TIME / aberration_speed));
61-
}
62-
63-
color.r = texture(SCREEN_TEXTURE, vec2(screen_crtUV.x + adjusted_amount, screen_crtUV.y)).r;
64-
color.g = texture(SCREEN_TEXTURE, screen_crtUV).g;
65-
color.b = texture(SCREEN_TEXTURE, vec2(screen_crtUV.x - adjusted_amount, screen_crtUV.y)).b;
75+
if (show_horizontal_scan_lines || show_vertical_scan_lines) {
76+
color *= boost;
6677
}
67-
68-
vec2 crtUV = CRTCurveUV(UV);
69-
if (crtUV.x < 0.0 || crtUV.x > 1.0 || crtUV.y < 0.0 || crtUV.y > 1.0) {
70-
color = vec3(0.0, 0.0, 0.0);
78+
79+
// Fill the blank space of the corners, left by the curvature, with black.
80+
if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
81+
color = corner_color.rgb;
7182
}
72-
73-
DrawVignette(color, crtUV);
74-
DrawScanline(color, crtUV, TIME * scanlines_speed);
75-
83+
7684
COLOR = vec4(color, 1.0);
77-
}
85+
}

‎default_env.tres

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,3 @@
55
[resource]
66
background_mode = 2
77
background_sky = SubResource( 1 )
8-

‎demo_scene.tscn

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
[ext_resource path="res://icon.png" type="Texture" id=1]
44
[ext_resource path="res://crt_material.tres" type="Material" id=2]
55

6-
[node name="CRTLayer" type="CanvasLayer"]
6+
[node name="crt_layer" type="CanvasLayer"]
77

88
[node name="background" type="ColorRect" parent="."]
99
anchor_right = 1.0
@@ -17,8 +17,10 @@ texture = ExtResource( 1 )
1717
position = Vector2( 246.99, 107.356 )
1818
texture = ExtResource( 1 )
1919

20-
[node name="CRTShader" type="ColorRect" parent="."]
20+
[node name="crt_shader" type="ColorRect" parent="."]
2121
material = ExtResource( 2 )
2222
anchor_right = 1.0
2323
anchor_bottom = 1.0
24-
24+
__meta__ = {
25+
"_edit_use_anchors_": false
26+
}

‎examples/crt-off.png

123 KB
Loading

‎examples/crt-on.png

1.14 MB
Loading

0 commit comments

Comments
 (0)