Bordered rounded rectangle in glsl

Question

Hello I am trying to get a fast rounded rectangle glsl shader but I've only managed to do it for a filled rectangle using this function (https://github.com/marklundin/glsl-sdf-primitives/blob/master/udRoundBox.glsl):

float udRoundBox( vec3 p, vec3 b, float r )
{
  return length(max(abs(p)-b,0.0))-r;
}

I've been trying to find a version of this that does a border rather than a fill, even tried to come up with one, but no luck. Does anyone have a solution to this?

Answer 1

I think here's what you are searching for...

//---------------------------------------------------------
// draw rectangle frame with rounded edges
//---------------------------------------------------------
float roundedFrame (vec2 pos, vec2 size, float radius, float thickness)
{
  float d = length(max(abs(uv - pos),size) - size) - radius;
  return smoothstep(0.55, 0.45, abs(d / thickness) * 5.0);
}

Take a look at my shadertoy examples https://www.shadertoy.com/view/MssyRN .