在片段着色器中绘制线段

Question

我很难理解下面的代码，这个想法是在片段着色器中绘制一个简单的片段。我试着分解它，但我还是不明白？？？线。有一个很好的解释会很棒。我在 SO 或 Google.

上找不到任何内容

float lineSegment(vec2 p, vec2 a, vec2 b) {
    float thickness = 1.0/100.0;

    vec2 pa = p - a;
    vec2 ba = b - a;

    float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 );
    // ????????
    float idk = length(pa - ba*h);

    return smoothstep(0.0, thickness, idk);
}

原码来自TheBookOfShaders.

Answer 1

假设直线由点 a、b 定义，p 是要评估的点，那么 pa 是从点出发的向量a指向p和ba从a到b的向量。

现在，dot(ba, ba) 等于 length(ba) ^ 2，dot(pa,ba) / length(ba) 是矢量 pa 在你的直线上的投影。然后， dot(pa,ba)/dot(ba,ba) 是在你的线的长度上归一化的投影。该值被限制在 0 和 1 之间，因此您的投影将始终位于定义线的点之间。

然后在 length(pa - ba * h) 上，ba * h 等于 dot(pa,ba) / length(ba)，这是你的点在你的线上的投影，现在夹在点 a 和 b 之间。减法 pa - ba * h 产生一个向量，表示线与点 p 之间的最小距离。使用该向量的长度并将其与粗细进行比较，您可以确定该点是否落在要绘制的线内。

在片段着色器中绘制线段

Draw a line segment in a fragment shader

shader

glsl

fragment-shader