如何在glsl中绘制一个带边框的平滑圆？答案

【问题标题】：How to draw a smooth circle with a border in glsl?如何在glsl中绘制一个带边框的平滑圆？
【发布时间】：2020-10-02 20:55:53
【问题描述】：

我想在 GLSL 中绘制一个平滑的圆形，但其边框宽度可变，颜色不同。圆的内部可能是透明的。

我原来的非平滑着色器：

#version 330

layout(location=0) out vec4 frag_colour;

in vec4 color;

uniform float radius;
uniform vec2 position;
uniform vec4 borderColor;
uniform float borderThickness;

void main()
{
    float distanceX = abs(gl_FragCoord.x - position.x);
    float distanceY = abs(gl_FragCoord.y - position.y);

    if(sqrt(distanceX * distanceX + distanceY * distanceY) > radius)
        discard;
    else if(sqrt(distanceX * distanceX + distanceY * distanceY) <= radius &&
            sqrt(distanceX * distanceX + distanceY * distanceY) >= radius-borderThickness)
        frag_colour = borderColor;
    else
        frag_colour = color;
}

这可行，但并不顺利。我可以画出光滑的圆圈：

#version 330

layout(location=0) out vec4 frag_colour;

in vec4 color;

uniform float radius;
uniform vec2 position;
uniform vec4 borderColor;
uniform float borderThickness;

void main()
{
    vec2 uv = gl_FragCoord.xy - position;

    float d = sqrt(dot(uv,uv));

    float t = 1.0 - smoothstep(radius-borderThickness,radius, d);

    frag_colour = vec4(color.rgb,color.a*t);
}

但我不知道如何在上面添加我的边框。

【问题讨论】：

不平滑，因为没有抗锯齿

标签： glsl shader fragment-shader blending

【解决方案1】：

您必须计算半径和距离之间差异的绝对值，并在 0.0 和 borderThickness 之间进行插值：

float t = 1.0 - smoothstep(0.0, borderThickness, abs(radius-d));

如果要填充圆圈，则需要 2 个渐变。 1 用于内圈和边框之间的过渡，第 2 用于轮廓上的 Alpha 通道。 mix前者设置颜色，后者设置Alpha通道：

float t1 = 1.0 - smoothstep(radius-borderThickness, radius, d);
float t2 = 1.0 - smoothstep(radius, radius+borderThickness, d);
frag_colour = vec4(mix(color.rgb, baseColor.rgb, t1), t2);

【讨论】：