四角形を描画する

 グラデーションのかかった四角形を描く

頂点に色の情報を持たせることでグラデーションのかかった四角形を描画しました。三角形を構成する頂点の間に存在するピクセルでは補完をした値が渡ってくるために中間色が現れます。3つの頂点の色を同じにすれば均一な色になります。この補完処理は重要ですが、自動で行われるため理解するのが難しいと思います。

左上：赤

左下：緑

右上：青

右下：黄

で2つの三角形で四角形が表示されています。ライブラリを使うのが嫌だったので、行列変換は使わずクリップ座標を直接指定しました。（w=1.0なので、NDCを直接指定したとも言える。）

エラー処理をtry～catchを使って行いました。一番上のところでエラーを補足したら、とりあえずアラート表示して即終了しています。

JavaScriptはあまり経験がないので、このように書いて良いんだろうかという疑問があります。

四角形を描くだけでこれだけ長いソースが必要になるとは……

エンジンとか使わずにやると大変です。低レベルの処理が描けると、とても自己満足感は得られました。

ソース

Gistを使って表示しています。1つのGistリポジトリに複数のファイルを投稿することもできるようです。（左下にあるAdd fileを押して項目を増やすようにします。）

参考

wgld.org

『ポリゴンに色を塗る(頂点色の指定)』

作者が日本人で全文日本語での解説が載っています。日本語というだけでもありがたいですが、わかりやすく説明されていています。扱っている内容も初歩から応用まで幅広いです。サンプルコードがあること、ライブラリをあまり用いないということで学習の教材として素晴らしいと思います。

MDN Web docs

『シェーダーを用いた WebGL での色の指定』

チュートリアルは日本語で解説されていてわかりやすいです。このサイトは解説もありますが、リファレンスが中心だと思います。

Khronos Group

『WebGL Specification』

仕様です。当然、英語です。

わかりやすい解説はないですが、どのようになっているのかを明確に答えてくれます。OpenGL ES 2.0を知ってないと、たぶんよくわからない気がします。