うにty生活

UnityChanを生活させたい

【Shader Graphに入門しました】衝突検知とフレネル 2日目

 

f:id:tubakihimeLoveHate:20200822131034p:plain

 

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

f:id:tubakihimeLoveHate:20200803231530p:plain

以下の表現ごとに分割して説明があったので、自分の目指す表現がいずれかに当てはまるならこの動画を見ることを強くお勧めします!

シールド

・衝突検知

・フレネル

・UVスクロール

・歪み表現

※当記事では、動画で扱わなかったFlesnel Efect Nodeも説明します

   歪み表現は別の記事で扱います。

→ちょっと待ってね

竜巻

・頂点アニメーション

・パーティクル設定

・U Vスクロール

・ノイズテクスチャアニメーション

※当記事で竜巻は実際に作成しません

 実際に作ってみた

実際にシールドの衝突検知、フレネル、UVスクロールまでを作成してみました。

f:id:tubakihimeLoveHate:20200812155226p:plain

 

作成手順は動画の通りなので、1からの説明はしませんが頻繁に使用しそうなノードや

動画内で名前だけ登場したけど使わなかったノードを掘り下げて紹介していきます。 

 

ポイント整理

衝突検知

深度にアクセスするには

Scene Depthを利用

f:id:tubakihimeLoveHate:20200822152542p:plain

 

Screen Positionのwとは?

f:id:tubakihimeLoveHate:20200822150859p:plain

ここのノードの部分で説明がありました。Splitノードの出力はRGBAなので分かりづらいですが、vecter4をRGBAに入れたときは(R:x,G:y,B:z,A:w)という風に格納されます。

なのでSubtractノードに入れているのは透明度(アルファ)ではなくベクトルのw(距離)になります。

 

最初早すぎてこの部分は何をしているのかわからなかったのですが、もう一度見直したらちゃんと説明されていました。

 

 

Smoothstepノード

動画内では、このSmoothStepノードを衝突箇所の幅周辺をグラデーションっぽくする(白と黒の間を滑らかにする)ために利用していました。

下記のようなカーブで計算を行うノードです。

※Edgeオプションはsmoothにする範囲を設定する。

f:id:tubakihimeLoveHate:20200804005429p:plain 

 

f:id:tubakihimeLoveHate:20200822155329p:plain

 

フレネル

フレネルというのはサーフェスに対して垂直に入射すると反射が少なく、平行になるほど強く反射する効果です。

この効果を使えば何ができるかというと、輪郭付近のみに作用する効果を入れたり水のような表現が可能です。とにかく表現方法として覚えといて損はないです!

 

動画では

Fresnelを作成するためにはFresnel Efectノードというのが便利(動画では名前のみ)

と紹介されていて動画中名前だけしか登場しません。なので動画で作成するフレネルShaderの部分をFresnel Efectノードに入れ替えてみました。

 

動画内で紹介された、Fresnel Efect

f:id:tubakihimeLoveHate:20200812144838p:plain

 

Fresnel Efectノードのコードを見ましたが、動画でわざわざ行っていたnormalizeや法線、View Directionの取得も、指定がなければ勝手にやってくれてるようなのでFresnal Efectノードだけ配置してみた。

 

Fesnel Efect Nodeのみ配置

f:id:tubakihimeLoveHate:20200812145922p:plain

こんなに簡単にできるならこれでよくね?.....と思いましたが

 

実際表示してみると裏側が塗りつぶされるみたいです。

←左 Transparent-Two SidedでFresnel Efectのみ 動画内での完成形 右→

f:id:tubakihimeLoveHate:20200812153438p:plain

 

調べてみると「Transparent  x  Two Sided」ではFresnel Efectはうまくいかないという記事がありました。

同じ動画を見て同じところでハマってました。

Shader Graphの超入門レシピ その7~輪郭を明るくする2つの方法~ - さわぐちFMオキーステーション

 

Two Sidedを外してみたところ

f:id:tubakihimeLoveHate:20200812153516p:plain

 

よくはなりましたが、やっぱりTwo Sidedを外してしまうと後ろの輪郭がなくなってしまうのでやっぱり今回の表現は動画の通りにしたほうがいいですね。

なので、どちらかというとFresnel Efectを利用するのが普通で今回はうまくいかなかったから特別なノードの組み方をしたってことだと思います(憶&測)

 

UVスクロール

Tile and OffsetとTimeノードでUVスクロール

結構多用しそうなので紹介

f:id:tubakihimeLoveHate:20200812154851g:plain

 

One Minus・Subtract

f:id:tubakihimeLoveHate:20200822155654p:plain   f:id:tubakihimeLoveHate:20200822155658p:plain

動画内で作成するShaderで、当たり前のようにOneMinusノードやSubtractノードで1や0.5からマイナスすることが度々あります。1から引くことでグレースケールを反転させることができます。基本的に表示されたり効果を持たせたい部分を白で表現するので、これらをコントロールするためにはかなり重要だと思いました。

 

作成中困ったこと

困ったことを書いていきます

途中、何も映らなる問題に遭遇しました。

これはMasterのAlphaClipThresholdが1に設定されて、全てのAlpha値を破棄していたためです。(0に変更)

AlphaClipThresholdは、アルファ値を持つノードを破棄するための閾値

f:id:tubakihimeLoveHate:20200812160803p:plain
 

完成

f:id:tubakihimeLoveHate:20200812161859g:plain
 

HDRP環境での歪み表現は、動画とは違う方法で実装したので別の記事で紹介したいと思います

→もう少し待ってね

 

また、竜巻の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作成で大切なことは表現ごとに分けて考えることだなと感じた!

分けて考えることで、やるべきことがかなり明確になりました。

 

あとは想像力を働かせて自分で色々やってみるしかないですね!

 

ではまた!