Skip to content

Commit

Permalink
Bumped to v2.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
hiulit committed Oct 19, 2020
1 parent dd2d1fa commit e2e91c3
Show file tree
Hide file tree
Showing 7 changed files with 126 additions and 101 deletions.
77 changes: 46 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,101 +3,115 @@
A 2D shader for Godot 3 simulating a CRT.

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

## Usage

* Create a `CanvasLayer`.
* Add a `ColorRect` as a child node of the `CanvasLayer`.
* In the `ColorRect` properties:
* Go to the **Material** section.
* Click on the `[empty]` **Material** and load `crt_material.tres`.
* Click on the `[empty]` dropdown from **Material** and load `crt_material.tres`.

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.
### Note
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.

## Shader Parameters

### Boost
### Screen size

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |
| `screen_size` | `vec2` | `vec2(320.0, 180.0)` | The size of your project's `display/window/size`. |

### Grille opacity
### Show curvature

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |
| `show_curvature` | `bool` | `true` | Enables/disables the curvature effect. |

### Scanlines opacity
Works best in `window/stretch/mode="2d"`.

### Curvature X amount

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |
| `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. |

### Vignette opacity
### Curvature Y amount

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `vignette_opacity` | `float` | `0.2` | Controls the opacity of the vignette. Range from `0.1` to `0.5` with `0.01` steps. |
| `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. |

### Scanlines speed
### Corner color
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |

### Show vignette

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

### Show grille
### Vignette opacity

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

### Show scanlines
### Show horizontal scan lines

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `show_scanlines` | `bool` | `true` | Enable/disable the scanlines. |
| `show_horizontal_scan_lines` | `bool` | `true` | Enables/disables the horizontal scan lines. |

### Show vignette
### Horizontal scan lines amount

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

### Show curvature
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.

### Horizontal scan lines opacity

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `show_curvature` | `bool` | `true` | Enables/disables the curvature. |
| `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. |

Works best in `window/stretch/mode="2d"`.
### Show vertical scan lines

### Screen size
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `show_vertical_scan_lines` | `bool` | `true` | Enables/disables the vertical scan lines. |

### Vertical scan lines amount

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |
| `vertical_scan_lines_amount` | `float` | `320.0` | Controls how many vertical scan lines appear. |

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.
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.

### Aberration amount
### Vertical scan lines opacity

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `aberration_amount` | `float` | `0.0` | Controls the amount of chromatic aberration. Range from `0.0` to `10.0` with `1.0` steps. |
| `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. |

### Move aberration
### Boost

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `move_aberration` | `bool` | `false` | Enables/disables the chromatic aberration movement. |
| `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. |

### Aberration speed
### Aberration amount

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |
| `aberration_amount` | `float` | `0.0` | Controls the amount of chromatic aberration. Range from `0.0` to `10.0` with `1.0` steps. |

## Changelog

Expand All @@ -114,6 +128,7 @@ Thanks to:
* **knarkowicz** - For the orginal shader code, taken from https://www.shadertoy.com/view/XtlSD7.
* [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).
* [uheartbeast](https://twitter.com/uheartbeast) - For the amazing [chromatic aberration shader video tutorial](https://www.youtube.com/watch?v=-PJOHAsBcoI).
* [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.

## License

Expand Down
25 changes: 13 additions & 12 deletions crt_material.tres
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,18 @@

[resource]
shader = ExtResource( 1 )
shader_param/boost = 1.2
shader_param/grille_opacity = 0.85
shader_param/scanlines_opacity = 0.95
shader_param/vignette_opacity = 0.2
shader_param/scanlines_speed = 1.0
shader_param/show_grille = true
shader_param/show_scanlines = true
shader_param/show_vignette = true
shader_param/show_curvature = true
shader_param/screen_size = Vector2( 320, 180 )
shader_param/show_curvature = true
shader_param/curvature_x_amount = 6.0
shader_param/curvature_y_amount = 4.0
shader_param/corner_color = Color( 0, 0, 0, 1 )
shader_param/show_vignette = true
shader_param/vignette_opacity = 0.2
shader_param/show_horizontal_scan_lines = true
shader_param/horizontal_scan_lines_amount = 180.0
shader_param/horizontal_scan_lines_opacity = 1.0
shader_param/show_vertical_scan_lines = false
shader_param/vertical_scan_lines_amount = 320.0
shader_param/vertical_scan_lines_opacity = 1.0
shader_param/boost = 1.2
shader_param/aberration_amount = 0.0
shader_param/move_aberration = false
shader_param/aberration_speed = 1.0

116 changes: 62 additions & 54 deletions crt_shader.shader
Original file line number Diff line number Diff line change
@@ -1,77 +1,85 @@
/*
Godot 3 2D CRT Shader.
A 2D shader for Godot 3 simulating a CRT..
Author: hiulit
Repository: https://github.com/hiulit/Godot-3-2D-CRT-Shader
Issues: https://github.com/hiulit/Godot-3-2D-CRT-Shader/issues
License: MIT https://github.com/hiulit/Godot-3-2D-CRT-Shader/blob/master/LICENSE
*/

shader_type canvas_item;

uniform float boost : hint_range(1.0, 2.0, 0.01) = float(1.2);
uniform float grille_opacity : hint_range(0.0, 1.0, 0.01) = float(0.85);
uniform float scanlines_opacity : hint_range(0.0, 1.0, 0.01) = float(0.95);
uniform float vignette_opacity : hint_range(0.1, 0.5, 0.01) = float(0.2);
uniform float scanlines_speed : hint_range(0.0, 1.0, 0.01) = float(1.0);
uniform bool show_grille = true;
uniform bool show_scanlines = true;
uniform bool show_vignette = true;
uniform bool show_curvature = true; // Curvature works best on stretch mode 2d.
const float PI = 3.14159265359;

uniform vec2 screen_size = vec2(320.0, 180.0);
uniform float aberration_amount : hint_range(0.0, 10.0, 1.0) = float(0.0);
uniform bool move_aberration = false;
uniform float aberration_speed : hint_range(0.01, 10.0, 0.01) = float(1.0);
uniform bool show_curvature = true;
uniform float curvature_x_amount : hint_range(3.0, 15.0, 0.01) = float(6.0);
uniform float curvature_y_amount : hint_range(3.0, 15.0, 0.01) = float(4.0);
uniform vec4 corner_color : hint_color = vec4(0.0, 0.0, 0.0, 1.0);
uniform bool show_vignette = true;
uniform float vignette_opacity : hint_range(0.0, 1.0, 0.01) = 0.2;
uniform bool show_horizontal_scan_lines = true;
uniform float horizontal_scan_lines_amount : hint_range(0.0, 180.0) = 180.0;
uniform float horizontal_scan_lines_opacity : hint_range(0.0, 1.0, 0.01) = 1.0;
uniform bool show_vertical_scan_lines = false;
uniform float vertical_scan_lines_amount : hint_range(0.0, 320.0) = 320.0;
uniform float vertical_scan_lines_opacity : hint_range(0.0, 1.0, 0.01) = 1.0;
uniform float boost : hint_range(1.0, 2.0, 0.01) = 1.2;
uniform float aberration_amount : hint_range(0.0, 10.0, 0.01) = 0.0;

vec2 CRTCurveUV(vec2 uv) {
if(show_curvature) {
vec2 uv_curve(vec2 uv) {
if (show_curvature) {
uv = uv * 2.0 - 1.0;
vec2 offset = abs(uv.yx) / vec2(6.0, 4.0);
vec2 offset = abs(uv.yx) / vec2(curvature_x_amount, curvature_y_amount);
uv = uv + uv * offset * offset;
uv = uv * 0.5 + 0.5;
}

return uv;
}

void DrawVignette(inout vec3 color, vec2 uv) {
if(show_vignette) {

void fragment() {
vec2 uv = uv_curve(UV);
vec2 screen_uv = uv_curve(SCREEN_UV);
vec3 color = texture(SCREEN_TEXTURE, screen_uv).rgb;

if (aberration_amount > 0.0) {
float adjusted_amount = aberration_amount / screen_size.x;
color.r = texture(SCREEN_TEXTURE, vec2(screen_uv.x + adjusted_amount, screen_uv.y)).r;
color.g = texture(SCREEN_TEXTURE, screen_uv).g;
color.b = texture(SCREEN_TEXTURE, vec2(screen_uv.x - adjusted_amount, screen_uv.y)).b;
}

if (show_vignette) {
float vignette = uv.x * uv.y * (1.0 - uv.x) * (1.0 - uv.y);
vignette = clamp(pow((screen_size.x / 4.0) * vignette, vignette_opacity), 0.0, 1.0);
color *= vignette;
} else {
return;
}
}

void DrawScanline(inout vec3 color, vec2 uv, float time) {
float scanline = clamp((scanlines_opacity - 0.05) + 0.05 * sin(3.1415926535 * (uv.y + 0.008 * time) * screen_size.y), 0.0, 1.0);
float grille = (grille_opacity - 0.15) + 0.15 * clamp(1.5 * sin(3.1415926535 * uv.x * screen_size.x), 0.0, 1.0);

if (show_scanlines) {
color *= scanline;
if (show_horizontal_scan_lines) {
float s = sin(screen_uv.y * horizontal_scan_lines_amount * PI * 2.0);
s = (s * 0.5 + 0.5) * 0.9 + 0.1;
vec4 scan_line = vec4(vec3(pow(s, horizontal_scan_lines_opacity)), 1.0);
color *= scan_line.rgb;
}

if (show_grille) {
color *= grille;
if (show_vertical_scan_lines) {
float s = sin(screen_uv.x * vertical_scan_lines_amount * PI * 2.0);
s = (s * 0.5 + 0.5) * 0.9 + 0.1;
vec4 scan_line = vec4(vec3(pow(s, vertical_scan_lines_opacity)), 1.0);
color *= scan_line.rgb;
}

color *= boost;
}

void fragment() {
vec2 screen_crtUV = CRTCurveUV(SCREEN_UV);
vec3 color = texture(SCREEN_TEXTURE, screen_crtUV).rgb;

if (aberration_amount > 0.0) {
float adjusted_amount = aberration_amount / screen_size.x;

if (move_aberration == true) {
adjusted_amount = (aberration_amount / screen_size.x) * cos((2.0 * 3.14159265359) * (TIME / aberration_speed));
}

color.r = texture(SCREEN_TEXTURE, vec2(screen_crtUV.x + adjusted_amount, screen_crtUV.y)).r;
color.g = texture(SCREEN_TEXTURE, screen_crtUV).g;
color.b = texture(SCREEN_TEXTURE, vec2(screen_crtUV.x - adjusted_amount, screen_crtUV.y)).b;
if (show_horizontal_scan_lines || show_vertical_scan_lines) {
color *= boost;
}
vec2 crtUV = CRTCurveUV(UV);
if (crtUV.x < 0.0 || crtUV.x > 1.0 || crtUV.y < 0.0 || crtUV.y > 1.0) {
color = vec3(0.0, 0.0, 0.0);

// Fill the blank space of the corners, left by the curvature, with black.
if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
color = corner_color.rgb;
}

DrawVignette(color, crtUV);
DrawScanline(color, crtUV, TIME * scanlines_speed);


COLOR = vec4(color, 1.0);
}
}
1 change: 0 additions & 1 deletion default_env.tres
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,3 @@
[resource]
background_mode = 2
background_sky = SubResource( 1 )

8 changes: 5 additions & 3 deletions demo_scene.tscn
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
[ext_resource path="res://icon.png" type="Texture" id=1]
[ext_resource path="res://crt_material.tres" type="Material" id=2]

[node name="CRTLayer" type="CanvasLayer"]
[node name="crt_layer" type="CanvasLayer"]

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

[node name="CRTShader" type="ColorRect" parent="."]
[node name="crt_shader" type="ColorRect" parent="."]
material = ExtResource( 2 )
anchor_right = 1.0
anchor_bottom = 1.0

__meta__ = {
"_edit_use_anchors_": false
}
Binary file modified examples/crt-off.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/crt-on.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e2e91c3

Please sign in to comment.