ios - 数学/OpenGL ES : Draw 3D bezier curve of varying width

标签 ios math opengl-es-2.0

我已经研究了几个星期的问题,并且已经达到了我想确保我的方法不会过于复杂的地步。这是在 iOS 上的 OpenGL ES 2.0 中完成的,但原则是通用的,所以我不介意答案是纯数学形式的。这是概要。

我在 3D 空间中有 2 个点以及一个控制点,我用它来生成具有以下等式的贝塞尔曲线:

B(t) = (1 - t)2P0 + 2(1 - t)tP1 + t2P2

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

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

还有关于 interpolation 的讨论并使用 Loop-Blinn technique这似乎解决了各自问题的具体问题。但是,我相信这些解决方案对于我要追求的目标来说可能过于复杂。我也不感兴趣将纹理混入其中。我更喜欢使用稍后在我的着色器中计算的颜色绘制三角形。

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

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

最佳答案

这个答案(据我所知)不支持您在问题中提到的方法之一,但这是我在这种情况下会做的。

我会计算曲线的归一化法线(或副法线)。假设我采用归一化法线并将其作为 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)) 导数。

关于ios - 数学/OpenGL ES : Draw 3D bezier curve of varying width,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10918715/

相关文章:

ios - 在 TableView 上显示名称

javascript - javascript 中 Math.cos 函数将度数转换为弧度时出现问题

android - glReadPixels 失败,格式为 GL_ALPHA

iphone - 导航栏图片隐藏自定义导航栏按钮

ios - iPad OS 如何确定 iOS 13 safari 中的桌面站点

ios - 从其他类调用 CollectionView 中的下一张图像

c++ - 使用 4x3 矩阵创建平面阴影?

javascript - 在 JavaScript 中向整数添加尾随数字

java - 我可以将 java 窗口句柄传递给 OpenGL-es

android opengl es 2.0 纹理切换