Threejs 性能优化之(多实例渲染 and 合并)

InstancedMesh是R110之后出现
官网简介:
A special version of Mesh with instanced rendering support. Use InstancedMesh if you have to render a large number of objects with the same geometry and material but with different world transformations. The usage of InstancedMesh will help you to reduce the number of draw calls and thus improve the overall rendering performance in your application.
大量相同的几何,会减少绘图调用的次数,大量提高页面性能;

注:从97版本开始,camera.lookAT()方法做了修改,原本写法是camera.lookAt({x:0,y:0,z:0})这种,新版本(从97以后的版本)只用写进去坐标就可以了,写法是camera.lookAt(0,0,0),升级版本模型显示可能为此问题。

1.多实例化几何体

同一个Geometry , 同一个 material ,但可以通过索引轻松控制每一个个体大小、位置等

let insGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
//创建具有多个实例的实例化几何体
let insMesh = new THREE.InstancedMesh(insGeometry, material, total);
//修改位置
let transform = new THREE.Object3D();
for (let index = 0; index < total; index++) {
    transform.position.set(Math.random() * 2000, Math.random() * 2000, Math.random() * 2000);
    transform.scale.set(Math.random() * 50 + 50, Math.random() * 50 + 50, Math.random() * 50 + 50);
    transform.updateMatrix();
	//修改实例化几何体中的单个实例的矩阵以改变大小、方向、位置等
    insMesh.setMatrixAt(index, transform.matrix);
}
scene.add(insMesh);

2.合并几何体

不同的 Geometry ,同一个 material 没有索引可以使用,合并后变为一个个体 ,难以单独控制

 let geometries = [];
 let transform = new THREE.Object3D();
 for (let index = 0; index < total; index++) {
     let geometry = new THREE.BoxBufferGeometry(Math.random() * 50 + 50, Math.random() * 50 + 50, Math.random() * 50 + 50);
     transform.position.set(Math.random() * 2000, Math.random() * 2000, Math.random() * 2000);
     transform.updateMatrix();
     geometry.applyMatrix4(transform.matrix);
     geometries.push(geometry);
 }
 let mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(geometries);
 let mergedMesh = new THREE.Mesh(mergedGeometry, material2);
 scene.add(mergedMesh);

3.Instance、Merge对比

Instance实例化几何体 Merge合并几何体
Material 相同 相同
Geometry 相同 ✔ 不同
单个控制 ✔ 使用索引,轻松实现 难以实现
生成时间 ✔ 快速 缓慢
渲染性能 较优 ✔ 更优
内存占用 ✔ 极少 较多

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注