使用WebGL＆amp;绘制圆形粗线。 three.js所

Question

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

不幸的是，我发现LineBasicMaterial的linecap属性并不真正起作用。 Three.js LineBasicMaterial

我开始考虑使用电子管，但我认为我仍然不会得到一个圆形的帽子......

有人有任何想法如何在上面的图片中创建一条线？它不一定要用three.js制作，但WebGL是必需的。 （我还希望进一步动画这一行......）

感谢任何提示。

干杯

Answer 1

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

不幸的是，当直接观察线段时，它会产生视觉效果。在这里查看演示：http://codeflow.org/webgl/trails/www/。旋转场景，你会发现一些直接面向相机的线段会快速旋转。 btw噪音较小，看起来更糟糕。如果这对您没问题，这可能是首选方案。

第二个选项是为每个线段动态生成一个胶囊网格。关于它的说法不多，除此之外，这是一种简单，有点低效的方法。

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