Webgl-associating-attributes-buffer-objects

提供:Dev Guides
移動先:案内検索

属性とバッファオブジェクトの関連付け

頂点シェーダープログラムの各属性は、頂点バッファーオブジェクトを指します。 頂点バッファオブジェクトを作成した後、プログラマはそれらを頂点シェーダプログラムの属性に関連付ける必要があります。 各属性は、データ値を抽出する1つの頂点バッファーオブジェクトのみを指し、これらの属性はシェーダープログラムに渡されます。

頂点バッファーオブジェクトを頂点シェーダープログラムの属性に関連付けるには、以下の手順に従う必要があります-

  • 属性の場所を取得する
  • 属性を頂点バッファーオブジェクトに向ける
  • 属性を有効にする

属性の場所を取得する

WebGLは、属性の場所を返す* getAttribLocation()*というメソッドを提供します。 その構文は次のとおりです-

ulong getAttribLocation(Object program, string name)

このメソッドは、頂点シェーダープログラムオブジェクトと頂点シェーダープログラムの属性値を受け入れます。

次のコードスニペットは、このメソッドの使用方法を示しています。

var coordinatesVar = gl.getAttribLocation(shader_program, "coordinates");

ここで、 shader_program はシェーダープログラムのオブジェクトであり、 coordinates は頂点シェーダープログラムの属性です。

属性をVBOに向ける

バッファオブジェクトを属性変数に割り当てるために、WebGLは* vertexAttribPointer()*というメソッドを提供します。 このメソッドの構文は次のとおりです-

void vertexAttribPointer(location, int size, enum type, bool normalized, long stride, long offset)

このメソッドは6つのパラメーターを受け入れます。これらについては以下で説明します。

  • 場所-属性変数の保存場所を指定します。 このオプションでは、* getAttribLocation()*メソッドによって返される値を渡す必要があります。
  • サイズ-バッファオブジェクトの頂点ごとのコンポーネントの数を指定します。
  • タイプ-データのタイプを指定します。
  • Normalized -これはブール値です。 trueの場合、非浮動データは[0、1]に正規化されます。それ以外の場合は、[-1、1]に正規化されます。
  • ストライド-異なる頂点データ要素間のバイト数、またはデフォルトのストライドの場合はゼロを指定します。
  • Offset -頂点データの格納元のバイトを示すために、バッファオブジェクトのオフセット(バイト単位)を指定します。 データが最初から保存されている場合、_offset_は0です。

次のスニペットは、プログラムで* vertexAttribPointer()*を使用する方法を示しています-

gl.vertexAttribPointer(coordinatesVar, 3, gl.FLOAT, false, 0, 0);

属性を有効にする

頂点シェーダーアトリビュートをアクティブにして、頂点シェーダーのバッファオブジェクトにアクセスします。 この操作のために、WebGLは* enableVertexAttribArray()*メソッドを提供します。 このメソッドは、パラメーターとして属性の場所を受け入れます。 プログラムでこのメソッドを使用する方法は次のとおりです-

gl.enableVertexAttribArray(coordinatesVar);