WebGL：通过 2D 着色器的圆形线关节答案

【问题标题】：WebGL: round line joints via shader in 2DWebGL：通过 2D 着色器的圆形线关节
【发布时间】：2016-04-20 15:59:45
【问题描述】：

我想在 WebGL 中渲染任意粗细的线条。环顾四周，最好的方法似乎是为 TRIANGLE_STRIP 生成几何图形。我的线条在每一帧中都会更新（它们基本上是模拟的绳索），而且我已经受到 cpu 的严重限制，所以我希望在 gpu 上做尽可能多的工作，在 cpu 上做尽可能少的工作。

因此，据我了解，要做的最少工作是将每个点的缓冲区推送两次和一个索引，以便顶点着色器可以将它们分开。我可以使用斜接接头。

但我想要圆形接头。然而，我在谷歌上找到的所有东西都谈到了在关节区域生成的额外三角形并将它们推送到 cpu。由于 WebGL 没有几何着色器，因此没有明显的方法可以将这个概念放到 gpu 上。 TRIANGLE_STRIP 中的线之间共享顶点这一事实并没有使这变得更容易。

我当前的解决方案是使由 A 和 B 之间的线产生的片段的片段着色器具有从 A 插值到 B，从 B 插值到 A 的变量，并且可以判断它在插值中的位置。这给了我 2 个未知值和 2 个方程。解决它们会在片段着色器中给我 A 和 B。由于 TRIANGLE_STRIP 重用顶点，因此正确处理比一开始听起来要复杂得多，并且在中间和插值边缘的准确性方面存在一些小问题（尽管我可以接受）。这是一个相当复杂的解决方案。

是否有通过着色器渲染圆线关节的“通用”解决方案？像three.js 这样的大库如何处理这个问题？我试图搜索他们的来源，但这是一个大项目；）

【问题讨论】：

在末端丢弃靠近顶点的片段，（其中接近并不意味着欧几里德距离，而是产生倒圆/双曲线的东西），然后添加一些平滑度等......
不知何故使用线顶点和片段之间的距离是我也在考虑的，但我还没有找到一种非常直接的方法来制作它，以便每个片段都知道它需要哪些顶点考虑。
这是 2D 还是 3D？
编辑标题：2D 还添加了一些关于我现在正在做什么的信息......

标签： javascript three.js webgl

【解决方案1】：

这里有一些东西可以尝试：向 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/。

【讨论】：

我必须承认我并不完全理解您生成几何图形的概念，尽管我认为我不需要在 2D 中使用我的相机方向。我在顶点着色器中生成的几何图形是这样的：mattdesl.svbtle.com/drawing-lines-is-hard 当我让它在线上进行插值并使用片段的距离时，我得到了这个：i.imgur.com/dFvQQui.png 这不是它应该是的线。插值中心不是我认为最接近生成三角形每个片段的线上的点。至少对于我的三角形一代来说是这样。
虽然我仍在寻找可以分享任何很酷的方法的人，但我现在对我现在拥有的解决方案感到有些满意。 +1 给你指点我那篇博客文章，它建议的内存布局将我的缓冲区大小减少了一半:)
这个概念与您发布的博客中的概念基本相同，即从线的中心推出顶点。如果插值不够好，那么您可能需要考虑在片段着色器中实现点射线距离函数。然后如果 dist(frag_pos, line) > width，丢弃。（或调整 alpha 或类似）
好吧，这正是我正在做的事情，不知何故，在阅读了您的答案后，我想我刚刚意识到如何简化数学以将数据输入片段着色器。我会测试一下。也许我会在测试后发表一篇博文详细解释它:)

【解决方案2】：

我已经实施了一个我现在满意的解决方案。

重点是：

使用在顶点着色器中生成的 mither 关节
使用一堆变量和点索引在两组它们之间交替，以在片段着色器中找到片段

我在这里写了一篇关于细节的博文：http://nanodesu.info/oldstuff/2D-lines-with-round-joints-using-WebGL-shaders/

【讨论】：