WebGL - シェーダを大雑把に

具体的な知識は後で勉強するとして、とりあえず進めてみる系です。

shader

何かを描画するときに必ず使用するもので、GLSL ES(とりあえずC言語に似ていて、言語と理解しておく)で記述します。

  • 頂点シェーダ: 頂点ごとの処理をするプログラム
  • フラグメントシェーダ: フラグメントごとの処理をするプログラム

フラグメント = ピクセルのこと(WebGL以外ではピクセルシェーダとも呼ぶ)

頂点シェーダ -> フラグメントシェーダ -> カラーバッファ(Canvasに描画される表示領域)の順に処理されます。

点を描く

// 頂点シェーダ
const VSHADER_SOURCE = `  
void main() {  
  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
  gl_PointSize = 3.0;
}`;

// フラグメントシェーダ
const FSHADER_SOURCE = `  
void main() {  
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}`;

頂点シェーダで点の「位置・サイズ」、フラグメントシェーダで「色」を指定します、上の例では座標(0,0,0)に3の大きさの赤い点を描いています。位置をvec4(0.0, 0.0, 0.0, 1.0)のように4つの要素で指定してますが、最後の1.0はとりあえずおまじないとして指定しておき、(0.0, 0.0, 0.0)と同義と理解しておきます。また、3D空間上に描画しているので(x, y, z)の座標を表します。

点の位置を(0.0, 0.0, 0.0)と指定してますが、描画される点はCanvasの中心に位置します。つまり、WebGLでは(0.0, 0.0, 0.0)が中心の座標です。値の範囲はそれぞれ-1.0 ~ 1.0になります。頂点シェーダでgl_Position = vec4(1.0, 0.0, 0.0, 1.0)とすると、点は右端に描画されることになります。vec4(0.0, 1.0, 0.0, 1.0)なら上になります。

フラグメントシェーダではgl_FragColorで色を指定します。これはなんとなくわかりやすいです。vec4()でRGBAを表現します。各色は0.0~1.0で表現します。(1.0, 0.0, 0.0, 0.0)なら赤です。

vec4(0.0, 0.0, 0.0, 1.0) // 黒  
vec4(1.0, 1.0, 1.0, 1.0) // 白  

サンプル: DrawPoint