rn.log

備忘録など

【シェーダーグラフメモ その38】テクスチャに墨のような煙を加える

テクスチャに墨のような黒い煙を加えるシェーダーグラフの作り方を解説します。

和風のイラストと相性が良いかもしれません。

f:id:r-ngtm:20190103123620g:plain

目次

 

サンプル

github.com

 

準備 

今回のシェーダーグラフでは、ドメインワーピングのカスタムノードを使用します。

 

下記URLにあるDomainWarpingカスタムノードをUnityプロジェクトに追加してください。

ドメインワーピング( http://www.iquilezles.org/www/articles/warp/warp.htm ) をシェーダーグラフで使うためにカスタムノード化したものです · GitHub

 

DomainWarpingカスタムノードはもやのような模様を出してくれます。

f:id:r-ngtm:20190101161252p:plain

 

作り方解説

STEP1 : 模様を表示

先ほど追加したDomainWarpingカスタムノードを使用して、模様を表示します。

f:id:r-ngtm:20190103111746p:plain

f:id:r-ngtm:20190103111828p:plain



STEP2 : 模様を動かす

Timeノード、Vector4ノードを以下のように接続し、模様を動かします。

f:id:r-ngtm:20190103112117p:plain

f:id:r-ngtm:20190103112655g:plain

 

STEP3 : UVをスクロールさせる

UVのx座標に時間を足し、UVを横方向にスクロールさせます。

f:id:r-ngtm:20190103113016p:plain

f:id:r-ngtm:20190103113239g:plain

 

STEP4 : 色のコントラストをつける

Smoothstepノードを使い、色にコントラストを付けます。

f:id:r-ngtm:20190103113558p:plain

f:id:r-ngtm:20190103113849g:plain

 

補足 : Smoothstepについて

f:id:r-ngtm:20190103115150p:plain

 

smoothstep(0.44, 0.66, x)は以下のようなグラフを描きます。

  • x < 0.44の場合に0.0を出力
  • x > 0.66の場合に1.0を出力
  • それ以外では滑らかに補間するような値を出力

f:id:r-ngtm:20190103114847p:plain

 

元の色とsmoothstepの出力の色の対応関係は以下のようになります。

値 > 0.66の部分は1.0(真っ白)、値<0.44の部分は0.0(真っ黒)になります。

f:id:r-ngtm:20190103122118p:plain

STEP5 : テクスチャと合成(完成)

Lerpノードを使用して、テクスチャと黒色を合成します。

模様の色が白い部分ほど、黒が多く混ざります。

f:id:r-ngtm:20190103123411p:plain

 

f:id:r-ngtm:20190103123620g:plain

 

煙の濃さを調整

Smoothstepノードのパラメータを変更するとで、煙の量や濃さが変化します。

 

調整1 : 煙を濃くする

SmoothstepのEdge1の数値を減らすと黒が多く混ざるようになります。

f:id:r-ngtm:20190103124733g:plain

 

調整2 : 煙を薄くする

SmoothstepのEdge2の数値を増やすと黒が混ざる量が減ります。

f:id:r-ngtm:20190103125100g:plain

 

調整3 : 煙をぼかす

SmoothstepのEdge1とEdge2に差の大きな数値を設定すると墨がボケた感じになります。

f:id:r-ngtm:20190103130704p:plain

 

調整4 : 煙をクッキリとした感じにする

SmoothstepのEdge1とEdge2に差が小さい数値を設定すると、

墨がくっきりとした感じになります。

f:id:r-ngtm:20190103131140p:plain