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

Simple Energy Shield

Higher Detail Outline Shader

Related shaders

2D Outline and Rainbow outline 2 in 1

Pixel-burn Shader

Smooth 3D pixel filtering

guest

4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Master35
Master35
3 months ago

thanks

Tanders
Tanders
2 months ago

Looks really nice, but I can’t seem to get it working. On a simple cube there is gaps between the corners, any idea why this may be? I’m using Godot v4.0.beta1

ApeSander
ApeSander
22 days ago
Reply to  Tanders

I have the same problem

user123
user123
3 days ago
Reply to  ApeSander

It only works on mesh with smoothed normals.

Last edited 3 days ago by user123