【WebGL】デイリーコーディング5日目

～～～5日目～～～

今日はこんな絵を出しました。これはインデックスバッファを用いて描画しています。



赤い点が書いてある頂点は2つの三角形のうち重なっている頂点です。
四角形を作る場合は三角形が2つ必要になり、頂点でいうと合計6つの頂点が必要になります。
見た目的には頂点は4つあれば良いですが、普通にシェーダーを書いてモデルを
作ると6つ必要です。
一般的にモデルを作るとき、ポリゴンは四角ポリゴンを使っていくようで、
四角ポリゴンを作るとなると三角ポリゴンを2つ使います。
簡単なモデルなら頂点数はそこまで増えませんが、複雑なモデルとなると頂点数は膨れ上がってきます。
こういうときに頂点数を削減する方法としてインデックスバッファを使います。

インデックスバッファは頂点のインデックス情報を格納するもので、頂点を再利用する時に使用します。
インデックスバッファはGPU上のメモリ領域に直接確保され、描画のたびにGPUにデータを送信しなくてもよくなるので動作も高速化するみたいです。すごくありがたいです。

var index = [
0, 1, 2,
1, 2, 3
];

var ibo = create_ibo(index);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);

//----------中略-------------
gl.drawElements(gl.TRIANGLE, index.length, gl.UNSIGNED_SHORT, 0);
gl.flush();
//----------------------------

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);
   return ibo;
}

インデックスバッファに関連するコードはこの辺です。

今までgl.drawArrays()で頂点を描画していた部分がgl.drawElements()になっています。ここでインデックスバッファを使用して描画をしているようです。
このチュートリアルの後に出てくる、トーラスというドーナツのような形を
描画する時にもインデックスバッファを使用しているのですが、今回のように配列を書いて～ということはしていませんでした。
頂点を計算する際にインデックスバッファも一緒に算出していました。
インデックスバッファの算出方法にも工夫が必要みたいです。

～～～所感～～～

だいぶWebGLのAPIに慣れてきた感があります。(基礎だけど)
まだまだ氷山の一角ですら到達できていないのでとにかく続けてみようと思います。
ライティングは本一冊どころでは済まないぐらい奥が深いと聞きます。
気を引き締めていこうと思います。

記録用記事ですが、1日1記事はなかなかしんどいものがありました。
次からは区切りを決めて記録していこうと思います。ゲームも作りたいので...
デイリーコーディングは続けていきます。
現在、始めて20日ぐらいです。体調崩したりで数日できないときがありましたが、ほぼ毎日書いてます。

だんだんと書くことに抵抗がなくなってきました。続けるは正義！