頂点バッファの基礎
ローカル座標
常にゲーム全体の座標でキャラクタを構成するポリゴンの頂点を定義すると無駄
ゲームの場所Aと場所Bにいる、同じキャラクタが別のデータだと無駄
同じキャラクタなら同じデータで表現して、必要に応じて平行移動して配置すればいい
モデル変換を通す前の座標、すなわちキャラクタをモデリングしているときの座標をローカル座標という
頂点の情報を格納するもの
これらの頂点のローカル座標は、WebGL のプログラムのなかで変換され、頂点シェーダに渡されることになります。WebGL には、こういった頂点の情報を扱うための仕組みとして、頂点バッファという頂点情報を格納する入れ物を使います。 バッファ( buffer )とは、データの記憶領域などを表す一般的なコンピュータ用語です。
WebGL には他にも、
フレームバッファ
インデックスバッファ
とかいろいろありますが、
いずれも、何かしらのデータを入れておく、あるいは記憶しておくための領域だと考えることができます。
頂点バッファはそのなかでも、頂点の情報を格納することを目的として利用されるもののことを指し、WebGL では頂点バッファのことを VBO ( vertex buffer object )と呼びます。 頂点バッファは必ずしも一つではない
頂点バッファの役割には、頂点の位置情報を保持すること以外にもいろいろあります。
というのも、頂点バッファには位置情報以外にも、ありとあらゆる頂点に関する情報を格納することが可能だからです。
x,y,zの単なる3次元なベクトルデータと捉えれば、位置以外のデータも入れることができる
たとえば、
頂点が持つ法線の情報
色に関する情報、
他にもテクスチャ座標
頂点の重さなど、
ありとあらゆる情報を頂点バッファを用いることで管理できます。
ただし、注意しなければならない点としては、
頂点に付加する情報の種類一つにつき、個別に VBO が必要であるということです。
つまり、頂点が
位置座標
法線
色
を持っている場合は、VBO は三つ必要になります。
どんなふうに頂点を扱いたいのかによって、VBO は複数必要になることもあるわけですね。
頂点バッファと attribute
実はこの attribute 変数にデータを渡す役割を担うのが VBO です。
WebGL のプログラム本体のほうで、まずは VBO に頂点データを格納しておきます。
その上で、どの VBO が、どの attribute 変数に関連付けられるのかをシェーダに通知することで、頂点シェーダが正しく頂点を処理できるようになります。
流れをまとめると
頂点の各情報をいったん配列に格納
頂点はxyzなので、頂点数×3だけの長さの配列が必要
多次元配列ではなくてflattenされている必要があるのに注意
WebGL のメソッドを使って VBO を生成
WebGL のメソッドを使い VBO に配列のデータを転送
頂点シェーダ内の attribute 変数と VBO を紐付ける
VBOはひとつとは限らないので、各々で行う
頂点にどんな情報を付加するのかは、プログラマがある程度自由に選択できます。
DirectX などでは 柔軟な頂点フォーマット と呼ばれる仕組みがありますが、
WebGL にはそもそも頂点のフォーマットというものがありませんので、プログラマ自身で全部の頂点情報を実装させてやる必要があります。