インデックスバッファによる描画
複雑化するモデルに対応するために
IBO の生成
インデックスバッファを生成する手順は、頂点バッファのときと似ています。
いくつかの引数などが変化しますが、基本的には同じような流れでインデックスバッファを生成できます。
今回のサンプルで新しく定義するオリジナル関数、 create_ibo を見ながら考えてみましょう。
オリジナル関数 create_ibo
code:js
// IBOを生成する関数
function create_ibo(data){
// バッファオブジェクトの生成
var ibo = gl.createBuffer();
// バッファをバインドする
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
// バッファにデータをセット
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int16Array(data), gl.STATIC_DRAW);
// バッファのバインドを無効化
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
// 生成したIBOを返して終了
return ibo;
}
VBO を生成したときと同様、まずは createBuffer メソッドを使って空のバッファオブジェクトを生成します。
その後、そのバッファをバインドするわけですが
bindBuffer メソッドの第一引数には VBO のときとは違う組み込み定数を指定します。
vboはgl.ARRAY_BUFFERだった
この定数を指定するとそのバッファは IBO として扱われます。
バッファがバインドできたらインデックスデータをバッファに割り当てます。
ここでも若干 VBO のときとは違う部分
第2引数の配列がFloat32ArrayじゃなくてInt16Array
これはインデックスは整数でいいから
インデックスデータ配列の例
code:js
var index = [
0, 1, 2,
1, 2, 3
];
頂点が四つある場合、上記のようにすることで
一つ目の三角形ポリゴンを[ 0, 1, 2 ]の頂点で、
二つ目の三角形ポリゴンを[ 1, 2, 3 ]の頂点で
描画するという意味になります。
頂点のインデックスは 0 から始まる
flattenなのはvboのときと同じ
描画まわりの変更点
さて、インデックスバッファを生成するところまでは理解できたでしょうか。続いては実際にインデックスバッファを使う場合の手順について解説しましょう。
IBO を使ったレンダリングを行なう場合には、事前に IBO を WebGL にバインドしておく必要があります。
IBO をバインドするコード
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
ただしバインドしただけでは IBO を使った描画は行なわれません。
もう一つ、描画命令にも修正を加える必要があります。
今までは、ポリゴンのレンダリングには drawArrays メソッドを使っていましたね。
IBO を使って描画を行なうためには、 drawElements メソッドを使います。
このメソッドを使って描画を行なう際の一例を示すと、以下のようになります。
drawElements を用いた描画命令の例
gl.drawElements(gl.TRIANGLES, index.length, gl.UNSIGNED_SHORT, 0);
この drawElements メソッドは四つの引数を取ります。
第一引数にはどのように頂点をレンダリングするのかを表す組み込み定数
第二引数にはインデックスデータの要素数
上の例なら6であり、2ではない(三角形の数ではなく、純粋にindexの数)
第三引数にはインデックスデータのデータサイズ
第四引数には使うインデックスデータのオフセット
を指定します。