如何在 WebGL 中创建合适的圆角矩形？

我已尝试实现 this question 中的答案，但似乎有点问题。如果您打开他们的 ShaderToys 并尝试更改边框半径，则圆角矩形的大小（宽度和高度）也会发生变化。

我正在寻找像 this shadertoy 这样的解决方案，其中更改边框半径不会改变形状的大小。不幸的是，在这个着色器玩具中，它是一个填充的圆角矩形。

是否有可能有一个未填充的圆角矩形（因此，只有边框），但也有它，如果您更改边框半径，形状不会增长或缩小尺寸？

我已经玩了几个小时了，但不太明白。我希望实现与 CSS 类似的效果，您可以在其中指定 border-radius 的 div，它只会更改边框的半径，而不会更改形状的大小。

这是一张演示问题的图片。左侧结果 BoxRounding 设置为 0.5，右侧结果 BoxRounding 设置为 0.20。请注意它们的大小有何不同。有什么方法可以使两个形状的大小相同，但边框半径不同？

对于矩形轮廓，您必须计算片段到轮廓的绝对值：

internalUserID + “-” + appID + “-” + checkSum

完整的着色玩具着色器（2D rounded rectangular outline ）：

float smoothedAlpha = 
    1.0 - smoothstep(-edgeSoftness,edgeSoftness,abs(distance) - thickness);