arusu0629のブログ

UnityエンジニアからiOSエンジニアへ

WebGLについて⑨

【前回】 arusu0629.hatenablog.com

モデルデータと頂点属性
  • 頂点属性
    →頂点が持つ様々な要素のこと
    例:位置情報、頂点色、法線、テクスチャ座標


■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