Selection Blur

Hi, this is a simple shader code that I needed for “blur” when selecting a card in my card game, hope other people also find it useful.

 

I found out using my algorithm can be really expensive on mobile and low-end devices, so I put a parameter to switch between “complex_shader” or just simple shader (where it’s basically just mimicing the blur effect, not real blur effect).

Set complex_blur parameter to true to have real blur; otherwise you can set simple_blur_color to mimic blur effect (better performance).

When having complex blur, you can adjust blur_amount or kernel_size  to your liking (do note that increasing too much kernel_size might be too heaby on low-end devices!).

I hope you guys find it useful! If you have a suggestion for improving this shader or make it better in performance, please do let me know in the comments!

Shader code
shader_type canvas_item;
uniform float blur_amount : hint_range(0.0, 5.0) = 3.0;
uniform float kernel_size : hint_range(0.0, 25.0, 0.1) = 10.0f;
uniform bool is_selected = false;

uniform vec4 simple_blur_color : source_color = vec4(1.0, 1.0, 1.0, 0.2);
// whether to use complex blur or not. complex blur usually has more
// cost, but it's real time and is kinda good ig.
uniform bool complex_blur = false;

void fragment() {
	vec4 color = texture(TEXTURE, UV);
	if (is_selected) {
		if (complex_blur) {
			vec2 texture_size = vec2(textureSize(TEXTURE, 0));
			vec2 pixel_size = 1.0 / texture_size;
			vec4 blur_color = vec4(0.0);
			
			for (float x = -kernel_size; x <= kernel_size; x++) {
				for (float y = -kernel_size; y <= kernel_size; y++) {
					vec2 offset = vec2(x, y) * pixel_size * blur_amount;
					blur_color += texture(TEXTURE, UV + offset);
				}
			}
			
			blur_color /= (kernel_size * 2.0 + 1.0) * (kernel_size * 2.0 + 1.0);
			COLOR = mix(color, blur_color, 0.5);
		} else {
			// we will do simple blur
			COLOR = mix(color, simple_blur_color, simple_blur_color.a);
		}
    }
}
Tags
blur, selection, selection_blur
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

Related shaders

Animated selection rectangle (Marching ants)

Blur Vignette (Post Processing / ColorRect) [Godot 4.2.1]

Blur with Clearing Over a Node

Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments