2D Drop Shadow using alpha

This is a 2D drop shadow designed for canvas items.  It uses the alpha of the input texture to direct the shadow.  The direction of the shadow is a parameter and can be changed by the application

For an example you can look at the example/path2dslider/scenes/arc.tscn in the godot-path2dslider plugin repository on GitHub (https://github.com/markeel/godot-path2dslider)

In the cover image the two markers (1 and 5) are using the same texture, but the application is adjusting the “offset” shader parameter to be a consistent global direction (independent of the individual texture rotation), allowing the control to give the illusion of a light source above and to the right.

Shader code
shader_type canvas_item;

uniform sampler2D color : source_color;
uniform vec2 offset;
uniform float shadow_alpha;

void fragment() {
	vec4 c = texture(color, UV);
	if (c.a < 1.0) {
		vec4 cr = texture(color, UV - offset);
		if (cr.a > 0.0) {
			c.rgb = clamp(c.rgb * c.a + vec3(0.0, 0.0, 0.0) * cr.a * shadow_alpha * (1.0 - c.a), vec3(0.0, 0.0, 0.0), vec3(1.0, 1.0, 1.0));
			c.a = clamp(c.a + cr.a * shadow_alpha * (1.0 - c.a), 0.0, 1.0);
	COLOR = c;
drop shadow
The shader code and all code snippets in this post are under MIT license and can be used freely. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

Related shaders

2D Drop Shadow

Fog of war with alpha cut off as white color

Texture population using Texture

Notify of

Inline Feedbacks
View all comments