three.js BufferGeometry入門 Part2

前回 : three.js BufferGeometry入門 Part1

前回はBufferGeometryで6個の頂点から3角形を2枚作り4角形を描画した。4角形を描画するのに6個頂点を用意しなくちゃいけないのはメモリの無駄使いだし単純に面倒でもある。インデックスバッファを使えば4角形を作るのに4個の頂点を用意すればよくなるので、その使い方を解説していく。wgld.orgのインデックスバッファによる描画をさくっと読んでおくと理解が250%深まる。というか読んだ前提で解説する。

インデックスバッファで4角形を作る

前回使ったmain01.jsのプログラムから変更点だけ解説する。

まずは4つの頂点を設定し、position attributeを追加する。
main02.js

// ジオメトリの作成
var geometry = new THREE.BufferGeometry();
var numPoints = 4; // ジオメトリを構成する点の数
// 頂点の設定
var positions = new THREE.Float32BufferAttribute(numPoints * 3, 3);
// 四隅に頂点を配置
positions.setXYZ(0, -1.0, 1.0, 0);
positions.setXYZ(1, -1.0, -1.0, 0);
positions.setXYZ(2, 1.0, -1.0, 0);
positions.setXYZ(3, 1.0, 1.0, 0);
// position attributeを追加
geometry.addAttribute("position", positions);

次にインデックスバッファを設定する。

// インデックスの設定
var indices = [
0, 1, 2, // 一枚目の三角形
2, 3, 0 // 二枚目の三角形
];
geometry.setIndex(new THREE.Uint16BufferAttribute(indices, 1));

これで4角形が作れる。超簡単。

インデックスバッファは簡単に言うと、3角形を作る時にどの頂点を使うかをWebGL側に指定するもの。上の例では(0番目, 1番目, 2番目)の頂点で1枚目の3角形を、(2番目, 3番目, 0番目)の頂点で2枚目の3角形を作るように指定している。geometryにインデックスバッファを設定するにはaddAttribute()ではなくsetIndex()を使う。インデックスは頂点とは違い整数データなのでTypedArrayにはUint16を使う。また、インデックスバッファは1つの値で意味をなすのでitemSizeは1になる。

めちゃくちゃざっくりだけどインデックスバッファの解説は以上。