たぶん最速でUnityのシェーダーでなんか作る
友達にシェーダーでなんか作るのを教える用に記述。
最初に
シェーダー勉強するとなるといろいろあるけど目標は
プログラムでお絵かきして時間でいい感じに動くヤツ
なので必要ないところはカットする。プログラミングにありがちなおまじないとする。
出てくる専門用語
専門用語じゃないので説明するのは面倒なのでよくわからない単語出てきたらここ見るかググろう。
・プリミティブ 単純な形状の図形。四角とか三角とか丸。
まずやること
VisualStudioだと書きにくいからVisualStudioCodeっていう親戚みたいなのインストールする。インストール方法は自分で調べて。
なぜVSCode使うのか
VisualStudioだとfloatとかは色がつくけどfloat4とかに色がつかなくて視覚的に不便。
さらに予測変換もVisualStudioでは出ないのでVSCodeを使う。
別にVisualStudioでも書ける。
そして以下のアドオンを入れる。
・Japanese Language Pack for Visual Studio Code（VSCodeを日本語にする）
・ShaderlabVSCode(Free) （Unityでシェーダー書くのをサポートしてくれる）
入れ方は自分で調べて
ステップ１
リンク先まで飛んでそこのスライドを見て。そこの下に書いてあるコメントが重要なので。
ここを全部やる。最後まで行けばプリミティブな形で何か動くものが作れるようになる。
しっかりと読みながら進めばどうして円が描けるのかぐらいはわかるはず。
ステップ２
ステップ１が完璧にできたら教えることは何もないので自主的に誰かが描いたプログラムを読んで勉強
もしくは何か作りたいものを作る。
ここでは勉強になるサイトなどを書いておく。
・いい感じな図形の計算式が知りたい
シェーダーの神による神サイト。ここのarticlesの2D SDFsってページのプログラムをそのまま書いて使えば図形が描ける。
いまいち使い方がわからなかったらリンクに飛べば使ってるサイトに飛ぶから自力でプログラムを解析する。
英語はGoogle翻訳でどうにかして。
ここでも見れる。こっちのほうがたぶん簡単。
・frac()とかの使い方やもっとテクニック知りたい
気になる項目に飛ぶ。たぶん日本語翻訳されてる。
・sin(time)とか結果どうなるのかイマイチ頭で計算できん
ここに計算式入れればグラフになってくれる。もしくはWindowsについてる関数電卓使って。
ステップ３
他人のプログラムを見て勉強しよう
・勉強場所その１
海外のサイト。とんでもないものが見れる。おまけにソースコード全部見れるのでお勧め。ソースコードをコメントアウトとかしてどこがどんなふうに作用してるのか見て勉強する。
・勉強場所その2
日本のサイト。気を付けないといけないのは以下の2点
・ソースコード見れないのもある。
・シェーダーで作られていないものある。（JavaScriptとかHTMLって書いてあったら今回のシェーダーで書くのとは違うので注意）
ステップ4
書いた渾身のシェーダーを投稿しよう。
上記のShaderToyやNEORTではプログラムを公開できる。投稿していいね貰ったりしよう。
ShaderToyは英語でコメント書くのがおすすめ。謎のシェーダー書ける外国人からいい感じなアドバイスがたぶん入ったりする。
最後に
シェーダー見て。
この記事が気に入ったらサポートをしてみませんか？