【WebGL】デイリーコーディング1日目
GLSLを毎日書く
こちら
シェーダーアドベントカレンダー Advent Calendar 2019 20日目
northprintさんの「GLSLを毎日書く」という記事に触発されました。
そこで自分もnorthprintさんを習ってデイリーコーディングしてみようと思いました。
記録用にやったこと、所感などを書いていこうと思います。
私はシェーダー初学者です、なので初歩的なことから始めます。
今回、デイリーコーディングの題材にさせていただくのは
doxasさんのサイトです。(2012年から書かれてる...すごい...)
解説読みつつサンプルコードを書きます。自分なりにコードを変更するのも効果的なようです。
ちょっと前に読み進めてたのですが挫折したので振り出しからやり始めました。
【開発環境】
～～～1日目～～～
まず三角形を出すところからです。
2か月前に少しだけ勉強したときには、「三角形だけでこんなにコードを書くのか...」
と驚きました。
Vulkanとかだともっと記述量が増えるみたいです。
今日はこちらの解説を読みサンプルを書きます。
attribute vec3 position;
uniform mat4 mvpMatrix;
void main(void)
{
gl_Position = mvpMatrix * vec4(position, 1.0);
}
バーテックスシェーダーのコードです。
attributeとuniform大切
attributeで宣言された変数に頂点情報が、
uniformで宣言された変数にモデル、ビュー、プロジェクションを掛け合わせた
座標変換行列が格納されるみたいです。
座標変換行列に頂点の座標を掛け合わせた結果をgl_Positionに渡すことで画面上に頂点が描画されます。
void main(void)
{
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
フラグメントシェーダーのコードです。
バーテックスシェーダーと違って変数が出てきてないですが
これで最低限色を塗ることができるみたいです。
gl_FragColorにはColorと書いてある通り色情報を渡します。
三角形が出ました。これだけでもうれしい。
感想
普段は実装を考えながらのコーディングはしているのですが、学習しながらは
書いていません
(調べる→書いてみる→理解の順が多い)
デイリーコーディングをするにあたって、学習しつつ手を動かしつつ...
2つのことをいっぺんに意識してしまい、なかなか学習する内容とコードが頭に
入ってきませんでした。
(映画見るときに技法の観察と映画そのものの感動体験などを両立させる感じ？)
何を書いたかとか何が理解できなかったとかを書いてないので少しずつ追記していくつもりです。
何はともあれ1日目、明日からも続けてみます。
