GLSL Shader that renders a border based on UV coordinates

border-shader.frag

uniform vec3 color;
uniform vec3 borderColor;
uniform float borderWidth;
varying vec2 vUv;

// Technique based on Inigo Quilez's 'Analytic checkers pattern filtering'
// https://iquilezles.org/articles/checkerfiltering/
float border(in vec2 uv, in vec2 ddx, in vec2 ddy) {
	// filter kernel
	vec2 w = max(abs(ddx), abs(ddy)) + 0.001;
	// map [0.0, 1.0] to [0.0, 0.5]
	vec2 c = abs(uv - 0.5);
	// determine fraction
	vec2 i = ((c + w) - (0.5 - borderWidth)) / w;
	i = clamp(i, vec2(0.0), vec2(1.0));
	// border pattern
	return max(i.x, i.y);
}

void main() {
	vec2 ddx = dFdx(vUv);
	vec2 ddy = dFdy(vUv);
	float factor = border(vUv, ddx, ddy);

	vec3 finalColor = mix(color, borderColor, factor);
	gl_FragColor.rgba = vec4(finalColor, 1.);
}