数学/OpenGL ES：绘制不同宽度的 3D 贝塞尔曲线

Question

我已经解决了几个星期的问题，并且已经达到了我想确保我没有使我的方法过于复杂的地步。这是在 iOS 上的 OpenGL ES 2.0 中完成的，但原理是通用的，所以我不介意答案是纯粹的数学形式。这是纲要。

我在 3D 空间中有 2 个点以及一个用于生成贝塞尔曲线的控制点，公式如下：

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

起点/终点位于一个相当大的球体上的动态坐标上，因此 x/y/z 变化很大，使得静态解决方案不太实用。我目前正在使用 GL_LINE_STRIP 渲染点。下一步是使用 GL_TRIANGLE_STRIP 渲染曲线并控制相对于高度的宽度。

根据这个quick discussion，解决我的问题的一个好方法是在考虑曲线方向的情况下找到与曲线两侧平行的点。我想一共创建3条曲线，传入索引来创建一个不同宽度的贝塞尔曲线，然后绘制它。

还有关于interpolation 和使用Loop-Blinn technique 的讨论似乎可以解决他们各自问题的具体问题。但是，我相信解决方案对于我所追求的而言可能过于复杂。我也不感兴趣将纹理融入其中。我更喜欢使用稍后在我的着色器中计算的颜色来绘制三角形。

因此，在我深入阅读三线性插值、Catmull-Rom 样条曲线、Loop-Blinn 论文或进一步探索采样之前，我想确定哪个方向最有可能成为最佳选择。我想我可以说这个问题最基本的形式是在 3D 空间中取一个点，并在它旁边找到两个平行点，考虑到下一个点将被绘制的方向。

感谢您抽出宝贵时间，如果我能提供更多信息，请告诉我，我会尽力补充。

Answer 1

这个答案不（据我所知）支持您在问题中提到的一种方法，但在这种情况下我会这样做。

我会计算曲线的归一化法线（或副法线）。假设我采用标准化法线并将其作为 t (N(t)) 的函数。有了这个我会写一个辅助函数来计算偏移点P：

P(t, o) = B(t) + o * N(t)

其中o 表示曲线在法线方向上的有符号偏移量。

给定这个函数，只需通过以下方式计算曲线左右两侧的点：

Points = [P(t, -w), P(t, w), P(t + s, -w), P(t + s, w)]

其中w 是您想要达到的曲线宽度。

然后通过两个三角形连接这些点。

对于三角形带，这意味着索引：

0 1 2 3

编辑

要对曲线做一些工作，通常会计算 Frenet 框架。

这是一组 3 个向量（切线、法线、副法线），用于在给定参数值 (t) 处给出曲线的方向。

Frenet 框架由下式给出：

unit tangent = B'(t) / || B'(t) ||
unit binormal = (B'(t) x B''(t)) / || B'(t) x B''(t) ||
unit normal = unit binormal x unit tangent

在此示例中，x 表示两个向量的叉积，|| v || 表示封闭向量 v 的长度（或范数）。

如您所见，您需要曲线的一阶 (B'(t)) 和二阶 (B''(t)) 导数。