It is a screen-space shader; we can replace the background black with some other color to simulate the tint & theme to make our scene more immersive.
Shader breakdown:
- We pixelate the screen texture to make each pixel equal to a particular pixel size (dot size).
- We also create a single circular dot & multiply it with dot size to scale it. After scaling, we have a dot matrix.
- We multiply the screen texture color with dot matrix (a float variable), and wherever the value of dot matrix is 1.0, the screen texture is shown and on areas where the value is 0.0, black is shown.
- The reason to pixelate the screen was to keep only 1 pixel in 1 dot, otherwise, there could be more pixels in a dot.
Godot Shader Code
shader_type canvas_item;
uniform float size = 64.0;
uniform vec4 color : source_color;
uniform sampler2D screen_texture : hint_screen_texture;
// Pixelates UVs with rounding off for screen texture
vec2 pixelate_uv(vec2 uv, float pixel_size, vec2 aspect_ratio) {
return floor(uv * pixel_size * aspect_ratio) / (pixel_size * aspect_ratio);
}
// Generates a dot matrix effect based on UV coordinates, dot size, and aspect ratio
float create_dot_matrix(vec2 uv, float dot_size, vec2 aspect_ratio) {
float dot_matrix = length(fract(uv * dot_size * aspect_ratio) - vec2(0.5)) * 2.0; // Wraps UV coordinates, centers, forms a circle, and scales
dot_matrix = (1.0 - dot_matrix) * 10.0; // Invert and enhance for a defined border
dot_matrix = clamp(dot_matrix, 0.0, 1.0); // Ensure value stays within [0, 1]
return dot_matrix;
}
void fragment() {
vec2 aspect_ratio = vec2(1.0, SCREEN_PIXEL_SIZE.x / SCREEN_PIXEL_SIZE.y); // Maintain 1:1 aspect ratio for dots
vec2 pixelated_uv = pixelate_uv(SCREEN_UV, size, aspect_ratio);
float dot_matrix = create_dot_matrix(SCREEN_UV, size, aspect_ratio);
COLOR = mix(color, texture(screen_texture, pixelated_uv), dot_matrix);
}
More Links
- https://godotshaders.com/shader/led-dot-matrix-shader/ I studied this shader.