WebGLについて⑨
モデルデータと頂点属性
- 頂点属性
→頂点が持つ様々な要素のこと
例:位置情報、頂点色、法線、テクスチャ座標
■VBOの生成
- まずVBOの元になるバッファオブジェクトを
createBuffer
メソッドを用いて生成する - バッファを操作するにはWebGLにバインドする必要があるため
bindBuffer
メソッドを使ってバインドする。第1引数に組み込み定数のgl.ARRAY_BUFFER
を指定することでVBOが生成できる - 続いて生成したVBOに頂点情報として渡された
data
をセットするためにbinderData
を実行する。その際にFloat32Array
で配列を作り直しているのは浮動小数点を扱うためである gl.STATIC_DRAW
という組み込み定数はそのバッファがどのような頻度で内容を変更されてるのかを定義する。VBOの場合は、基本的にモデルデータはそのままで何度も利用することになるためこの定数を指定する- WebGLにバインド出来るバッファは1度に1つだけなので、他のバッファに操作を加える場合は適宜バッファをバインドし直すため、最後にバッファのバインドを無効にして予期せぬエラーを発生させないようにする
【まとめ】
WebGLでは頂点について自由に属性を付加することが出来る。付加した属性の数だけVBOが必要になる
頂点属性のデータは1次元配列として用意する。その配列データをもとにVBOを生成する
まずはバッファを作り、WebGLにバインドすることで操作を可能にした後で、配列データをバッファにセットしてVBOを生成する。バインドは1度に1つしか出来ないため、操作が終わった後にはバインドを解除して予期せぬエラーを防ぐ
【続き】
arusu0629.hatenablog.com