Geometry 합치기

다수의 Mesh를 scene에서 사용할 때 performance를 향상시키기 위한 방법 중의 하나가 Geometry merge이다.
같은 material를 사용할 때 가능한 방법으로 다수의 mesh를 사용하는 것이 아니라 다수의 geometry를 생성하여 하나로 병합한 후에 mesh 하나만을 사용하는 것이다.

기존의 방법

var scene = new THREE.Scene();

var cubeGeo = new THREE.BoxGeometry(10, 10, 10);
var material = new THREE.MeshNormalMaterial();

for (var i = 0; i < 10000; i++) {
  var mesh = new THREE.Mesh(cubeGeo, material);
  mesh.position.x = -200 + Math.round(Math.random() * 400);
  mesh.position.y = -200 + Math.round(Math.random() * 400);
  mesh.position.z = -200 + Math.round(Math.random() * 400);
  scene.add(mesh);
}

Geometry의 merge

var scene = new THREE.Scene();

var mergedGeo = new THREE.Geometry(); // 하나로 병합할 geometry 생성
var cubeGeo = new THREE.BoxGeometry(10, 10, 10);
var material = new THREE.MeshNormalMaterial();

for (var i = 0; i < 10000; i++) {
  var mesh = new THREE.Mesh(cubeGeo, material);
  mesh.position.x = -200 + Math.round(Math.random() * 400);
  mesh.position.y = -200 + Math.round(Math.random() * 400);
  mesh.position.z = -200 + Math.round(Math.random() * 400);

  // THREE.GeometryUtils.merge(mergedGeo, mesh); // 구 버전에서는 Geometry를 합치려면 이 메서드를 사용해야 한다.
  mesh.updateMatrix(); // 반드시 matrix을 업데이트 한다.
  mergedGeo.merge(mesh.geometry, mesh.matrix); // geometry의 메서드인 merge를 사용하여 mergedGeo에 병합한다.
}

var mergedMesh = new THREE.Mesh(mergedGeo, material); // mergedGeo를 사용하여 mesh를 생성한다.
scene.add(mergedMesh);

(Three.js v79 사용)

https://302chanwoo.com/lab/three/merge_geometry.html