Asking for overlapping Semi-transparent objects solutions

I got these objects with two sprites, a normal one and another one with a shader that let me do this silhouette effect:

When ever two of this overlapp, tho, they do this:

…and I saw some solutions, like adding this sprites in a same canvas group and changing the oppacity there, but I don’t really know how to do this, especially if the objects come from diferents scenes. I also thought about modifying the shader, but I don’t have enough expirience.

Heres the shader, got it from a video tutorial

shader_type canvas_item;

uniform sampler2D screen_texture : hint_screen_texture, filter_nearest;

uniform vec4 silhouette_color : source_color = vec4(0.0, 0.0, 0.0, 0.5); // Default: Semi-transparent black

uniform float color_tolerance : hint_range(0.0, 0.1) = 0.01;

void fragment() {

	vec4 sprite_color = texture(TEXTURE, UV);


	if (sprite_color.a <= 0.01) {
		discard;
	}


	vec4 screen_color = texture(screen_texture, SCREEN_UV);


	bool colors_match = all(lessThan(abs(sprite_color - screen_color), vec4(color_tolerance)));


	if (colors_match) {

		COLOR = sprite_color;
	} else {

		COLOR = vec4(silhouette_color.rgb, silhouette_color.a * sprite_color.a);
	}
}

Screen textured is captured only once per frame when the first shader using it is rendered. If you need it captured multiple times use BackBufferCopy nodes.

2 Likes