如何在glsl中绘制带有边框的平滑圆？

问题描述

我想在GLSL中绘制一个平滑的圆圈，但边框具有可变宽度，并使用单独的颜色。圆圈的内部可能是透明的。

我原来的非平滑着色器：

print(gen_text.collocation_list())

这有效，但不流畅。我可以画出光滑的圆圈：

#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;
}

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

解决方法

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

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

如果要填充圆，则需要2个渐变。 1用于表示内圆和边界之间的过渡，第二表示用于轮廓上的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);