InstancedMesh合批

50000个随机长方体

普通mesh

    private addTestObjects(): void {
        const geometry = new BoxGeometry();
        geometry.translate(0, 0.05, 0);
        const material = new MeshPhongMaterial({
            color: 0xeeeeee,
            flatShading: true,
        })
        for ( let i = 0; i < 50000; i ++ ) {

            const mesh = new Mesh( geometry, material );
            mesh.position.x = Math.random() * 1600 - 800;
            mesh.position.y = 0;
            mesh.position.z = Math.random() * 1600 - 800;
            mesh.scale.x = 20;
            mesh.scale.y = Math.random() * 80 + 10;
            mesh.scale.z = 20;
            mesh.updateMatrix();
            mesh.matrixAutoUpdate = false;
            this.scene.add( mesh );

        }
    }

帧率在20以下

InstancedMesh

    private addInstanceMeshObjects(): void {
        const geometry = new BoxGeometry();
        const material = new MeshPhongMaterial({
            color: 0xeeeeee,
            flatShading: true,
        })
        const meshs = new InstancedMesh(geometry, material, 50000);
        for ( let i = 0; i < 50000; i ++ ) {
            const mesh = new Mesh(geometry, material);
            mesh.position.x = Math.random() * 1600 - 800;
            mesh.position.y = 0;
            mesh.position.z = Math.random() * 1600 - 800;
            mesh.scale.x = 20;
            mesh.scale.y = Math.random() * 80 + 10;
            mesh.scale.z = 20;
            mesh.updateMatrix();
            mesh.matrixAutoUpdate = false;
            meshs.setMatrixAt(i, mesh.matrix);
        }
        this.scene.add(meshs);
    }

帧率稳定在60帧

InstancedMesh