WebGL シェーダー

3次元空間を2次元画面で表示するためには座標計算と呼ばれる一連の計算が必要。
モデル変換：被写体となる物体が３次元空間のどの位置にあるのか
ビュー変換：カメラがどの位置でどの方向をむいているのか
プロジェクション変換：３次元空間のどの領域を撮影するのか

WebGLには座標変換を記述する仕組みとしてシェーダがあり、シェーダー言語のGLSLを使える。

シェーダーとは

シェーダーとは、物体そのものがどのように見えるか、形や色や表面の模様などの設定項目。
WebGLには 頂点シェーダーと フラグメントシェーダーの２種類がある。

頂点シェーダー:頂点に関する情報をもっている。（位置情報や、頂点の色など）
フラグメントシェーダー:どんな色を出力するのかを決める

書き方1 頂点シェーダー

頂点シェーダーもフラグメントシェーダーも mainという関数の中に記述していく。
gl_Positionに頂点データを渡す。

attribute vec3 position;

void main(void) {
    gl_Position = position;
}

attributeは頂点ごとに異なるデータを受け取るための仕組み（修飾子）。あらかじめデータを仕込んでおきシェーダーに渡す。

書き方2　頂点シェーダーの座標変換

一連の座標変換を行う。
1で得た頂点データに変換行列を掛け合わせる。

attribute vec3 position;
uniform mat4 mvpMatrix;

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

WebGL側でモデル、ビュー、プロジェクションの行列を生成し掛け合わせておいて座標変換行列を作っておき。 uniform修飾子付きの変数に渡す。

書き方3　フラグメントシェーダー

varying修飾子を使って頂点シェーダーとフラグメントシェーダーの橋渡しをする。
頂点シェーダーが持つ色の情報を、画面上の色を操作するフラグメントシェーダーに渡す必要があるため。

ーー頂点シェーダーーー

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

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

頂点シェーダの色情報を持つcolorと橋渡しの役割を行うvarying修飾子付きのvColorを追記

ーーフラグメントシェーダーーー

varying vec4 vColor;

void main(void)
{
    gl_FragColor = vColor;
}

gl_FragColorにデータを代入。
gl_Positionと異なりgl_FragColorへの代入は必須ではないが、基本的に入れているみたい。