見出し画像

クリエイティブコーディング 初めてのシェーダー

まりーな／エンジニア

前々から、シェーダーというものを書いてみたいと思っていた。
先週の記事はこちら

GPUの描画とCPUの描画はこれくらい違うということがわかる動画を、シェーダーの先人に教えていただいた。

一番最初に見たときは、確かに違うのだが、
これがどうシェーダーを書くこととつながるのだろうと思っていた。

一週間経過後は、すべてのピクセルに対して一つ一つ描く感じがわかってくるようになった。

はじめに見たもの

Three.jsでシェーダーを書いてみたくてGLSLとやらに初チャレンジした。Three.jsの初心者用ページに載っていたので、codepenでシェーダーを書けるようにいい感じに準備したものを使うことにした。

内容だが、何を言っているのかさっぱりわからなくて１行おきに首を捻っていた😇

- uv は0 〜 1です。←わかる
- cos(uv.xyx) は3つのコサイン値を vec3 としてます。←　xyx なにこれ？　わからん
- 3つとは uv.x、uv.y、uv.z です。←　分解しているのかな？　わかんないけど
- 時間を加えて、cos(iTime+uv.xyx) でアニメーションさせます。←　雰囲気わかる
- cos(iTime+uv.xyx+vec3(0,2,4)) のように vec3(0,2,4) を加えると、コサイン波の cos が-1 〜 1にオフセットされます。←　vec3(0,2,4) ？？？？？？？？いきなり出てきた 何この数字
- そのため 0.5 * 0.5 + cos(....) は -1 <-> 1 〜 0.0 <-> 1.0 に変換され、その結果が現在のピクセルのRGB色として利用されます。　← 気持ちはわかるけど、アウトプットのイメージがつかない

本当に感覚がつかめなかった。

ただ次の日の朝この記事とともに見てみると、

そうか、これはベクトルだ！！！行列だ！！！ただピクセルごとに色を返しているだけだ！！！という天啓を突然得られた。
ビビっと脳みそに急にわかる瞬間がくるのが気持ちいい。

わからなかったことを、シェーダー先生に聞いてみると、理解が深まった。身近に質問できる人いる環境のなんとありがたいことか。

シェーダーを使った作品

図らずもイカ色になった。

テクスチャを使ってリッチな見た目に

原点は左下ということを知った

原点を中心にするとはどういうことかを知った。

テクスチャを使う場合の中身をさらに深く知る

時間によってシェーダーで色を変化させる。

ここから下は、「[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング」を読んでつくってみたものだ。






だんだんリッチなものができるようになってきた。
今後はGUIからシェーダーを制御できるようにしてみる。

ちょっと変えれば変わるのがかなり面白いなと思った。物体にテクスチャとして貼ったりもできそう。

一年前は力と精神力が足りて無くて、できなかったことが今ではできるようになっていることが喜びだ。ちょっとずつ成長したんだな。

エンジニアとして働いている成長記録やおもしろいと思ったこと色々書いていこうとおもいます 頂いたご支援は、資料や勉強のための本、次のネタのための資金にし、さらに面白いことを発信するために使います 応援おねがいします