参考webglorg;
原則として上記ページを見ながら学習した記録です。

GLSLについて知る

GLSL は OpenGL との親和性を持つシェーダ記述言語で、C 言語ライクな独自の文法によって記述する。

シェーダの役割

頂点シェーダには、頂点に関する情報の全てを渡すことができる。頂点の位置情報や、頂点が持つ法線、テクスチャ座標、頂点の色など、頂点に関する情報の全てをシェーダに渡すことが可能。

ちなみに頂点の座標は必須。

フラグメントシェーダは画面にどんな色を出力すればいいのかを決めることができる。

GLSL基礎

必ずmain関数を定義し、その中に処理を記述する。
また、頂点シェーダーではgl_Positionという組み込み変数に頂点データを渡さねばならない。

attribute vec3 position;

void main(void) {
    gl_Position = position;
}

attribute装飾子

attribute という修飾子を付けて宣言された変数(上記の場合なら position)が、頂点の情報をシェーダ側で受け取る変数になる。
attribute 修飾子は、頂点ごとに異なるデータを受け取るためのもの。
たくさん存在する頂点は、それぞれ位置情報などが異なっている。そういった頂点ごとに異なるデータを受け取るための仕組みが attribute 修飾子付き変数である。

座標変換もGLSL

uniform 修飾子を使うと、全ての頂点に対して一律に処理される情報を渡すことが可能になる。

attribute vec3 position;
uniform mat4 mvpMatrix;

void main(void) {
    gl_Position = mvpMatrix * position;
}

ここで出てきている mvpMatrix というのは、モデル・ビュー・プロジェクションのそれぞれの変換行列を掛け合わせた座標変換行列。
その座標変換行列を uniform 修飾子付きの変数に WebGL 側から渡してあげる。

フラグメントシェーダーとの連携

頂点シェーダーとフラグメントシェーダーの橋渡しをする装飾子がvarying 装飾子。

attribute vec4 position;
attribute vec4 color;
uniform mat4 mvpMatrix;
varying vec4 vColor;

void main(void) {
    vColor = color;
    gl_Position = mvpMatrix * position;
}

varying vec4 vColor;
void main(void) {
    gl_FragColor = vColor;
}

このように、頂点シェーダからフラグメントシェーダにデータを渡したい場合には varying 修飾子付きの変数を使い、そしてgl_FragColor にデータを代入する。

頂点バッファ

ローカル座標

頂点の位置情報は必ず持っていなければならないもの。

頂点は、最終的に画面上に描画される際には、モデル座標変換やビュー座標変換、プロジェクション座標変換などを経て描画されることになる。

頂点群がどのように配置されているのかを表した座標を、一般にローカル座標と呼ぶ。

格納するもの

頂点情報を格納する入れ物が頂点バッファ。
OpenGLではVBO(vertex buffer object)と呼ぶ。

頂点バッファは一つというわけではない。

頂点バッファには頂点に関するあらゆる情報を格納できる。
法線、色、テクスチャ座標、頂点の重さ、などなど。
つまり個別にVBOがいるということ。

頂点バッファと attribute

attribute 変数にデータを渡す役割を担うのが VBO。

まずは VBO に頂点データを格納しておき、どのVBOが、どのattribute変数に関連付けられてるのかをシェーダに通知する。

時系列順に並べると

頂点の各条をいったん配列に格納
WebGLのメソッドを使ってVBOを作成
WebGLのメソッドを使いVBOに配列のデータを転送
頂点シェーダ内のattribute変数とVBOを紐付ける

WebGL学習記録(2) GLSLについて