Efficient 2D Pixel Outlines

2D pixel outline shader without “if” statements, since branching code is wildly inefficient on GPUs (as I understand it)

Adjustable thickness, supports transparent outline colors

Use the “type” uniform to switch between outline types — 1 for 4-way/”round”, 2 for 8-way/”square” (default), 0 to disable

update, may 25 2025: fixed the mix() factor reaching negative values and counter-blending, expanded “type” to include 0 for easy toggling at runtime

update, jun 13 2025: simplified mix() factor math

https://ko-fi.com/laffcat

Shader code

shader_type canvas_item;

uniform vec4 clr : source_color = vec4(0.0, 0.0, 0.0, 1.0);
uniform int type : hint_range(0, 2) = 2;
uniform float thickness = 1.0;

const vec2[8] DIRECTIONS = {
	vec2(1.0, 0.0),
	vec2(0.0, 1.0),
	vec2(-1.0, 0.0),
	vec2(0.0, -1.0),
	vec2(1.0, 1.0),
	vec2(-1.0, 1.0),
	vec2(-1.0, -1.0),
	vec2(1.0, -1.0)
};

float gtz(float input) { return max(0, sign(input)); }
// returns 1 if input > 0, else 0

float check(sampler2D tex, vec2 from, vec2 size) {
	float result = 0.0;
	for (int i = 0; i < 4 * type; i++) {
		result += texture(tex, from + DIRECTIONS[i] * size * thickness).a;
	}
	return gtz(result);
}

void fragment() {
	COLOR = mix( COLOR, clr, check(TEXTURE, UV, TEXTURE_PIXEL_SIZE) * (1.0 - gtz(COLOR.a)) );
}

Tags