頂点バッファの基礎
ローカル座標
WebGL では様々な 3D モデルを描画できます。それ以外にも、点や線も描画できますが、どんなものを描画するにしても必ず登場するのが頂点です。
頂点がなければポリゴンはおろか、点や線ですら描画することはできません。ですから、WebGL のプログラミングにおいては頂点情報を扱うことが必須になってきます。そして、頂点には最低限持っていなければならない情報がありましたね。当サイトのテキストでも何度か触れていますが、その必ず持っていなければならない情報とは頂点の位置情報です。
頂点の位置情報が必須とは言っても、それはどのようにして定義されるものなのでしょうか。
頂点は、最終的に画面上に描画される際には、モデル座標変換やビュー座標変換、プロジェクション座標変換などを経て描画されることになります。これはもう何度も解説してきましたね。しかし、これらの座標情報以前に、まず頂点群自体がどのような構成で配置されているのかを定義しなければ、そもそも描画は始まりません。
頂点群がどのように配置されているのかを表した座標を、一般にローカル座標と呼びます。ローカル座標は、モデルを構成する各頂点の X ・ Y ・ Z の各座標が全て 0 の原点を基準として、それぞれがどのような位置に置かれているのかを定義したものです。
たとえば、ローカル座標が (1.0, 0.0, 0.0) の頂点であれば、原点から X 方向に 1.0 の距離に存在するのだということがわかりますね。同様に、それぞれの頂点がどのようなローカル座標になっているのかを順次定義していくことで、頂点の位置情報が形成されるわけです。
頂点の情報を格納するもの
これらの頂点のローカル座標は、WebGL のプログラムのなかで変換され、頂点シェーダに渡されることになります。WebGL には、こういった頂点の情報を扱うための仕組みとして、頂点バッファという頂点情報を格納する入れ物を使います。
バッファ( buffer )とは、データの記憶領域などを表す一般的なコンピュータ用語です。WebGL には他にも、フレームバッファとかインデックスバッファとかいろいろありますが、いずれも、何かしらのデータを入れておく、あるいは記憶しておくための領域だと考えることができます。頂点バッファはそのなかでも、頂点の情報を格納することを目的として利用されるもののことを指し、WebGL では頂点バッファのことを VBO ( vertex buffer object )と呼びます。
頂点バッファは必ずしも一つではない
頂点バッファの役割には、頂点の位置情報を保持すること以外にもいろいろあります。というのも、頂点バッファには位置情報以外にも、ありとあらゆる頂点に関する情報を格納することが可能だからです。
たとえば、頂点が持つ法線の情報や、色に関する情報、他にもテクスチャ座標や頂点の重さなど、ありとあらゆる情報を頂点バッファを用いることで管理できます。ただし、注意しなければならない点としては、頂点に付加する情報の種類一つにつき、個別に VBO が必要であるということです。
つまり、頂点が[ 位置座標 ]と[ 法線 ]と[ 色 ]を持っている場合は、VBO は三つ必要になります。どんなふうに頂点を扱いたいのかによって、VBO は複数必要になることもあるわけですね。
頂点バッファと attribute
前回のテキストでは、頂点シェーダ側でデータを受け取る仕組みとして attribute 修飾子付き変数を解説しましたね。
実はこの attribute 変数にデータを渡す役割を担うのが VBO です。WebGL のプログラム本体のほうで、まずは VBO に頂点データを格納しておきます。その上で、どの VBO が、どの attribute 変数に関連付けられるのかをシェーダに通知することで、頂点シェーダが正しく頂点を処理できるようになります。
ここまでを踏まえて、頂点バッファに関する処理がどのような流れで行なわれていくのかを時系列に並べてみると、おおよそ次のような流れになります。
- 頂点の各情報をいったん配列に格納
- WebGL のメソッドを使って VBO を生成
- WebGL のメソッドを使い VBO に配列のデータを転送
- 頂点シェーダ内の attribute 変数と VBO を紐付ける
VBO を生成する過程で、まず最初にやらなければならないのは配列にデータを格納することです。頂点の[ 位置 ]情報であれば X ・ Y ・ Z の要素を持っていなければならないわけですから、頂点の数 x 3 の要素数を持つ配列が必要になりますね。このとき注意する点としては、配列は多次元配列にしないようにすることです。あくまでも VBO の生成には単次元の配列を使います。
頂点情報を持った配列が準備できたら、WebGL コンテキストのメソッドを使って VBO を生成します。生成した VBO は当然ながら中身が空っぽなので、そこに配列の頂点データを転送してやります。
その後、頂点シェーダ内にある attribute 変数と VBO を紐付けする作業が必要です。先ほども書いたように、VBO は必ずしも一つとは限りません。位置情報の他にも、法線や色などの情報がある場合には適宜 VBO を用意し、どの VBO がどの attribute 変数と関連するのかを WebGL に通知してやります。
まとめ
さて、頂点バッファについて理解できたでしょうか。
頂点にどんな情報を付加するのかは、プログラマがある程度自由に選択できます。DirectX などでは[ 柔軟な頂点フォーマット ]と呼ばれる仕組みがありますが、WebGL にはそもそも頂点のフォーマットというものがありませんので、プログラマ自身で全部の頂点情報を実装させてやる必要があります。
実装したい頂点情報の数だけ、VBO が必要になります。VBO の生成方法や、配列からのデータの転送方法などの詳細は次回以降にしっかりと解説します。まずは大まかな流れをざっくりとで構いませんので理解しておいてください。
一番理解に苦しむと思われるのが attribute 変数との紐付けだと思いますが、ここも先々、必ず補完して解説します。今回はまずは頂点バッファというものがどんな役割を持っているのか、なんとなくわかっていただければそれで十分です。
次回は、座標変換に欠かせない行列の演算方法について解説します。ここさえ乗り切れば、いよいよ画面上にポリゴンが表示できます。お楽しみに。
