🚬

ShaderGraph基本表現100本ノック【1～10】

2022/07/23に公開

はじめに

こんにちは、ハードボイルドバトルプログラマーの井上仕草と申しますです。
シェーダー使いこなしてくそかっけー表現を作りてぇと思ったので、
最近ShaderGraphに再入門した。
リリース当初はちょっと評判悪かったような記憶があって敬遠してたものの、
今はビルトインのパイプラインで動くようになってたりするし、
実際に使ってみても特に問題を感じることはなかった。
サンキュー、ユニティテクノロジーズ...

さて、まずは簡単なノードの組み合わせをたくさん試して、できることの引き出しを増やすべく#ShaderGraph100本ノックと称して、
小技の手数を打っていく感じで学習していければなと思うに至り、これをしたためる。
最終的に、テクニックの逆引き辞典として記事が機能すれば、これ幸い...

環境

Windows10
Unity2021.3.4f1
HDRP
これ、ほんとはURPとかの方がいいかもではございますなのでありますが、、、
ま、基本的なテクニック集だから、まったく動かないってことはないべさね、と踏んでいる。
おい動かねぇよ、ってなった人は、優しく井上に教えてね。

ShaderGraph100本ノック1～10

目次

画像を使う
UVアニメーション１
モザイクをかける
クロマキー合成
丸を作る
反転させる（ネガを取る）
繰り返しの模様を作る（水玉模様を作る）
縞模様を描く
UVアニメーション２（Offsetを使用）
N角形を作る

1本目：画像を使う

SampleTexture2DをBaseColorにつなげるとできる。

2本目：UVアニメーション

SampleTexture2DのUVに加工したUV座標を流し込むとできる。
今回はUV座標に0.2倍にした時間を足し合わせてこのようなアニメーションになった。

3本目：モザイクをかける

SampleTexture2DのUV入力直前にPosterrizeをかませるとできる。
Stepsをいじると粗さが変わる。

※判別不可能なまでに抽象化された犬の例

4本目：クロマキー合成

この記事を参考に実装。
記事ではSplitされたRedを使っているが、Greenを使ってマスクを作る方が結果は良かったので、こういう形になった。もっときれいにマスク作りたいので、改訂版はどっかでチャレンジする。

ちょっと実用的すぎるというか気合入れすぎた感あるので、基本的にもうちょい軽めのやつをやってく。

5本目：〇を作る

ツイート時点ではRoundedRectangleを使うといってるが、Ellipseを使えばOK。

6本目：画像のネガをとる

OneMinusをかませると値が反転する。

7本目：図形を敷き詰める

TillingでUVをいじったのちFractionを噛ませる。

8本目：縞模様を作る

7本目でやった方法でUVいじりつつ、RectangleのWidthを１にしてFragmentに繋ぐ。

9本目：UVのoffsetアニメーション

Tillingに変動するVector2を繋ぐとできる。
Timeでひたすら加算させている。

10本目：N角形を作る。

Polygonを使えば多角形を作ることができる。

おわりに

とまぁ、こんな感じで基本的なノードを使って何ができるのかを学んでいって、ShaderGraphへの理解を深めていく。
俺は日本を再びサイバーパンクにするべく暗躍する、
ハードボイルドバトルプログラマーだからな。
次の20本目で、またお会いしよう。

Discussion