glsl中的带边框的圆角矩形

Question

您好，我正在尝试获取快速的圆角矩形glsl着色器，但是我仅使用此功能设法完成了对填充矩形的操作（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;
}

我一直在尝试找到一个带有边框而不是填充的版本，甚至试图提出一个但没有运气的版本。有人对此有解决方案吗？

Answer 1

我想这就是您要寻找的...

//---------------------------------------------------------
// 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);
}

看看我的shadertoy示例https://www.shadertoy.com/view/MssyRN 。

Answer 2

由于您使用的是有符号距离函数，因此最简单的方法可能是使用减法运算符从初始圆角框中减去较小的圆角框。

它看起来像这样：

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

// substracts shape d1 from shape d2
float opS( float d1, float d2 )
{
    return max(-d1,d2);
}

// to get the border of a udRoundBox, simply substract a smaller udRoundBox !
float udRoundBoxBorder( vec3 p, vec3 b, float r, float borderFactor )
{
  return opS(udRoundBox(p, b*borderFactor, r), udRoundBox(p, b, r));
}

borderFactor需要是 中的一个值[0:1]，它越大，边框越小。

这是一个ShaderToy示例，演示了这一点：