【Unity】ShaderGraphで色収差シェーダーを作成する

はじめに

今回は色収差シェーダーを作成していきます。

環境は Unity 2019.3.0f3

Universal Render Pipeline(テンプレートのプロジェクトです)

UnlitGraph を使用しています。

ノード作成

この方の記事を参考にノード作成をしました。

light11.hatenadiary.com

UVに変化を加えることでテクスチャのRとGのみを拡大 させます。 f:id:Brave345:20200326145426p:plain

無理やり拡大させてるので余計なものが映る場合があるので画像をグレースケール化してマスクします。

f:id:Brave345:20200326145443p:plain

完成

テクスチャ次第ではうまくいかない場合がありますがそれっぽいのができました。 Opaque Textureを使用すればポストエフェクトとしても使えそうです。 f:id:Brave345:20200326145402p:plain

CurveEditorの使い方

braveshop.booth.pm

CurveEditorの使い方

f:id:Brave345:20200317163951p:plain

操作方法

・点の追加

ダブルクリックか点の追加ボタンで追加できます。

・点の削除

deleteキーか点の削除ボタンで選択している点を削除できます。

・アプリケーションの終了

Escキーでアプリケーションを終了できます。

グラフの編集

・点の移動

左端の点と右端の点以外は点を選択してる時のみ移動できます。

移動は点をドラックか入力項目に数字(0~1)を入力することで移動できます

これが点を選択してる状態です。点をクリックすることで選択できます。

f:id:Brave345:20200120115155p:plain

真ん中の点が選択点、上下にある点が制御点です。 制御点は点を選択してる時しか表示されません。

ドラックすることで点を複数選択できます。

またctrlキーを押しながら点を選択することでも複数の点を選択できます。

f:id:Brave345:20200323113340p:plain

線の編集

グラフを右クリックすることでメニューが出てきます。

・線を直線に 現在選択している線を直線にします。

現在制御点を移動させる機能なので、 常時直線になるのではなく、点を移動させたら線の形状も変わります。

・線を上下反転に 現在選択している点を上下反転させます。

ボタンから選択した場合はすべての点が上下反転します。

編集

・戻る Ctr + Zでひとつ前のグラフに戻ります。

ただしマウスホイールを使って数字を入力した場合はグラフの履歴は保存されません。

・進む Alt +Zで一つ先のグラフに進みます。

プリセット機能

プリセットを選択することでアイコン状態にすることが出来ます。

現在では自分でプリセットを追加することは出来ないです。 (exe単体で動作するようにしたいため。要望があれば追加するかも?)

f:id:Brave345:20200323114643p:plain

プレビュー機能

現在のグラフの状態で特定の値を動かしたらどのような挙動をするかを確認できます。

グラフによる値の動きの変化を移動、スケール、回転、アルファの4つの項目で確認できます。 f:id:Brave345:20200323114630p:plain

【Unity】ShaderGraphでディザリングして透明っぽいものを作成する

はじめに

今回はディザリングして透明っぽいものを作成していきます

ディザリングとは 特定の法則で不透明オブジェクトに穴をあけて半透明に見せる手法です。

参考URL

light11.hatenadiary.com

環境は Unity 2019.3.0f3

Universal Render Pipeline(テンプレートのプロジェクトです)

UnlitGraph を使用しています。

ノード作成

今回はかなり簡易的なディザリングを作成します。

TilingAndOfsetノードで適当にタイリングしてStepノードで使用して徐々に穴をあけるようにしています。 f:id:Brave345:20200319091949p:plain

Masterノードは以下のように設定すれば完成です。

f:id:Brave345:20200319091730p:plain

完成

マテリアルからalphの値を弄ったらこんな感じに穴が開いて半透明に見えます。

テクスチャは真っ黒な領域が多いと消え方に違和感が出るので、 いい感じにグラデーションさせると綺麗に消すことができます。 f:id:Brave345:20200319091034g:plain