【WebGL】GLSLの頂点シェーダー(vertexShader バーテックスシェーダー)と頂点データ(attribute,頂点属性)とは？
WebGL(GLSL)を扱うときに必ずでてくる頂点シェーダー(vertexShader、バーテックスシェーダー）とは何か、何に使うのかについて説明します。
また、 attributeについても説明します。
目次から読む
頂点シェーダー(vertexShader、バーテックスシェーダー）とは
頂点シェーダー(vertexShader、バーテックスシェーダー）とは物体の頂点の位置を決定するためのプログラムのことです。 vertexは、頂点という意味の英語です。 具体的にはgl_Positionという特別な変数に格納された値が頂点の位置になります。 三角形なら3点の頂点の位置を決定するというイメージです。 それをGPUの特性を活かして、それぞれの頂点ごとに実行されます。 GPUの特性について、不明な場合は、WebGLとThree.jsの違いって何？を確認してみてください。頂点の位置が決まるときの処理の流れ
JavaScriptから頂点データを転送して、GPU側に描画指示をします。 頂点シェーダが実行されます。たとえばJavaScriptで頂点数を3とした場合、3つの頂点の位置をgl_Positionに代入することでそれぞれの頂点の位置が決定されます。頂点シェーダーのサンプルコード
attribute vec3 position;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 0.6);
}positionは頂点データ
上のコードのpositionは、頂点データと言われ、頂点ごとに保持できるデータをさします。 つまり、頂点データ名です。 三角形なら、3点の頂点データがあります。頂点データ(頂点属性)とは
頂点データ(attributes of vertices, 頂点属性)とは、頂点ごとに保持できる頂点の値のことです。 頂点シェーダそれぞれで異なる値を渡すときに使います。 attributeはWebGLにおいて、データを受け渡しする一つの方法です。 他にも、varyingやuniformがあります。頂点データ(頂点属性)の特徴
頂点データは、ユーザーが定義することができます。 定義できるデータにはたとえばposition(位置座標)、color(色の情報)、normal(法線ベクトル)、uv(UV座標)などがあります。 normalは、法線という面を直行する線の情報が入っています。 UV座標というのは、テクスチャを読み込むことに必要な座標です。 position, uv, normalはすでにThree.jsで定義されていて使うことができます。 BoxGeometryなどのジオメトリのattributesの中にposition,normal,uvがあります。 また、頂点ごとに違う値を設定することができます。attributeというキーワードで定義
頂点データ(属性)は、attributeというキーワードで定義します。vec3は型の情報
vec3は、3つの要素を持つ変数(3次元のベクトルを持つ)として定義しています。クリップ座標（クリップ領域）
WebGLの学習をすすめると、クリップ座標（クリップ領域、Clip Coordinates）という言葉を聞くようになります。 WebGLでブラウザに(canvas要素に)映し出される座標、領域のことです。 x軸、y軸、z軸それぞれを-1から1の範囲で指定します。 -1から1の範囲を超える値を指定した場合、たとえば2と指定すると、画面からその頂点は見えなくなりますが、-1から1の範囲は見える状態になります。頂点位置決定後にフラグメントシェーダが実行
頂点位置決定後に、その後の処理であるフラグメントシェーダが実行されます。 フラグメントシェーダについては、フラグメントシェーダとはを参考にしてみてください。まとめ
- 頂点シェーダー(vertexShader、バーテックスシェーダー）とは、物体の頂点の位置を決定するためのプログラムのこと
- gl_Positionに渡した値が頂点の位置
- 頂点ごとに頂点データ(attribute,頂点属性)を渡すことができる
- 頂点データは、頂点ごとに違う値に設定できる
- 頂点データは、ユーザーが定義できる
- 頂点位置決定後にフラグメントシェーダが実行される