GLSL中的带边框圆角矩形 [英] Bordered rounded rectangle in glsl

问题描述

您好，我正在尝试获取快速圆角矩形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;
}

我一直在努力寻找一种可以做边框而不是填充的版本，甚至还试着想出一个，但是没有成功。有人有解决这个问题的办法吗？

推荐答案

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

如下所示：

// 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示例演示了这一点：

这篇关于GLSL中的带边框圆角矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！