webGLの基本

シェーダーを書いて単色の正方形を作る

コード全文

シェーダーについて

　解説をします。

　まず、この描画の目的は与えられたキャンバスを水色の単色で塗りつぶすことです。具体的にはrgb(0,128,255)です。そのためにコンテキストを用意して色を塗る命令を出しています。

　本来、webGLの描画にはアトリビュートというシステムを使うんですが、高級な話題なので扱えません。代わりに、組み込み変数であるgl_VertexIDを使います。これは番号です。ドローコールのところで0,4としていますがこれは「0,1,2,3で描画しろよ」という意味です。この0,1,2,3を与えてくれる便利な組み込み変数を使います。

#version 300 es
// 正方形の四隅
const vec2[4] pos = vec2[](
  vec2(-1.0, -1.0), vec2(1.0, -1.0), vec2(-1.0, 1.0), vec2(1.0, 1.0)
);
void main(){
  vec2 p = pos[gl_VertexID];
  gl_Position = vec4(p, 0.0, 1.0);
}

　これ以上ないくらい簡単なバーテックスシェーダですね...gl_VertexIDで定数のベクトルにアクセスします。左下、右下、左上、右上の順になっています。これは正規化デバイス座標と言って、x軸正方向が右でy軸正方向が上です。高校数学でおなじみの座標系かと思います。そして正規化と名の付く通り、プラスマイナス1です。ドローコールのTRIANGLE_STRIPというのは詳しく説明すると面倒なのですがざっくり言うと「0,1,2と2,1,3で三角形を作れ」という意味なので、それで上から見てx軸が最短でy軸に重なる向きが正の向きですから、考えあわせると、2枚の直角二等辺三角形がイメージできるはずです。つまりこの2枚を作れという命令なのです。そこにフラグメントシェーダで色を付けます。

#version 300 es
precision highp float;
// 出力はvec4
out vec4 fragColor;
void main(){
  fragColor = vec4(0.0, 0.5, 1.0, 1.0);
}

　これまたひどく短いですが、一応フラグメントシェーダです。で、水色が出てきました。MAXが1なので、rgbで0,128,255という色は0,0.5,1,1という形で表現されます。out vec4というのは色の出力をvec4形式で表現しているわけです。r,g,b,aですね。色が単一なので単色です。シェーダーの説明は以上です。

プログラムについて

　プログラムについてもざっくり説明します。

　まずいつものようにサイズを決めます。400x400としましょう。コンテキストを取得します。次に、シェーダー文字列でプログラムを作ります。はじめにバーテックスシェーダを作るために、createShaderでシェーダーオブジェクトを作り、ソースコードをアタッチしてコンパイルします。フラグメントシェーダについても同じようにします。この際エラーが出るといけないので、getShaderParameterでコンパイルステータスを確認しています。これにより、vsとfsのいずれで問題が生じているかを知ることができます。

　次に、シェーダーが出そろったらプログラムオブジェクトを生成します。これにvsShaderとfsShaderをアタッチします。最後にリンクします。リンクでプログラムができあがります。この際エラーが出るといけないので、getProgramParameterでリンクステータスを確認しています。これにより、リンキングに問題がないか知ることができます。

　早速使ってみましょう！useProgramを使うとプログラムを走らせることができます。これにより、紐付けられたキャンバスに描画することができます。ほんとはいろいろできるんですが今回はドローコールしかしないので、ドローコールをします。drawArraysは文字通り連番に対して実行します。0,4なので「0から4つ」処理します。0,1,2,3ですね。TRIANGLE_STRIPについては先ほど説明した通りです。2枚の直角二等辺三角形が描画されます。色が付きます。出来ました。
　おまじないでflush()を実行します。今回はこれで終わりです。

参考になるサイト

　言わずと知れたwebGLのすごくためになるウェブサイトです。webGLを勉強するならこのサイトで勉強するのが良いと思います。自分はこんな丁寧に説明できないので。ただアトリビュートを正面から扱っていて、それを扱えない限り最初の描画にたどり着けないので若干ハードルは高めです（というかwebGL1の頃はそうだったので...）。加えてカメラも扱っていますし。大変だと思います。FIGHT!

　読んで字のごとく、webGLを基本から取り扱っています。基本的な仕組みについての非常に詳しい解説が載っています。webGLで引っかかったことがあれば、ここを見ればいいと思います。基本的過ぎてハードルが高いかもしれないですが...自分はテクスチャの説明が分かりやすかったので凄く参考になりました。

　習うより慣れろ、というか。まずは色々遊んでみることですね。自分がwebGLを始めたきっかけは双曲タイリングです。こういうのです。明らかに2Dではできないように感じたので、色々調べてたらp5のcreateShaderというのがあって遊び始めました。そんな感じで遊んで、色々調べて、気になったら調べて、ってやっていけば自然と興味が惹かれてくると思います。エンジョイしてください。

　今日はこんなところで。ではまた。