在片段着色器中绘制线段

【问题标题】：Draw a line segment in a fragment shader在片段着色器中绘制线段
【发布时间】：2018-07-15 15:13:46
【问题描述】：

我很难理解以下代码，其想法是在片段着色器中绘制一个简单的段。我试图分解它，但我仍然没有得到???线。有一个很好的解释会很棒。我在 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.

【问题讨论】：

标签： glsl shader fragment-shader

【解决方案1】：

假设线由点a、b 定义，而p 是要评估的点，那么pa 是从点a 到点p 和@ 的向量987654327@ 从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 之间的最小距离。使用该向量的长度并将其与粗细进行比较，您可以确定该点是否落在您要绘制的线内。

【讨论】：