片段着色器-绘制曲线

Question

如何使用片段着色器绘制一条线或一条曲线？

我有一个程序，根据用户指定的一组顶点计算贝塞尔曲线。在早期，我非常简单，只需在应用程序端处理每个顶点，就可以根据三次贝塞尔曲线方程生成一组插值点：

... 然后将所有处理过的顶点存储到GL_VERTEX_数组中，以便使用glDrawArrays（GL_LINE_STRIP，0，myArraySize）绘制。虽然解决方案很简单，但此实现的时间复杂度为O（n^2）。问题出现在我开始增加步数的地方，比如循环的每次迭代都将t增加0.01，再加上用户生成他们想要的任意多个顶点。

于是我开始研究着色器，尤其是片段着色器。据我所知，我们的片段着色器程序为GPU处理的当前片段指定颜色。我还没有认真研究着色器编程，但我目前的行着色器实现如下：

#version 120

uniform vec2 resolution;
uniform vec2 ptA;
uniform vec2 ptB;
uniform vec2 ptC;
uniform vec2 ptD;
uniform float stepTotal;

void main()
{
    vec2 uv = gl_FragCoord.xy / resolution.xy;
    vec2 curvePts[int(stepTotal)];

    float t = stepTotal;

    for(float i = 0.; i < 1.0; i += 1./t)
    {
        # Courtesy to: https://yalantis.com/blog/how-we-created-visualization-for-horizon-our-open-source-library-for-sound-visualization/
        vec2 q0 = mix(ptA, ptB, i);
        vec2 q1 = mix(ptB, ptC, i);
        vec2 q2 = mix(ptC, ptD, i);

        vec2 r0 = mix(q0, q1, i);
        vec2 r1 = mix(q1, q2, i);

        vec2 p_int = mix(r0, r1, i);
        curvePts[int(i) * int(stepTotal)] = p_int;
    }

    // TO DO:
    // Check if current fragment is within the curve. Not sure how
    // to proceed from here...
}

如你所见，我目前一直在研究如何检查当前片段是否在曲线内，以及如何为特定片段指定颜色，该片段在显示时最终成为曲线。

Answer 1

您可以使用距离函数绘制线段：

float DistanceToLineSegment(vec3 p, vec3 a, vec3 b)
{
    vec3 pa = p - a, ba = b - a;
    float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 );
    return length( pa - ba*h );
}

如果距离函数的结果小于某个阈值，则片段将在片段的“内部”。

也可以用平滑步长函数代替阈值测试来绘制抗锯齿线。