模型数量与性能

通过前面两节课学习，大家都知道，三维场景中网格模型的三角形面数或者说顶点数量，会影响GPU的渲染性能。网格模型三角形面数越多，占用的GPU硬件资源越多。

// 生成百万级、千万级顶点数据量，测试性能
for (let i = 0; i < 3; i++) {
    const geometry = new THREE.PlaneGeometry(20,20,2000,2000); 
    const material = new THREE.MeshBasicMaterial();
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
}

本节课给大家讲解下，Mesh数量对渲染性能影响。

性能测试

控制长方体模型数量，你可以逐渐增加或减少,看看帧率变化，电脑性能不同结果不同。

可以把收费站模型添加到场景代码注释或删除，仅仅测试立方体

// 随机创建大量的模型,测试渲染性能
const num = 1000; //控制长方体模型数量
for (let i = 0; i < num; i++) {
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshLambertMaterial({
        color: 0x00ffff
    });
    const mesh = new THREE.Mesh(geometry, material);
    // 随机生成长方体xyz坐标
    const x = (Math.random() - 0.5) * 30
    const y = (Math.random() - 0.5) * 30
    const z = (Math.random() - 0.5) * 30
    mesh.position.set(x, y, z)
    scene.add(mesh);
}

更改上面代码，把模型数量减少，增加立方体细分数，保持顶点总数量接近对比性能差异。

// 随机创建大量的模型,测试渲染性能
const num = 100; //控制长方体模型数量
for (let i = 0; i < num; i++) {
    const geometry = new THREE.BoxGeometry(1, 1, 1,10);
    ...
}

递归遍历统计收费站模型总数量

let num = 0;
gltf.scene.traverse(function (obj) {
    if (obj.isMesh) {
        num += 1;
    }
})
console.log('收费站Mesh数量',num);

建模软件Blender也能查看模型数量，不过注意Blender默认统计的也包含非Mesh的对象，比如相机、Mesh的父对象节点，不过也可以大概判断总数量情况。

总结

实际开发时候，GPU性能渲染的瓶颈，不一定仅仅是模型三角形面数，还要考虑数量。

实际开发时候，三维场景中如果有很多材质相同的Mesh，其中单个Mesh顶点数量很少，但是总数量比较多，单个Mesh也不需要通过.getObjectByName()单独获取，这时候可以在建模软件中合并这些Mesh。

减少Mesh的数量，意味着threejs渲染模型时候，减少绘制次数，提升渲染性能。

Blender模型合并演示

选择多个Mesh:

• 方式1：Shift快捷键+鼠标点击，选择多个模型。
• 方式2：右侧目录树：右键父节点，点击选择层级
• 方式3：选择——选择相连元素——材质 (或者快捷键Shift + L)

合并多个Mesh，转化成一个Mesh：物体——合并 (或者快捷键Ctrl + J)