Vectorize Cubic Bezier用于2D WebGL

Question

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

更复杂的是，我想要每个段的“X”个像素数，因此不能沿着该行每1％迭代一次。

我想这会像：

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

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

所以，我的问题是：

是否有任何本地方法在WebGL中绘制立方贝塞尔？

如果没有，任何人都可以帮助我进行上述计算，特别是立方贝塞尔曲线的总长度吗？

Answer 1

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

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

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

在WebGL中，顶点着色器将点列表作为输入，并在一些变换后生成与输出相同大小的点列表。列表不能改变大小，所以你需要弄清楚JS土地上的细分数量。

如果为Bezier的参数化版本为每个点指定了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。

没有封闭的表格解决方案。

可能感兴趣的是，我为little Bezier animation

呈现blog post

Answer 2

我只想清楚地补充一下，我们长时间光栅化Bézier曲线，所以除了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