WebGL管网展示(及TubeGeometry优化) 前端

前言管路展示在三维场景中很常见。比如地下管网，建筑里面的水果，暖通管道等等的展示。

文章图片

建立管路的方式主要两种：

通过3DMax C4D Blender等建模工具进行建模。
通过路径数据，程序生成三维管路。

如果需要动态的通过数据生成管路，只能采用第二种方式来生成。
生成管路的方式在THREE中，通过TubeGeometry可以生成管路。
TubeGeometry可以沿着一条三维样条曲线拉伸出一根管子。可以通过指定顶点来定义路径。创建TubeGeometry管道几何体时可输入以下参数：

path（必填）该属性用一个THREE.SplineCurve对象来指定管道遵循的路径
segments 该属性指定管道的分段数，路径越长指定的段数应该越多，默认值是64
radius 该属性指定管道的半径，默认值是1
radiusSegments 否该属性指定管道截面的分段数，段数越多管道看上去越光滑，默认值是8
closed
该属性来设置管道是否收尾连接，默认值false

比如：

const points = [{ x: 0, y: 0, z: 0 }, { x: 100, y: 0, z: 0 }, { x: 100, y: 0, z: 200 }, ]; const path = createPath(points); const pipeGeometry = new THREE.TubeGeometry(path, 256, radius, 64); const pipeMaterial = new THREE.MeshPhongMaterial({ color }); const pipe = new THREE.Mesh(pipeGeometry, pipeMaterial);

效果如下：

文章图片

TubeGeometry的优化 TubeGeometry 通过指定一个path路径和分段数来创建管路的几何数据。TubeGeometry的分段是平均分配，这会导致一个问题，如果路径很长很复杂，分段数量需要需要很大才能保证几何体的准确性。然而，管路大部分都是直线，只有少量的弯曲的管路。如果一条直线管路，其实只需取路径的起始点和介绍点就可以对路径进行完整的描述，只有弯曲的管路，才需要把路径分成很多端，分别取每一个分段点的数据，才能较好的完成曲线的描述。如果采用平均分段的方式，势必有很多分段落在直线的部分，导致资源的浪费，同时分段数量要求高，创建的几何数据会比较庞大臃肿，影响程序的加载、绘制效率、显存等等。比如，以下系列点都组成两条直线：

const points = [{ x: 0, y: 0, z: 0 }, { x: 100, y: 0, z: 0 }, { x: 100, y: 0, z: 200 }, ];

分段数是4的时候：

new THREE.TubeGeometry(path, 4, radius, 64);

得到的是如下结果：

文章图片

本来两段直线，变成了3段直线的效果，原因就是分片数量不够：
增加分段数：

new THREE.TubeGeometry(path, 256, radius, 64);

效果如下：

文章图片

为了绘制两条直线组成的路径，需要256的分段数量,顶点数量可想而知。
所以我们可以有一种优化思路，对于路径的直线部分，不需要分段，只需要去起始点和终点即可，分段数只分配给曲线的部分。这样的分段方式，可以是分段的数量得到最合理的应用。基于此，我们改造出一个新的类：PathTubeGeometry。
改造后的类，绘制上述两条直线，不需要分片数（分片数量为1），如下：

new PathTubeGeometry(path, 1, radius, 64);

文章图片

极大的节约了资源。
拐角弯管两条直线连接的地方，可以通过加上一点圆角的效果来增加管路的美观度，通过下面代码可以自动根据已有路径生成带弯管的路径。

function getRoundCornerPath(oldPath, radius, path = new Path3D()) { let points = oldPath.points; points = removeDup(points); let p0 = points[0]; path.moveTo(p0); for (let i = 1; i < points.length - 1; i++) { let pre = points[i - 1], p = points[i], next = points[i + 1]; let sub1 = p.clone().sub(pre).setLength(radius), sub2 = next.clone().sub(p).setLength(radius); let v1 = p.clone().sub(sub1), v2 = p.clone().add(sub2); path.lineTo(v1); path.curveTo(p.x, p.y, p.z, v2.x, v2.y, v2.z); } let pl = points[points.length - 1]; path.lineTo(pl); return path; }

结语 【WebGL管网展示(及TubeGeometry优化)】关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。