2

我正在使用 WebGL 在 Javascript 中构建一个类似于 cad 的 2D 应用程序，并且需要允许用户绘制三次贝塞尔曲线。我的问题是，据我所知，WebGL 没有任何简单的方法可以绘制除线条和实心三角形之外的任何东西。

更复杂的是，我希望每段有“X”个像素，因此不能只遍历该线的每 1%。

我想这会是这样的：

  1. 计算贝塞尔曲线的总长度
  2. 将该数字除以每像素的段数
  3. 按前一个数字迭代贝塞尔曲线

这是一种性能极高的情况（一次有数百条曲线），因此我无法为每条曲线使用恒定数量的段。

所以，我的问题是：

有没有在 WebGL 中绘制三次贝塞尔曲线的本地方法？

如果没有，谁能帮助我进行上述计算，尤其是三次贝塞尔曲线的总长度？

4

2 回答 2

2

没有直接的方法可以告诉 WebGL “绘制曲线”。只是三角形（和线）。

所以我认为你的一般方法（估计长度，划分所需的平滑度，走曲线）会很好。

不过，您可以使用顶点着色器进行一些计算。根据您的数据集以及它的变化程度，这可能是一个胜利。

在 WebGL 中，顶点着色器将点列表作为输入，并在经过一些转换后生成相同大小的点列表作为输出。该列表无法更改大小，因此您需要计算 JS 领域中的细分数量。

顶点着色器可以计算曲线位置，如果您为每个点分配了一个介于 0 和 1 之间的属性“t”，用于贝塞尔曲线的参数化版本。可能很方便。

来自维基百科，在此处输入图像描述

至于贝塞尔长度，如果我们将其描述为 (p0, p1, p2, p3)，其中 p0 和 p3 是端点，p1 和 p2 是控制点，我们可以很快说贝塞尔长度至少为dist(p0,p3)，并且在大多数dist(p0,p1)+dist(p1,p2)+dist(p2,p3).

可以基于此快速猜测。

在https://math.stackexchange.com/questions/338463/length-of-bezier-curve-with-simpsons-rule对数值解进行了更深入的讨论。

没有封闭形式的解决方案。

可能感兴趣，我为一篇博文渲染了一个小贝塞尔动画

于 2013-11-09T17:56:02.017 回答
2

我只是想清楚地补充一点，我们已经对贝塞尔曲线进行光栅化很长时间了，所以除了 steve.hollasch.net 链接（http://steve.hollasch.net/cgindex/curves/cbezarclen.html）我从@davidvanbrink 的答案中的链接页面中提取，我认为应该有其他资源用于此......显然WebGL/OpenGL 添加了另一个维度组件来找到合适的分辨率，但这不可能是以前没有尝试过的东西. 我认为以下链接可能很有用。

http://en.wikipedia.org/wiki/NURBS（非均匀有理 B 样条） http://antigrain.com/research/adaptive_bezier/index.html（贝塞尔曲线的自适应细分：达到完美结果的尝试在贝塞尔曲线近似） http://www.neuroproductions.be/experiments/nurbs/ http://threejs.org/examples/webgl_geometry_nurbs.html

于 2013-11-09T19:49:34.507 回答