Pixel Perfect outline shader

Uploading this because couldn’t find one on this site.

Same outline size from any distance, perfect for interactable objects.
Mode for Godot 4.

To use in Godot 3 replace “source_color” with “hint_color”

Shader code
shader_type spatial;
render_mode cull_front, unshaded;

uniform vec4 outline_color : source_color;
uniform float outline_width = 1.0;

void vertex() {
	vec4 clip_position = PROJECTION_MATRIX * (MODELVIEW_MATRIX * vec4(VERTEX, 1.0));
	vec3 clip_normal = mat3(PROJECTION_MATRIX) * (mat3(MODELVIEW_MATRIX) * NORMAL);
	
	vec2 offset = normalize(clip_normal.xy) / VIEWPORT_SIZE * clip_position.w * outline_width * 2.0;
	
	clip_position.xy += offset;
	
	POSITION = clip_position;
}

void fragment() {
	ALBEDO = outline_color.rgb;
	if (outline_color.a < 1.0) {
		ALPHA = outline_color.a;
	}
}
Tags
outline, pixel perfect outline
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.

More from axilirate

Higher Detail Outline Shader

Simple Energy Shield

Related shaders

2D Outline and Rainbow outline 2 in 1

Pixel-burn Shader

Smooth 3D pixel filtering

guest

0 Comments
Inline Feedbacks
View all comments