Unityできるって聞いて会社入ったのにずっとWebアプリしてます。
ラブヘイトです
1日目 > 2日目←ｲﾏｺｺ
前回(1日目)の記事でShader Graphの基礎的な操作は押さえたので、今回はyoutubeのShader Graph動画で実際に手を動かして、Shader Graphに慣れよう！という記事です
動画要約とか実際に同じものを作成していきます
自分の環境
Unity 2019.4.0f1
HDRP 7.4.1
Shader Graph 7.4.1
エフェクト作成のために知っておきたい Shader Graphの話
この動画で作成するShader
シールドとか、竜巻Shader
以下の表現ごとに分割して説明があったので、自分の目指す表現がいずれかに当てはまるならこの動画を見ることを強くお勧めします！
・衝突検知
・フレネル
・UVスクロール
・歪み表現
※当記事では、動画で扱わなかったFlesnel Efect Nodeも説明します
歪み表現は別の記事で扱います。
→ちょっと待ってね
・頂点アニメーション
・パーティクル設定
・U Vスクロール
・ノイズテクスチャアニメーション
※当記事で竜巻は実際に作成しません
実際に作ってみた
実際にシールドの衝突検知、フレネル、UVスクロールまでを作成してみました。
作成手順は動画の通りなので、１からの説明はしませんが頻繁に使用しそうなノードや
動画内で名前だけ登場したけど使わなかったノードを掘り下げて紹介していきます。
ポイント整理
衝突検知
深度にアクセスするには
Scene Depthを利用
Screen Positionのwとは？
ここのノードの部分で説明がありました。Splitノードの出力はRGBAなので分かりづらいですが、vecter4をRGBAに入れたときは（R:x,G:y,B:z,A:w）という風に格納されます。
なのでSubtractノードに入れているのは透明度(アルファ)ではなくベクトルのw（距離）になります。
最初早すぎてこの部分は何をしているのかわからなかったのですが、もう一度見直したらちゃんと説明されていました。
Smoothstepノード
動画内では、このSmoothStepノードを衝突箇所の幅周辺をグラデーションっぽくする(白と黒の間を滑らかにする)ために利用していました。
下記のようなカーブで計算を行うノードです。
※Edgeオプションはsmoothにする範囲を設定する。
フレネル
フレネルというのはサーフェスに対して垂直に入射すると反射が少なく、平行になるほど強く反射する効果です。
この効果を使えば何ができるかというと、輪郭付近のみに作用する効果を入れたり水のような表現が可能です。とにかく表現方法として覚えといて損はないです！
動画では
Fresnelを作成するためにはFresnel Efectノードというのが便利(動画では名前のみ)
と紹介されていて動画中名前だけしか登場しません。なので動画で作成するフレネルShaderの部分をFresnel Efectノードに入れ替えてみました。
動画内で紹介された、Fresnel Efect
Fresnel Efectノードのコードを見ましたが、動画でわざわざ行っていたnormalizeや法線、View Directionの取得も、指定がなければ勝手にやってくれてるようなのでFresnal Efectノードだけ配置してみた。
Fesnel Efect Nodeのみ配置
こんなに簡単にできるならこれでよくね？.....と思いましたが
実際表示してみると裏側が塗りつぶされるみたいです。
←左 Transparent-Two SidedでFresnel Efectのみ 動画内での完成形 右→
調べてみると「Transparent x Two Sided」ではFresnel Efectはうまくいかないという記事がありました。
同じ動画を見て同じところでハマってました。
Shader Graphの超入門レシピ その7～輪郭を明るくする２つの方法～ - さわぐちFMオキーステーション
Two Sidedを外してみたところ
よくはなりましたが、やっぱりTwo Sidedを外してしまうと後ろの輪郭がなくなってしまうのでやっぱり今回の表現は動画の通りにしたほうがいいですね。
なので、どちらかというとFresnel Efectを利用するのが普通で今回はうまくいかなかったから特別なノードの組み方をしたってことだと思います(憶&測)
UVスクロール
Tile and OffsetとTimeノードでUVスクロール
結構多用しそうなので紹介
One Minus・Subtract
動画内で作成するShaderで、当たり前のようにOneMinusノードやSubtractノードで１や０.５からマイナスすることが度々あります。1から引くことでグレースケールを反転させることができます。基本的に表示されたり効果を持たせたい部分を白で表現するので、これらをコントロールするためにはかなり重要だと思いました。
作成中困ったこと
困ったことを書いていきます
途中、何も映らなる問題に遭遇しました。
これはMasterのAlphaClipThresholdが1に設定されて、全てのAlpha値を破棄していたためです。（０に変更）
AlphaClipThresholdは、アルファ値を持つノードを破棄するための閾値
完成
HDRP環境での歪み表現は、動画とは違う方法で実装したので別の記事で紹介したいと思います
【Shader Graphに入門してみた】HDRPで歪み表現 3日目 - うにty生活
また、竜巻のShaderはUV展開という難所があり、UV展開などほぼやったことがなく
以下のポイントがわからなかったので今回竜巻を実際に作成するのは断念
・Blenderの自動UV展開の挙動が謎（シームは付けてる）
・手動でUV展開する方法がわからん
・Unityに持ってきた時にどうやってUVTextureとメッシュをどうやって紐付けてる？
ここら辺もUV展開でまとめて別の記事にしようと思います
→かなり待ってね
まとめ
・透明と不透明オブジェクトの衝突検知
・フレネル効果
・UVスクロール
・効果の掛け合わせ
・効果範囲の反転や調節
・Time
・Split
・Tilling And Offset
・Normal Vector
・View Direction
・Screen Position
・Screen Depth
・Smoothstep
・Multply、Add、Blend
※竜巻と計算系のノード抜き
今回見たコンテンツは40分くらいなのにてんこ盛り！丁寧で分かりやすいし、様々なノードを使ってくれていたので、この動画を見るだけでShader Graphの基礎が身に付く内容でした。ありがとうございます！
Shader作成で大切なことは表現ごとに分けて考えることだなと感じた！
分けて考えることで、やるべきことがかなり明確になりました。
あとは想像力を働かせて自分で色々やってみるしかないですね！
ではまた!
