大まかな流れ

・Javascriptでシェーダのソースコードを読み込み、シェーダオブジェクトを生成する。そのシェーダオブジェクトをプログラムオブジェクトとリンクさせる。
・プログラムオブジェクトがCPUとGPUの橋渡しな存在になってくれる
・ようやくあとはGLSLを書いて描画していく

これらを全て生WebGLでやろうとするとかなりコードを書く必要があり面倒なので、多くの人はthree.jsやpixi.jsなどのライブラリを使用している感じ。

・イメージ的にはGPUはwebサーバみたいなもので、事前に送信済みのデータしか使うことができない。そのためJS側からデータをアップするかの如くGPU に VBO の情報を送り込んでおいてあるからこそ、それを GPU は描画することができる。

・シェーダの種類

・頂点シェーダ
- 頂点の個数分だけ頂点ごとに実行される(頂点数が増えると処理が増えて重くなる)

・フラグメントシェーダ
- 描画するピクセル単位で実行される
頂点によって塗られることになるピクセルひとつひとつがフラグメントシェーダの処理対象となる

・頂点シェーダとフラグメントシェーダのうち、先に呼び出されるのは常に頂点シェーダ

・頂点シェーダがまず最初に形を作り、そのあとの行程で「色を塗るべきだと判断されたピクセルに対してのみ」フラグメントシェーダが実行されるようになっている。この処理順序を逆転させることはできない

・頂点シェーダで処理した結果、ひとつも頂点が画面上に描かれなかったとしたら、そのときは、塗るべきピクセルがひとつもないということにな流ので、フラグメントシェーダは一度も実行されない。

GLSL

・GLSL では変数を宣言する際に、以下のようなものを指定。
//変数のデータ型
//変数の種類を表す修飾子
//変数の名前

・attribute

attribute 修飾子は、アプリケーションから送られてきた 頂点の情報 が格納される変数に用いられます。

頂点シェーダは、頂点ひとつひとつに対してそれぞれ実行される。頂点が個別に持っている座標や色などの情報は、頂点シェーダ内では attribute 修飾子付きの変数を参照することで取得できる。

attribute → 頂点の情報を持つ変数

・uniform

uniform 修飾子は、アプリケーション（JavaScript）から渡されるグローバル変数。好きに増やせる。

attribute 修飾子付きの変数は、個々の頂点が持つ固有の情報を持つものだったのに対し、uniform 変数はグローバル変数のように振る舞うため、常にアプリケーションから送られてきた情報は一定であり、どの頂点に対しても均一に作用する。

uniform → 一種のグローバル変数

・varying

頂点シェーダが先にあり、その後、フラグメントシェーダへと値が受け渡され、ピクセル単位での処理が行われる。このとき「値の受け渡し」に使われるのが、varying 変数。

varying → シェーダ間のやり取り用

まとめ -
attribute は、頂点それぞれが固有に持つ情報を格納
uniform はアプリケーションから送られてくるグローバルな情報
varying は頂点シェーダからフラグメントシェーダへの橋渡しをする

その他

・背景をクリアする色の指定は 0.0 ～ 1.0 で指定

・WebGL や GLSL では RGBA は全て 0.0 ～ 1.0 の範囲で表します。

・CSS や HTML では 16 進数を使って #FFFFFF のように表しますが、GLSL では vec4(1.0, 1.0, 1.0, 1.0) が完全に不透明な白に相当します。

・背景をクリアする色の指定を行っている gl.clearColor などでも、同様の値の範囲で色を指定します。