[WebGL] Three.js의 BufferGeometry로 객체 만들기

BufferGeometry 와 BufferAttribute 를 사용하면 비교적 낮은 수준의 API를 의식한 설명이 가능합니다.

다음은 BufferGeometry 를 사용하여 평면을 그리는 샘플 코드입니다.
Three.js가 준비해 주는 머티리얼을 그대로 사용할 수 있거나 하기 때문에 어느 정도 저레벨로 조작하면서도 Three.js의 혜택을 받을 수 있는 것이 클 것입니다.

샘플 코드

// BufferGeometryを生成
var geometry = new THREE.BufferGeometry();

// 平面用の頂点を定義
// d - c
// |   |
// a - b
var vertexPositions = [
    [-1.0, -1.0, 1.0], // a
    [ 1.0, -1.0, 1.0], // b
    [ 1.0,  1.0, 1.0], // c
    [-1.0,  1.0, 1.0]  // d
];

// Typed Arrayで頂点データを保持
var vertices = new Float32Array(vertexPositions.length * 3);
for (var i = 0; i < vertexPositions.length; i++) {
    vertices[i * 3 + 0] = vertexPositions[i][0];
    vertices[i * 3 + 1] = vertexPositions[i][1];
    vertices[i * 3 + 2] = vertexPositions[i][2];
}

// 頂点インデックスを生成
var indices = new Uint16Array([
    0, 1, 2,
    2, 3, 0
]);

// attributesを追加
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.addAttribute('index',    new THREE.BufferAttribute(indices,  1));

var material = new THREE.MeshLambertMaterial({
    color: 0xff0000
});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -10;

scene.add(mesh);

원시 WebGL과 비슷한 느낌으로 쓰면서, 대부분의 코드량이 줄어드는 것을 알 수 있다고 생각합니다.