使用 WebGL 和 Three.js 绘制圆形粗线

Question

我刚刚开始摆弄 WebGL 和 three.js。 我真的很想创建一条粗线，它有圆角和结尾。 （见示例图）

不幸的是，我首先看到 LineBasicMaterial 的 linecap 属性并没有真正起作用。 Three.js LineBasicMaterial

我开始考虑用管子，但后来我想我还是不会得到一个圆帽......

有人知道如何在上图中创建一条线吗？它不一定必须使用 three.js，但 WebGL 是必需的。 （我还想进一步动画这条线......）

感谢任何提示。

干杯

Answer 1

有几种方法可以绘制 3d 体积线。首先是在着色器中进行顶点扩展。这就是 cmets 中的链接所做的。如果您需要更多材料，这里还有一个：http://codeflow.org/entries/2012/aug/05/webgl-rendering-of-solid-trails/。

不幸的是，当直接从正面观看线段时，它会出现视觉伪影。在此处查看演示：http://codeflow.org/webgl/trails/www/。旋转场景，您会注意到一些直接面向相机的线段会快速旋转。顺便说一句，噪点较少的纹理看起来更糟。如果你觉得这没问题，这可能是首选。

第二个选项是为每个线段动态生成一个胶囊网格。没什么好说的，除此之外，这是一种简单的，教唆效率低下的方法。

第三个选项是在着色器中进行有限种类的光线追踪。计算线段和被着色的片段之间的距离，我们可以用它来确定合适的颜色。这是一个link。 webgl 目前不支持几何着色器，但没有什么能阻止您通过 javascript 生成边界线长方体。哦，如果你需要软线，你可能需要blend_minmax 扩展。可能是最难设置的方法，但与其他 2 种方法相比，可以从任何角度查看，并且非常可定制。