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 사용 )