WebGL は OpenGL ES 2.0 から派生した仕様で、シェーダの記述には GLSL ES が使われています。シェーダをざっくり説明すると、頂点の位置と色を変化させることです（自分はそう理解しています）。

シェーダには頂点シェーダとフラグメントシェーダの 2 種類があります。OpenGL の場合はもっと色んな種類のシェーダがあるっぽいです。でも WebGL の場合はこの 2 つ。

頂点シェーダ

一回のイテレーションの中で JavaScript 側から WebGL 側にわたす頂点の位置情報を読み取って、クリップスペースに描画していく処理。WebGLFundamentals というサイトにあるこの GIF が超絶分かりやすかったです。WebGL 側に送った頂点情報を、組み合わせごとに一つずつ描画していく様子が描かれています。

gl_Position という組み込み変数に渡して canvas 上の座標を決めるんですが、それにあたって、いくつか変数を定義しています。

- attribute … 頂点1つあたりの座標計算に使う変数
- uniform … シェーダの実行全体を通して使うグローバル変数
- varying … フラグメントシェーダに渡す変数

これらを駆使してなんやかんや頂点をチャキチャキ描画していきます。

フラグメントシェーダ

さきほど varying という変数でも触れたんですが、フラグメントシェーダは各頂点の色情報を決めていくシェーダです。各頂点の色が決まると、その頂点たちを結ぶ線の間の色を自動で補間（interpolate）してくれるそうです。

上記の画像のように頂点同士の色をうまい感じにグラデーションで補ってくれていますね。

だいたいこんな感じでシェーダは動いています。なので冒頭言ったように頂点の位置と色を変化させるのがシェーダの主な仕事ですね。

今日はここまで。今後はテクスチャを貼り付けるとかビルトインの関数とかの知識を整理していきたいなと思っています。いやあ、覚えることたくさんや…。