是否可以仅使用 GPU 来加厚二次 Bézier 曲线？

Question

我在 OpenGL 程序中绘制了大量二次贝塞尔曲线。现在，曲线只有一像素细，并且是由软件生成的，因为我还处于相当早期的阶段，看看什么有效就足够了。

很简单，给定 3 个控制点（P₀ 到 P₂），我用 < em>t 在软件中从 0 变化到 1（步长为 1/8），并使用 GL_LINE_STRIP 将它们链接在一起：

B(t) = (1 - t)²P₀ + 2(1 - t)tP₁ + t²P₂

其中 B 显然会产生一个二维向量。

这种方法效果“足够好”，因为即使是最大的曲线也不需要超过 8 个步骤即可看起来弯曲。尽管如此，一像素的细曲线还是很难看。

我想编写一个 GLSL 着色器，它接受控制点和统一的厚度变量，以使曲线更粗。起初，我考虑只制作一个像素着色器，它只会对曲线厚度/2距离内的像素进行着色，但这样做需要求解三次多项式，并在一个内的三个解决方案之间进行选择着色器看起来并不是最好的主意。

然后我尝试查找其他人是否已经这样做了。我偶然发现了微软研究院 Loop 和 Blinn 撰写的白皮书 他们展示了一种填充曲线下区域的简单方法。虽然它在某种程度上运作良好，但我很难将这个想法适应在两条鲍德曲线之间进行绘制。

使用几何着色器查找与单条曲线匹配的边界曲线相当容易。问题来自于应该填充整个事物的片段着色器。他们的方法使用插值纹理坐标来确定片段是否落在曲线上方或下方；但我想不出用两条曲线来做到这一点的方法（我对着色器很陌生，而且不是数学专家，所以我不知道如何做到这一点并不意味着这是不可能的）。

我的下一个想法是将填充曲线分成三角形，并仅在外部部分使用贝塞尔片段着色器。但为此，我需要在可变点处分割内部曲线和外部曲线，这再次意味着我必须求解方程，这实际上不是一个选择。

是否有使用着色器绘制二次贝塞尔曲线的可行算法？

Answer 1

这在一定程度上延续了我之前的答案，但实际上有很大不同，因为我在该答案中犯了一些核心问题。

为了允许片段着色器仅在两条曲线之间进行着色，提供了两组“纹理”坐标作为变化变量，并应用了 Loop-Blinn 技术。

varying vec2 texCoord1,texCoord2;
varying float insideOutside;

varying vec4 col;

void main()
{   
    float f1 = texCoord1[0] * texCoord1[0] - texCoord1[1];
    float f2 = texCoord2[0] * texCoord2[0] - texCoord2[1];

    float alpha = (sign(insideOutside*f1) + 1) * (sign(-insideOutside*f2) + 1) * 0.25;
    gl_FragColor = vec4(col.rgb, col.a * alpha);
}

到目前为止，很容易。困难的部分是在几何着色器中设置纹理坐标。 Loop-Blinn 为控制三角形的三个顶点指定它们，并且它们在三角形上进行适当的插值。但是，这里我们需要在实际渲染不同的三角形时具有相同的可用插值。

解决方案是找到从 (x,y) 坐标到内插/外推值的线性函数映射。然后，可以在渲染三角形时为每个顶点设置这些值。这是我这部分代码的关键部分。

    vec2[3] tex = vec2[3]( vec2(0,0), vec2(0.5,0), vec2(1,1) );

    mat3 uvmat;
    uvmat[0] = vec3(pos2[0].x, pos2[1].x, pos2[2].x);
    uvmat[1] = vec3(pos2[0].y, pos2[1].y, pos2[2].y);
    uvmat[2] = vec3(1, 1, 1);

    mat3 uvInv = inverse(transpose(uvmat));

    vec3 uCoeffs = vec3(tex[0][0],tex[1][0],tex[2][0]) * uvInv;
    vec3 vCoeffs = vec3(tex[0][1],tex[1][1],tex[2][1]) * uvInv;

    float[3] uOther, vOther;
    for(i=0; i<3; i++) {
        uOther[i] = dot(uCoeffs,vec3(pos1[i].xy,1));
        vOther[i] = dot(vCoeffs,vec3(pos1[i].xy,1));
    }   

    insideOutside = 1;
    for(i=0; i< gl_VerticesIn; i++){
        gl_Position = gl_ModelViewProjectionMatrix * pos1[i];
        texCoord1 = tex[i];
        texCoord2 = vec2(uOther[i], vOther[i]);
        EmitVertex();
    }
    EndPrimitive();

这里 pos1 和 pos2 包含两个控制三角形的坐标。该部分渲染由 pos1 定义的三角形，但将 texCoord2 设置为 pos2 三角形的转换值。然后 pos2 三角形需要渲染，类似。然后需要填充这两个三角形两端之间的间隙，并适当平移两组坐标。

矩阵逆的计算需要 GLSL 1.50 或者需要手动编码。最好求解平移方程而不计算逆矩阵。不管怎样，我不希望这部分在几何着色器中特别快。

Answer 2

您应该能够使用您提到的论文中的 Loop 和 Blinn 技术。

基本上，您需要在法线方向上双向偏移每个控制点，以获得两条曲线（内部和外部）的控制点。然后遵循 Loop 和 Blinn 第 3.1 节中的技术 - 这会分解曲线的各个部分以避免三角形重叠，然后对内部的主要部分进行三角测量（请注意，这部分需要 CPU）。最后，这些三角形被填充，并且它们外面的小弯曲部分使用 Loop 和 Blinn 的技术在 GPU 上渲染（在第 3 节的开头和结尾）。

这里描述了一种可能适合您的替代技术：
OpenGL 中的厚贝塞尔曲线

编辑：
啊，你甚至想避免 CPU 三角测量 - 我应该更仔细地阅读。

您遇到的一个问题是几何着色器和片段着色器之间的接口 - 几何着色器需要生成图元（最有可能是三角形），然后通过片段程序单独光栅化和填充这些图元。

在厚度恒定的情况下，我认为非常简单的三角测量将起作用 - 对所有“弯曲位”使用 Loop 和 Bling。当两个控制三角形不相交时，这很容易。当他们这样做时，十字路口以外的部分就很容易了。所以唯一困难的部分是在交叉点内（应该是一个三角形）。

在交叉点内，只有当两个控制三角形都通过 Loop 和 Bling 导致像素着色时，您才需要对像素进行着色。因此片段着色器需要能够对两个三角形进行纹理查找。一个可以作为标准，您需要为第二组纹理坐标添加一个 vec2 变化变量，您需要为三角形的每个顶点进行适当的设置。此外，您还需要一个统一的“sampler2D”纹理变量，然后您可以通过texture2D 对其进行采样。然后，您只需对满足两个控制三角形（在交叉点内）检查的片段进行着色即可。

我认为这在任何情况下都有效，但我可能错过了一些东西。

Answer 3

我不知道如何具体解决这个问题，但这很有趣。我认为你需要 GPU 中的每个不同的处理单元：

顶点着色器
将正常的点线扔到顶点着色器。让顶点着色器将点替换为贝塞尔曲线。

几何着色器

让几何着色器为每个顶点创建一个额外的点。

foreach (point p in bezierCurve)
    new point(p+(0,thickness,0)) // in tangent with p1-p2        

片段着色器
要使用特殊描边来描画贝塞尔曲线，您可以使用带有 Alpha 通道的纹理。您可以检查 Alpha 通道的值。如果为零，则剪裁像素。这样，您仍然可以让系统认为它是一条实线，而不是半透明的线。您可以在 Alpha 通道中应用一些模式。

我希望这对您有所帮助。你必须自己解决很多问题，但我认为几何着色会加速你的贝塞尔曲线。

---

对于抚摸，我仍然选择创建 GL_QUAD_STRIP 和 alpha 通道纹理。