Threejs：为什么线框厚度不适合我？

Question

我无法创建粗线框。使用以下代码：

new THREE.MeshBasicMaterial( {
    color: new THREE.Color( 'rgb(100,100,100)' ),
    emissive: new THREE.Color( 'rgb(23,23,23)' ),
    shading: THREE.FlatShading,
    wireframeLinewidth: 10,
    wireframe: true
})

我得到以下结果：

无论我使用什么数字，线条总是 1px 粗。我注意到 Threejs api 演示页面也是如此：

这是一个已知的错误？有什么解决办法吗？

Answer 1

WebGL1 中所需的最大线条粗细为 1，因此基本上您的浏览器、操作系统或驱动程序的线条粗细限制为 1。

在 WebGL2 中，该限制更常见为 1，因为在 OpenGL 4.0+ Core Profile 中该限制为 1。

来自 OpenGL 4.+ 规范，E.2.1 节

E.2.1 已弃用但仍受支持的功能

以下功能已弃用，但仍然存在于核心配置文件中。它们可能会从 OpenGL 的未来版本中删除，并在实现核心配置文件的前向兼容上下文中删除。

• 宽线 - 线宽值大于 1.0 将生成 INVALID_VALUE 错误。

虽然 WebGL2 在桌面上基于 OpenGL ES 3.0，但它在 OpenGL 4 或 ANGLE 之上运行，两者的限制均为 1。由于 Firefox 51 和 Chrome 56 昨天发布，并且两者都在桌面上使用 ANGLE 或 OpenGL 4+，这意味着现在几乎所有地方的限制都是 1，即使在 WebGL1 中也是如此

所有这一切的要点是，除非您只关心 1 的线条，否则您不应该使用 GL 的线条图来绘制线条（是的，我知道，听起来很愚蠢）。

相反，您需要想出其他解决方案。

一些链接，

首先是三个.js 的库

https://github.com/spite/THREE.MeshLine

另外一些关于如何创建线条的文章

http://labs.hyperandroid.com/efficient-webgl-stroking

https://cesiumjs.org/2013/04/22/Robust-Polyline-Rendering-with-WebGL/

https://mattdesl.svbtle.com/drawing-lines-is-hard