three.js中的instancedMesh类优化渲染多个同网格材质的模型

three.js小白的学习之路。

在上上一篇博客中，简单验证了一下three.js中的网格共享。写的时候就有一些想法，如果说某个场景中有一万棵树，这些树共享一个geometry和material，有没有好的办法将其进行一定程度上的渲染优化，以提高浏览器的帧率。

查阅了了一番资料，找到一个three.js中的类——InstanceMesh。

介绍

three.js的官网是这样介绍的：InstancedMesh实例化网格是特殊版本的Mesh(具有mesh的相关属性和方法)，可以用来渲染大量的具有相同几何体和材质、但具有不同世界变换的物体。InstancedMesh可以减少draw call的数量，从而提升程序整体的渲染性能。听起来就和我们想要的效果很搭。

构造函数：

InstancedMesh(geometry: BufferGeometry, material: Material, count: Number)

其中geometry和material表示相同的几何体和材质，count表示有多少共用这些几何体和材质的mesh。

属性：

.count

实例的数量，可以在运行时改变这个数值，范围是[0, count]，如果比count大，需要重新创建实例。

还有其他如boundingBox(外边接矩形)、instancedColor(所有实例的颜色)、instanceMatrix(所有实例的局部变换)等。

方法：

.computeBoundingBox(): undefined
.computeBoundingSphere(): undefined

分别对应boundingBox和boundingSphere两个属性。

.dispose(): undefined

释放实例的内部资源。

.setMatrixAt( index: Number, matrix: Matrix4): undefined

index表示是第几个实例Mesh，范围是[0, count)；matrix表示一个给定的局部变化矩阵。

其他的方法还有setColorAt(设置已定义实例的颜色)、getColorAt、getMatrixAt等。

示例

假如说有这么一个山地场景，里面需要很多很多的树(这里为了方便，就使用一个平面+五个立方体表示一棵树)。每棵树共用geometry和material，但是每个数的平移旋转缩放均不相同。

首先先正常的将其加载到场景里面：

new GLTFLoader().load("/instanced.glb", (glb) => {const mesh = glb.scene;scene.add(mesh);
});

此时，场景的渲染帧率如图所示：

帧率大概只有14帧左右。

接下来对场景中每棵树，也就是立方体进行InstancedMesh实例化。

首先需要获取到所有的立方体Mesh：

const instanceArr: Three.Mesh[] = [];  
glb.scene.traverse((item) => {if (item.isMesh && item.name.startsWith(name)) {instanceArr.push(item);}});

接下来就是对这些Mesh进行实例化：

  const count = instanceArr.length; // 相同模型的总个数// 创建InstancedMesh实例const instanceMesh = new Three.InstancedMesh(instanceArr[0].geometry,instanceArr[0].material,count);

通过数组的第一个元素，获取到共享的geometry和material。

然后就是在获取所有mesh的世界变换，并分别应用到每一个实例Mesh中：

  const matrix = new Three.Matrix4();const pos = new Three.Vector3();const qua = new Three.Quaternion();const sca = new Three.Vector3();instanceArr.forEach((obj, i) => {obj.getWorldPosition(pos);obj.getWorldQuaternion(qua);obj.getWorldScale(sca);matrix.compose(pos, qua, sca); // 将此矩阵设置为由平移、旋转和缩放组成的变换。instanceMesh.setMatrixAt(i, matrix); // 更新InstancedMesh中每个实例的变换矩阵});

最后将InstancedMesh加入到场景中，并且将原有的所有立方体mesh从场景中移除：

  scene.add(instanceMesh);instanceArr.forEach((obj) => {obj.parent?.remove(obj); // 模型移除});instanceArr.splice(0, count); // 清除引用

看一下运行结果：

可以看到，帧率几乎拉满到60帧，提升效果显著！

思考

做了一个简单的实验，就是将现在这个模型在一个性能较差(内存小，没有独显等)电脑上加载，使用InstancedMesh前后的性能对比如图所示：

使用前

使用后

可以看到，使用前后的帧率几乎一样，都在3-5帧。

这就抛出了一个问题，就是如果模型本身就已经超出或者将要超出浏览器的承载极限时，这个InstancedMesh方法几乎是没有效果的。从这个角度来说，这个优化或许有一些局限性，即适用于那些有大量的共享网格和材质，且浏览器帧率较低，但是浏览器依然可以正常运行的情况。

总结

InstancedMesh类可以很好地优化那些具有大量的共享材质和网格，但是有不同平移旋转缩放的模型，就类似于blender中使用了Alt+D复制了很多份，然后每一个模型的位姿又有不同。