使用WebGL&绘制圆形粗线Three.js [英] Draw rounded thick line with WebGL & Three.js

问题描述

我刚刚开始摆弄WebGL和three.js.我真的很想创建一条粗线，该粗线具有圆角和末端.(请参见示例图片)

I just started to fiddle around with WebGL and three.js. I would really like to create a thick line, which has rounded corners and endings. (see example picture)

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

Unfortunately I see that firstly the LineBasicMaterial's linecap property does not really work. Three.js LineBasicMaterial

我开始考虑使用试管，但后来我仍然认为我不会获得圆帽...

I started to think about using a tube, but then I think I will still not get a round cap...

有人对我如何在上图中创建一条线有任何想法吗?它不一定必须与three.js一起使用，但是WebGL是必需的.(我也想在这条线上做进一步的动画...)

Does someone have any ideas how I could create a line in the picture above? It does not necessarily have to made with three.js but WebGL would be a requirement. (I also want to animate this line further on...)

感谢任何提示.

欢呼

推荐答案

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

There are a couple ways to draw 3d volumetric lines. The first is to do a vertex expansion in the shader. This is what the links in the comments do. Here is another one in case you need more material: http://codeflow.org/entries/2012/aug/05/webgl-rendering-of-solid-trails/.

不幸的是，当直接观看该线段时，它具有视觉伪像.在此处查看演示: http://codeflow.org/webgl/trails/www/.旋转场景，您会发现一些直接面对相机的线段将快速旋转.顺便说一句，噪点少了，看上去就更糟了.如果您满意，则可能是首选.

Unfortunately it have visual artifacts when the line segment is viewed directly heads on. Check out the demo here: http://codeflow.org/webgl/trails/www/. Spin the scene around and you will notice some line segments facing directly towards the camera will spin rapidly. It looks a lot worse with a less noisy texture btw. If this is fine with you this is probably the preferred option.

第二个选项是为每个线段动态生成胶囊网格.不用多说了，除了这是一个简单的，教bet的，效率低下的方法.

The 2nd option is to just dynamically generate a capsule mesh for each line segment. Not much to say about it, beyond that this is a simple, abet somewhat inefficient method.

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

The 3rd option is to do a limited kind of ray tracing in the shader. Calculate the distance between the line segment and the fragment being shaded and we can use that to determine the appropriate color. Here is a link for that. Geometry shader is not currently supported in the webgl but there is nothing stopping you from generating the bounding line cuboid via javascript. Oh and if you need soft lines you probably need the blend_minmax extension. Probably the hardest method to setup but can be viewed at any angle and very customize-able compared to the other 2 methods.

这篇关于使用WebGL&绘制圆形粗线Three.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！