Diagonal Mask / Border / Edge

Allows you to modify a sprite’s edges to achieve effects ranging from from soft diagonal edges to a full blown diamond.

Modified from https://godotshaders.com/shader/hex-mask-border-outline-shader/

Shader code
// 2D Diagonal Borders Masking Shader
// Modified from https://godotshaders.com/shader/hex-mask-border-outline-shader/
shader_type canvas_item;
const float M  = -1.0; // Angle of diagonal line
uniform float effect : hint_range( 0.0, 0.5 ) = 0.5; // how much 

void fragment() {
	// Pull in the texture
	COLOR = texture( TEXTURE, UV );
	// Need a copy for original alpha values
	vec4 color = texture( TEXTURE, UV );
	// Set everything to transparent
	COLOR.a = color.a * 0.0;
	// Map current point to first quadrant
	float x0 = min(UV.x, 1.0 - UV.x);
	float y0 = min(UV.y, 1.0 - UV.y);
	// Compute diagonal line through UV.x,UV.y depending on the effect
	float m = M;
	float m0 = -1.0 / m;
	float b0 = effect + (y0 - m0 * x0);
	// Find x,y = intersection of edge through UV.x,UV.y
	float x = ( 0.5 - b0 ) / ( m0 - m );
	float y = m0 * x + b0;
	// Are we inside the diagonal box?
	if ( x0 >= x && y0 >= 0.0 ) {
		float d = distance( vec2( x, y ), vec2( x0, y0 ) );
		COLOR.a = color.a * 1.0;
	}
}
Tags
border, Diagonal, edge, mask, Rounded
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

Hex Mask/Border/Outline

Animated TV-Static Border Shader

Transparent noise border

Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
lgmeister
lgmeister
1 year ago

Total shader noob here. How do I change it so it’s not diagonal. I’m trying to make a shader mask the top or bottom of a texture.

mxk
mxk
11 months ago

Thank you so much for sharing this. I used this as a basis for learning shader programming, and I rewrote it several times until I arrived at a much simpler version of it that I think is a bit easier to understand and modify.

I hope it can be useful for others to learn too: https://gitlab.com/-/snippets/2534852

You can animate the diamond by attaching the zoom property to an AnimationPlayer. Or do it in the shader itself 😉