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

我刚开始摆弄WebGL和three.js。我真的很想创造一个粗线，它有圆角和尾端。（见例如图片）用WebGL和Three.js绘制圆形粗线

不幸的是我看到，首先将LineBasicMaterial的财产的linecap没有真正发挥作用。 Three.js LineBasicMaterial

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

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

感谢您的任何提示。

干杯

来源

2016-07-13 Merc

2d还是3d？如果2d我会去最简单的方法：绘制每一行为一个矩形+ 2个半圈。否则有东西像https://mattdesl.svbtle.com/drawing-lines-is-hard –

有这个http://labs.hyperandroid.com/efficient-webgl-stroking – gman

不幸的是我需要它是3d。可以想象，图像具有从（0,0,0），（1,0,0），（1,0,1.2），（1,0.25,1.2），（1,0.25,0.3）开始的坐标在左侧的顶点。尽管感谢您的链接。我会检查他们。 – Merc

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

不幸的是，当直接查看线段时，它会产生视觉伪影。看看这里的演示：http://codeflow.org/webgl/trails/www/。旋转场景，您会注意到直接面向相机的一些线段会快速旋转。它看起来很糟糕，用较低噪音的纹理顺便说一句。如果这对你很好，这可能是首选。

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

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

来源

2016-07-14 04:45:27

另外还有一个专用于Three.js的lib，称为[THREE.MeshLine]（https://github.com/spite/THREE.MeshLine）。 –

我仍在为此而苦苦挣扎。感谢您的提示！我们尝试了不同的东西（例如，使用三个示例中的BufferSubdivisionModifier构建了一个tubeGeometry），但它仍然不能真正生成我们想要的东西+它的速度很慢。检查了THREE.MeshLine，但我无法真正弄清楚如何产生像我的图像中的结果... – Merc

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

回答

相关问题