Blur shader color goes into entire image

Help
,
1

Godot Version

4.2

Question

hello, i have this blur shader,. Ive modified it with a color change,the problem here is that the color is applied to the entire image rect, alpha spaces and everything.
Is there a way to have it only on the texture like the blur is doing ?

shader_type canvas_item;
render_mode blend_mix;

// Radius that the shader was designed for.
const float DEFAULT_RADIUS = 10.000000;
uniform vec4 color_over : source_color;
uniform float mix_amount : hint_range(0.0, 1.0);

// Unit vector: (1, 0) or (0, 1)
uniform vec2 step;
// Desired blur radius.
uniform float radius = 10.000000;

void fragment() {
	vec2 s = radius / DEFAULT_RADIUS * step / vec2(textureSize(TEXTURE, 0));
	COLOR.rgb =
		0.011194727 * texture(TEXTURE, UV - 10.000000000 * s).rgb +
		0.039368696 * texture(TEXTURE, UV - 8.415809477 * s).rgb +
		0.071308558 * texture(TEXTURE, UV - 6.435363708 * s).rgb +
		0.110237219 * texture(TEXTURE, UV - 4.455121108 * s).rgb +
		0.145451038 * texture(TEXTURE, UV - 2.475020813 * s).rgb +
		0.163798995 * texture(TEXTURE, UV - 0.495000167 * s).rgb +
		0.157439298 * texture(TEXTURE, UV + 1.485004498 * s).rgb +
		0.129158204 * texture(TEXTURE, UV + 3.465057055 * s).rgb +
		0.090434685 * texture(TEXTURE, UV + 5.445220765 * s).rgb +
		0.054043977 * texture(TEXTURE, UV + 7.425557483 * s).rgb +
		0.027564604 * texture(TEXTURE, UV + 9.406126897 * s).rgb;
	
	//COLOR.a = 1.0;
	COLOR = mix( COLOR, color_over, mix_amount );
}
2

The easiest way is probably to multiply mix_amount at the end of the shader by COLOR.a, so that transparent pixels use the original (unblurred) color exclusively. Translucent areas will be partially blurred.

3

Ive tried to use it this way

COLOR.a = mix_amount( COLOR.a, color_over.rgb, mix_amount );

mix mount trows an error:

res://shaders/gaussianBlur.gdshader:33 - No matching function found for: ‘mix_amount’.

4

I meant replacing this:

COLOR = mix( COLOR, color_over, mix_amount );

With this:

COLOR = mix( COLOR, color_over, mix_amount * COLOR.a );
5

thanks, it worked… The color is on the image instead of the entire rect

Iam still facing a problem however not related with the post, but whenever i try to use a blur shader on a tileMap, i think it apllies to each square individually…

step x and y zero ( working )

blur_5
blur_51144×590 71.2 KB

step x 5, step y 2 ( the squares start showing )

blur_6
blur_61126×546 137 KB

Is the same thing possible to do with the blur ? The color seems to blend with the entire image, the blur starts to seperate the tiles when i increase steps x, y, and amount ?

6

Shaders are applied to individual canvas items, and TileMap draws tiles individually.

To apply the shader to the entire TileMap node at once, make the TileMap node a child of a CanvasGroup node and apply the shader to the CanvasGroup node instead of the TileMap node. Beware, as this will have a significant performance impact.

7

yeah, ive already tried canvas group and it worked, but i ended up using a colorRect node instead with a screen blur on top of the layers i want to blur… So far the performance seem to be good…
but the color blend should help me, iam not very good with combining diferent colors together, this should help me with blending the backgrounds with each other…
( iam aware of the infamous blurs, and how much they overHeat the GPUs iam just running some tests )