在 three.js 中创建具有粗细和阴影的线条以可视化 3D 打印层答案

【问题标题】：Creating lines with thickness and shadows in three.js for visualising 3D printing layers在 three.js 中创建具有粗细和阴影的线条以可视化 3D 打印层
【发布时间】：2020-11-07 06:19:00
【问题描述】：

我一直在尝试找出一种方法，使用 Three.js 为可以接收阴影并看起来像实体对象的线条添加粗细，但到目前为止我设法获得的最佳结果只是看起来不像 3D 的粗线条几何。

该应用程序用于在线 3D 打印平台，因此我试图将由线条组成的切片几何图形可视化，类似于其他切片软件（例如 cura）处理此问题的方式，如下图所示。

从这些线生成网格几何体很可能会出现问题，因为在某些情况下，单个模型中有数千条线，所以它太重了。

任何关于如何在 three.js 或其他 javascript 库中实现所需结果的建议将不胜感激！

【问题讨论】：

不管怎样，您分享的图像看起来像是使用全阴影几何体，而不是线条。 Cura 是一个桌面应用程序，在该领域内存通常不太受关注，因此您正在比较苹果和橙子。如果您可以修改TubeGeometry 以在直线路径上创建更少的节点，您可能会发现它非常适合这项工作。
这些不是阴影，而是阴影......这只是启用光线和通过表面法线的问题。您可以创建tube geometry，但这会非常慢。相反，您可以渲染简单的多段线，在几何着色器中转换为 BBOX，并在 Fragment 中基于到线的距离使用normal shading 渲染粗线。这与Draw Quadratic Curve on GPU 非常相似（但更容易）
我曾尝试使用管几何，但在大多数情况下，它确实太重了，即使使用减少顶点数量的简化多段线也是如此。目前我正在使用像这个例子threejs.org/examples/webgl_lines_fat 这样的粗细线几何，但这并不理想。我不太清楚你建议的方法。你能解释一下这些步骤吗？谢谢！

标签： javascript graphics three.js 3d

【解决方案1】：

所以我们的想法是渲染覆盖粗线区域的图元，并在片段中决定片段是在粗线内部还是外部，计算 3D 位置和正常并渲染或discard; 如果不是。

这个想法是将用于渲染的多段线几何传递给 OpenGL，这将只产生细线并使用着色器来完成其余的工作。

顶点着色器

只会将东西传递给几何着色器
几何着色器

将接收 2 个顶点（线）并输出 2 个三角形（四边形）覆盖线 BBOX（线放大一半粗细）。这相对容易。只需将线端点通过垂直矢量移动到大小等于一半厚度的线即可。这必须在与相机屏幕平面平行的平面上完成（使用从直接相机矩阵中提取的基向量）。不要忘记传递世界坐标和相机坐标中的两个顶点。
片段着色器

只需从世界坐标测试点是否在粗线内：

所以只需计算P' 并计算P,P' 之间的距离。这称为点和线之间的垂直距离。其可利用的点积 IIRC：
```
 t = dot(P-P0,P1-P0)
 P' = P0 + t*(P1-P0)
 d = |P'-P0|
```
从中您只需计算 3D 坐标（片段的深度）、法线并使用一些定向光或discard;...

查看二维三次曲线技术的完整示例：

rendering thick 2D Cubics in GLSL

【讨论】：