十分钟笔记分享：threejs的网格合并优化

周末写了个云，因如下案例中整片本身需要用到几千个网格对象。因用到了网格合并特此记录一下

three针对网格的统一逻辑管理有两种方式

1. 利用group
2. 网格合并

首先说一下，逻辑上为什么需要统一管理。eg：我有一片草地或森林，我想对他们整体进行一些几何变换操作。如position修改。

如果按照每一颗树或草为颗粒度的话，设置起来那便比较繁琐。如果统一成组那便只需要操作一个mesh了

当然这只是合并在逻辑操作上的好处，这里我们主要来对比一下网格合并较于group方案的优点

虽然说上面两种方式都能实现网格对象的统一管理，但是在性能表现上group便显的逊色太多。因为本质上它也没有针对性能上的任何优化操作

性能表现上我们来具体举个例子，让我们随机渲染10万个立方体，分别来看一下这两种方式的表现如何

group的方式

merge

此时因为有控制器的原因(主要也有我内部封装射线拾取的主要影响)，动态时的表现都不理想但是也可发现。合并方案比之group性能要高上10-20帧率

下面我们再看一下静态时，不触发控制器，也不触发拾取操作

group

merge

此时从帧率表现和cpu使用上，merge完爆group

对比代码

group

import { Group, Mesh, SceneControl as Scene, BoxGeometry, MeshBasicMaterial, BufferGeometryUtils } from 'thunder-3d'


/**
 * example-01
 * base usage
 */

const scene = new Scene({
  orbitControls: true,
})

const group = new Group()

for (let index = 0; index < 100 * 100 * 10; index++) {
  const geometry = new BoxGeometry(2, 2, 2)
  const material = new MeshBasicMaterial({ color: 0x00FF00 })
  const box = new Mesh(geometry, material)

  box.position.x = Math.random() * 1000 - 500
  box.position.y = Math.random() * 1000 - 500
  box.position.z = Math.random() * 1000 - 500

  group.add(box)

}

scene.add(group)

scene.render(document.querySelector('#app')!)
scene.startFrameAnimate()

merge

import { Group, Mesh, SceneControl as Scene, BoxGeometry, MeshBasicMaterial, BufferGeometryUtils } from 'thunder-3d'


/**
 * example-01
 * base usage
 */

const scene = new Scene({
  orbitControls: true,
})


const geometryArray = []


for (let index = 0; index < 100 * 100 * 10; index++) {
  const geometry = new BoxGeometry(2, 2, 2)

  geometry.translate(Math.random() * 1000 - 500, Math.random() * 1000 - 500, Math.random() * 1000 - 500)
  geometryArray.push(geometry)

}

const geometryMerge = BufferGeometryUtils.mergeGeometries(geometryArray, false)
const material = new MeshBasicMaterial({ color: 0x00FF00 })
const box = new Mesh(geometryMerge, material)

scene.add(box)

scene.render(document.querySelector('#app')!)
scene.startFrameAnimate()

ps: 代码部分是使用的笔者最近在写的一个threejs助手库：github.com/gong9/thund…