WebGL：通过 2D 着色器进行圆线连接
WebGL: round line joints via shader in 2D
我想在 WebGL 中渲染任意粗细的线条。环顾四周，最好的方法似乎是为 TRIANGLE_STRIP 生成几何图形。
我的线条在每一帧中都会更新（它们基本上是模拟绳索）并且我已经严重 cpu 绑定所以我希望在 gpu 上尽可能多地工作而在 cpu 上尽可能少地工作.
因此，据我所知，要做的最少工作量是将每个点的缓冲区和索引推送两次，以便顶点着色器可以将它们分开。
我有使用斜接接头的方法。
但我想要圆接头。我在 google 上找到的所有东西都在谈论在关节区域生成额外的三角形并将它们推到 cpu。由于 WebGL 没有几何着色器，因此没有明显的方法可以将该概念应用到 gpu 上。
TRIANGLE_STRIP 中的线之间共享顶点这一事实并没有使这变得更容易。
我目前的解决方案是使由 A 和 B 之间的直线产生的片段的片段着色器具有从 A 到
B，一个从 B 到 A 插值的 varying，并且可以告诉它在插值中的位置。这给了我 2 个未知值和 2 个方程。解决它们会在片段着色器中给出 A 和 B。由于 TRIANGLE_STRIP 重用了顶点，而且它在插值的中间和边缘周围的准确性方面存在一些小问题（尽管我可以接受），但要做到这一点比一开始听起来要复杂得多。
这是一个非常复杂的解决方案。
有没有"common"通过着色器渲染圆线关节的解决方案？
three.js 这样的大型图书馆如何处理这个问题？我试图搜索他们的来源，但这是一个大项目 ;)
这里有一些尝试：向 GPU 发送中心顶点位置、极性（+1 或 -1）和顶点方向。例如。 [A, +1, dir(B-A)],[A, -1, dir(B-A)], [B, +1, dir(C-B)],...
相机观察方向与顶点方向的叉积乘以极性+顶点中心(cross(camDir, a_vertexDir) * a_polarity + a_vertexCenter)给出线的几何形状。在顶点着色器中执行此操作。将插值中心位置发送到片段着色器，并使用片段与插值中心位置之间的距离来调制线。
思路与此类似：http://codeflow.org/entries/2012/aug/05/webgl-rendering-of-solid-trails/。
我已经实施了一个我现在很满意的解决方案。
重点是：
- 使用在顶点着色器中生成的 mither 关节
- 使用一组变量和点索引在两组变量之间交替以在片段着色器中找到片段
我已经写了一篇博客 post 关于这里的细节：http://nanodesu.info/oldstuff/2D-lines-with-round-joints-using-WebGL-shaders/
我想在 WebGL 中渲染任意粗细的线条。环顾四周，最好的方法似乎是为 TRIANGLE_STRIP 生成几何图形。 我的线条在每一帧中都会更新（它们基本上是模拟绳索）并且我已经严重 cpu 绑定所以我希望在 gpu 上尽可能多地工作而在 cpu 上尽可能少地工作.
因此，据我所知，要做的最少工作量是将每个点的缓冲区和索引推送两次，以便顶点着色器可以将它们分开。 我有使用斜接接头的方法。
但我想要圆接头。我在 google 上找到的所有东西都在谈论在关节区域生成额外的三角形并将它们推到 cpu。由于 WebGL 没有几何着色器，因此没有明显的方法可以将该概念应用到 gpu 上。 TRIANGLE_STRIP 中的线之间共享顶点这一事实并没有使这变得更容易。
我目前的解决方案是使由 A 和 B 之间的直线产生的片段的片段着色器具有从 A 到 B，一个从 B 到 A 插值的 varying，并且可以告诉它在插值中的位置。这给了我 2 个未知值和 2 个方程。解决它们会在片段着色器中给出 A 和 B。由于 TRIANGLE_STRIP 重用了顶点，而且它在插值的中间和边缘周围的准确性方面存在一些小问题（尽管我可以接受），但要做到这一点比一开始听起来要复杂得多。 这是一个非常复杂的解决方案。
有没有"common"通过着色器渲染圆线关节的解决方案？ three.js 这样的大型图书馆如何处理这个问题？我试图搜索他们的来源，但这是一个大项目 ;)
这里有一些尝试：向 GPU 发送中心顶点位置、极性（+1 或 -1）和顶点方向。例如。 [A, +1, dir(B-A)],[A, -1, dir(B-A)], [B, +1, dir(C-B)],...
相机观察方向与顶点方向的叉积乘以极性+顶点中心(cross(camDir, a_vertexDir) * a_polarity + a_vertexCenter)给出线的几何形状。在顶点着色器中执行此操作。将插值中心位置发送到片段着色器，并使用片段与插值中心位置之间的距离来调制线。
思路与此类似：http://codeflow.org/entries/2012/aug/05/webgl-rendering-of-solid-trails/。
我已经实施了一个我现在很满意的解决方案。
重点是：
- 使用在顶点着色器中生成的 mither 关节
- 使用一组变量和点索引在两组变量之间交替以在片段着色器中找到片段
我已经写了一篇博客 post 关于这里的细节：http://nanodesu.info/oldstuff/2D-lines-with-round-joints-using-WebGL-shaders/