arusu0629のブログ

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

WebGLについて⑦

【前回】 arusu0629.hatenablog.com

頂点バッファの基礎
  • ローカル座標
    →頂点がどのように配置されているのかを表した座標
    例:(1.0, 0.0, 0.0) ⇔ 原点からX方向に1.0の距離に存在する
    ※原点を(0.0, 0.0, 0.0)とした場合

  • 頂点バッファ(VBO:vertex buffer object)
    WebGLのプログラム内で、頂点のローカル座標を格納するための入れ物
    他にもフレームバッファやインデックスバッファなどがある

    頂点バッファの役割には位置情報を保持する以外にも、頂点が持つ法線の情報や、に関する情報、他にもテクスチャ座標や頂点の重さなど、ありとあらゆる頂点に関する情報を格納することが出来る

■頂点バッファの処理の流れ

  1. 頂点の各情報を配列に格納
  2. WebGLのメソッドを使ってVBOを作成
  3. WebGLのメソッドを使ってVBOに配列のデータを転送
  4. 頂点シェーダ内のattribute変数とVBOを紐付ける

1.について
頂点の位置情報には(x, y, z)の3つの情報が必要なため頂点数×3の要素数の配列が必要
ここで配列は多次元配列にせず1次元配列にすること。VBOの生成には1次元配列を使う

【まとめ】
WebGLでは実装したい頂点情報の数だけ、頂点バッファ(VBO)が必要になる
頂点情報というのは位置情報だけでなく、色や法線の情報などありとあらゆる頂点に関する情報をVBOに格納することが出来る
頂点シェーダ内で定義されたattribute修飾子付きの変数にVBOを紐付けることが必要

【続き】 arusu0629.hatenablog.com