【Unity】初めて『シェーダーグラフ』でシェーダーを学んでみる 基礎編.㊶

f:id:Effect-Lab:20180506181417g:plain

 

こんにちは。

 

シェーダーを一度も触った事のないデザイナーが、Unityの「シェーダーグラフ」を使ってシェーダーを学んでみるシリーズ。

 

このシリーズでは、公式のサンプルシーンを元に僕がシェーダーグラフで学んだ事を解説していきます。
シェーダー学習初という事もあり、たくさんの方のブログを拝見し、勉強させていただきました。
このシリーズには僕が参考にさせていただいたブログのリンクを貼らせていただいておりますので、そちらも併せて読んでいただくとより一層理解が深まるかと思います。
 

 

今回は「基礎編.㊶」という事で、公式のサンプルシーンにある上の画像のゆらめくシェーダーがどのように作られているかを解説します

 

 

 まずはこちらの記事で紹介したサンプルシーン「Shader Graph Example Library」を開いてください。

 

シーンは開けましたか?
それではシェーダーの解説に入ります。

 

 シェーダーを開く

サンプルのシーンを開いたら、「Procedural-Noise-ColorSplitWaves」というファイルをダブルクリックして下さい。

f:id:Effect-Lab:20180506181506j:plain

 

するとシェーダーグラフのエディターが立ち上がります。
※Propertyにコンバートされていたノードは「Convert To Inline Node」で元に戻してあります。
※各種パラメーター値はマテリアルの値に変更しています。

f:id:Effect-Lab:20180506182125j:plain

  

 全体の流れ

個々のノードを見ていく前に、このシェーダーが何をしているのか、全体の流れを軽く把握していきましょう。

f:id:Effect-Lab:20180506183333j:plain

このシェーダーは、①で-V方向にオフセットアニメーションするUVを作成しています。

②では、まずSimple NoiseでアニメーションUVを使いノイズ模様を上方向に動かしています。そのノイズを基に最終的にStepノードで二値化する事で今回のようにウェーブしているような値が完成します。

ちょっと途中をすっ飛ばした説明になってしまいましたが、後ほど詳しく解説していきます。

最後に③で二値化した値を白黒に置き換えて、Lerpで2色に塗り分けて今回のシェーダーが完成しています。

f:id:Effect-Lab:20180506184236g:plain

 

 

 重要ノード群の解説

さて、全体の流れを把握した所で、今回のシェーダーで重要な役割を持つノードを詳しく見ていきましょう。 

 

 ② ノイズの作成から二値化するまでの流れ

f:id:Effect-Lab:20180506184705j:plain

ここでは上図の部分の流れを順を追って解説していきたいと思います。
(※最初全然分からなかったので詳しく書きます!)

 

まずはSimple Noiseの部分、今のままだと分かり難いので、下図のようにScale値を「50」にしてノイズを細かくします。
さらに分かりやすくアニメーションUVもいったん外しておきます。

f:id:Effect-Lab:20180506185225p:plain

 

これをCombineノードのGポートのみに繋ぐと下図のようになります。
RBチャンネルは「0」で、Gチャンネルは「0~1」の値なので黒と緑の間で塗り分けられています。

f:id:Effect-Lab:20180506185726p:plain

 

これをTilling And OffsetのOffsetポートにつなぐと下図のようになります。

f:id:Effect-Lab:20180506191718p:plain

なんでこうなるんでしょう??
最初全然分からなかったので詳しく見ていきたいと思います。

まず、Tilling And OffsetノードのTillingの値が(0, 1)になってますね。
この数値のまま、このノード単体ではどのような値になるかみてみましょう。

f:id:Effect-Lab:20180506192746j:plain

上図のようにUVのTillingが(1, 1)から(0, 1)になると、プレビュー画面の左端部分(Uの値が0の部分)がプレビュー画面全体に広がり画面全体がU=0、つまりRチャンネル=0になり、V(Gチャンネル)のみの数値になるため、緑と黒のグラデーションが表示されるようになります。
わかりやすく数値を表示するとなこんな感じです。

f:id:Effect-Lab:20180506200541j:plain
Gの値のみに数値が入っているので緑色になりますね。

そしてこの状態でOffsetポートにノイズを繋げるわけですが、その前にもう一つ、オフセットとはどういう意味か確認します。

オフセットとは「ある基準点からの距離」です。

つまり、例えばこのノードのOffsetのXの値を+1してみると、プレビュー画面の(0, 0)の箇所は+1の距離を移動した地点の数値になるので(1, 0)となります。

つまり、Offsetに数値を入力するという事は、現在の値に加算するという意味になります。

試しにOffsetのXに+1を入力してみると下図のようになります。

f:id:Effect-Lab:20180506213254j:plain

プレビュー画面の色と数値が一致していますね。

 

これらを踏まえると、下図のようにノイズをOffsetポートに繋いだ結果がなぜこうなるかが解ってくると思います。

f:id:Effect-Lab:20180506213627p:plain

 

まず、前述した通りTilling And Offsetノードのプレビュー画面上でのRG値は下図のようになっており、そこにCombineノードでのRG値が加算される形になります。
そのため、プレビュー画面の上の方にいくにつれGの値が1に近づき緑に塗りつぶされていくので、このような見た目のノイズパターンが出来上がります。
(下の方は加算されるGの値が低いので黒部分が残ったまま)

f:id:Effect-Lab:20180506220013j:plain

 

どうでしょうか?
僕はこの流れでなんとかTilling And Offsetノードまでの流れが理解できました。
(※ごちゃごちゃ長く書いてしまった気もするので解り難かったらごめんなさい)


あとはStepノードでの二値化で終わりです!

Tilling And Offsetで出力されたノイズの値をStepノードのInに繋ぎ、しきい値を設ける事でGの値が0か1かをクッキリ分ける事ができます。

f:id:Effect-Lab:20180506221347g:plain

 

これで重要なところの解説は終わりです。
ここから先はすでに何度も登場しているノードの組み合わせなので解説は省きます。

 

最後に、検証用に外したスクロールアニメーション用のノード群をSimple NoiseノードのUVポートに繋いで、Scale値を「2.4」にすると初期状態に戻ります。

 

 完成!

f:id:Effect-Lab:20180506184236g:plain

これで今回のシェーダーは完成です!

 

 まとめ

今回は理解に時間がかかった部分を詳しく解説させてもらいました。
たぶんCGの数学をかじった事がある方ならこんな回りくどく考えなくてもパッと分かりそうな気もしますが、シェーダー初体験の僕にはとても難しかったです。
でもなんとか理解できたぞ・・・!

さて、今回覚えるべきノードはありませんので、ここまで理解できたら次へ進みましょう!