SDF scalable textures
Shader designed to render clean, anti-aliased outlines and lines using Signed Distance Field textures. It utilizes screen-space derivatives to automatically calculate the perfect blur amount. This ensures that the generated lines remain perfectly smooth, crisp, and free of jagged edges (aliasing) regardless of the camera zoom, texture scaling, or screen resolution.
Perfect for high scalable maps. (4096×4096 SDF map stretches to 32784×32784)
Apply on texture rect and scale as much as needed. (Convert texture to sdf map first.)
Shader code
shader_type canvas_item;
uniform float line_threshold : hint_range(0.0, 1.0) = 0.5;
uniform vec4 line_color : source_color = vec4(0.0, 0.0, 0.0, 1.0);
void fragment() {
float distance_val = texture(TEXTURE, UV).r;
float delta = length(vec2(dFdx(distance_val), dFdy(distance_val)));
float softness = delta * 1.5;
float alpha = smoothstep(line_threshold - softness, line_threshold + softness, distance_val);
COLOR = vec4(line_color.rgb, (1.0 - alpha) * line_color.a);
}Live Preview
