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

Question

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

three.jswebgllinerounded-corners

4

我刚开始尝试使用WebGL和three.js。

我想创建一条粗线，它有圆角和结束点。（见示例图片）

不幸的是，我发现首先LineBasicMaterial的linecap属性并没有真正起作用。

Three.js LineBasicMaterial

我开始考虑使用管道，但是我认为我仍然无法得到一个圆形帽...

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

谢谢任何提示。

干杯

- Merc

1

2D 还是 3D？如果是 2D，我会选择最简单的方法：将每条线绘制为一个矩形 + 2个半圆。否则，可以参考 https://mattdesl.svbtle.com/drawing-lines-is-hard - WacławJasper

这里有一个关于 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

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WacławJasper · Accepted Answer

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

不幸的是，当直接从正面查看线段时，它会产生视觉伪影。请查看此处的演示：http://codeflow.org/webgl/trails/www/。旋转场景，您将注意到某些面向摄像机的线段会快速旋转。如果您对此满意，则可能是首选选项。

第二个选择是为每个线段动态生成一个胶囊网格。关于它，除了这是一种简单但效率略低的方法之外，没有什么可说的。

第三种选择是在着色器中进行有限的射线追踪。计算线段和正在着色的片段之间的距离，我们可以用它来确定适当的颜色。这里是一个链接：link。WebGL目前不支持几何着色器，但是没有什么可以阻止您通过JavaScript生成包围线长方体。哦，如果您需要柔和的线条，您可能需要使用blend_minmax扩展程序。这可能是最难设置的方法，但与其他两种方法相比，可以在任何角度查看并且非常可自定义化。