rn.log

備忘録など

【シェーダーグラフメモ その43】テクスチャを引き延ばすようなエフェクト

はじめに

テクスチャを横に引き延ばすようなエフェクトをかけるシェーダーグラフの作り方を解説します。

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

 

凱風快晴はパブリックドメイン美術館にあるものを使用させていただきました。

www.bestweb-link.net

 

ノード全体

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

 

サンプル

github.com

作り方解説

STEP1 :  テクスチャ表示

SampleTexure2DノードとUnlit Masterノードを接続し、テクスチャを描画します。

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

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

STEP2 : テクスチャを右に引き延ばす

UVのx成分Minimumを適用したものをテクスチャのUVとして使うと、

しきい値より右側の部分が引き延ばされたような見た目になります。

ここではしきい値として0.5(ちょうど真ん中)を設定しています。

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

右側へ伸びたような見た目になりました。

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

 

 軽い補足

しきい値Aより右側の部分ではx座標としてAが使用されるため、右側に引き延ばされたような見た目になります。

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





STEP3 : しきい値をプロパティ化(完成)

Vector1型のプロパティを作成、Minimumノードに接続します。

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

 

インスペクタ上からしきい値を変更できるようになりました。

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

 

左に引き延ばす

Minimumの代わりにMaximumノードを使うと、テクスチャが左に引き延ばされるようになります。

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

 

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

 

軽い補足

しきい値Aより左側の部分ではx座標としてAが使用されるため、左に引き延ばされたような見た目になります。

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