見出し画像

Unity WaterShaderメイキングみながらウオオオとする人の日記(前編)

UnityでURPやるかそろそろ!と思い、Unity公式のYoutubeメイキングを見ながら水のShaderを作ってみます。

ちなみにUnityのバージョンはUnity 2020.1.16fです。

個人的に動画をやる上で躓いたところをこの記事には書いています。
URPやShaderGraphに関する知識がある程度ある人は、動画をサクサク見るだけで良きかと思われます。

参考動画はコチラ↓


1.準備しよう

適当に良い感じのモデルを配置しました。
地面は3DのPlaneでマテリアルで色のみ変えています。
配置のセンスは謎です。(せっかくの可愛いモデルが・・・)

画像1

かわいい3Dモデルはこちらの方からお借りしました。
あしらがとうございます!
https://seaeees.booth.pm/

ここでなんかいい感じに見せたいなーと思い、おなじみのポストエフェクトを使うか~と思い、Packageダウンロードしていつものように設定したのですがなぜか使えない・・・なぜ!?

URPでは通常のビルドパイプラインと違い、Post Processing V2を使ったポストエフェクトがかけられないようです。マジか!

こちらの2つの記事に大変お世話になりました。ありがとうございます。
感謝。永遠に。

そして、良い感じなりました。
ポストプロセスいつまでも愛してる。

画像2

ちなみにかけたエフェクトはこんな感じです。

画像3

2.水面を設定

水面は3DのPlaneで配置します。

配置したら、デフォルトで設定されているMeshColliderをRemoveしちゃいます。

画像4

次に、SceneウインドウのSharingModeをWireframeに変更して、

画像5

画像6

ここからシェーダーグラフを作っていきます。

Projectウインドウから[Create]->[Shader]->[PBR Graph]を選択します。
適当にWaterShaderと名前を付けました。

画像7


次にPlaneに当てはめるマテリアルを作成します。
Projectウインドウから[Create]->[Shader]->[Material]を選択します。
適当にWaterを名前を付けました。
また、作成したMaterialのShaderに先ほど作成したWaterShaderを設定しておきます。

画像8

作成したMaterialは水面PlaneのMesh RendererのMaterialに設定しましょう。

画像9

この時点でGameウインドウはこうなっています。

画像10

板ですね。

3.水面とは(と、改めて準備)

通常イメージできる水は透明のものです。
ですが、実際には光の反射により水の浅いところはより透明度が高く、深いところは透明度が低くなります。

カメラや画面上オブジェクトのデータから水の深さを計算し、色に影響を与える必要があるということです。

ここで気づきました。
この地面超絶平面だから水面からの深さの違いわかんないじゃんと。

地形作りなおします。こちらを使わせて頂きました。
なんとFreeです。強すぎ。感謝永遠に。


そうして配置しようとしたらコチラ。

画像11

どうして。トテモツライ。

URPプロジェクトに取り込んだものだと、そういうときがあるらしいです。シェーダーの参照時になんか起きるのかな。処理順とか。
[Edit]->[Render Pipeline]->[Upgrade Project Materials to LightweightRP Materials]を実行します。
こちらの記事に助けられました。感謝永遠に。

石だーーーーー!!!!!

画像12

ということで作りなおしたシーンがこちらです。

画像13

配置センスは無いです。ちなみに水面の高さはこうなるようにしています。

画像14

また、ProjectSettingのQualityで参照しているURPアセットのInspectorで、
Depth TextureOpaque Textureのチェックをオンに設定しておきましょう。

画像15

画像16

4.シェーダーグラフを触る

ノードのつなぎ方は動画と同じです。
Shader Editor を触ってことない人はこの項目を軽く見ておくと良いと思います。

2で作成したWaterShaderをダブルクリックし、Shader Editorを開きます。

画像17

PBR Masterの歯車アイコンを選択し、surfaceをTransparentに変更します。

画像18

Editor上を右クリックして[Create Node]からCameraScene Depthのノードを作成します。

同様にMultiplyノードを作成し、ノードを繋げます。

画像19

次にScreen Positionノードを作成しModeをRawに設定し、Alphaの情報のみ抽出のためSplitノードを挟んで、Addにつなげます。

画像20

次にVector1を追加します。名前はDepthとしました。
Referenceの名前は_Depthにします。

画像21

作成したDepth(緑の丸がついてるボタン?)をEditor上に持っていくと、それがそのままノードになります。それを先ほど作成したAddノードにつなげましょう。

画像22

このAddノードから、先ほど作ったSubtractノードにつなげ、マスターノードのAlbedoにつなげます。

画像23

最後にSave Assetで保存しましょう。

画像24

Sceneウインドウを見てみると・・・
あ~~~!なんか透過グラデーションが深度に反映されてますよ!!
もう嬉しい。

画像25


5.なぜか躓いた所

カメラのモードがPerspectiveに設定されていないと、なぜかGameウインドウに結果が反映されませんでした。


6.次へ

水面が無い状態がコチラ

画像26

水面を描画するとコチラ

画像27

ノードにパラメータを追加したおかげで、Inspectorから細かい値を入力できるのが面白いですね。キャワイイ。

画像28

ンー、ただ透明度が反映されているのかちょっとわかりません。
しかも動画だとマテリアルのプレビューがなんか私の作ったやつと違うw

画像29

透過マテリアルを触るのは初めてなので何か設定が抜けているのかもしれません。引き続き調査します。

ノードをつなげる作業以前に躓くところがとても多かったので、この記事は一旦〆ます。動画的には4:53まで終わった感じです。

動画のコメントにも、視聴者が躓いた所をコメントしてくれたりしてるので一通りみてみるといいかもしれませんね。

「これはチュートリアルなのに、細かいワードや仕組み全然説明してくれてないじゃん!」っていうコメントが盛り上がっていましたが、まあタイトル通りこれはメイキングなのでそんなもんだよねw落ち着くんだみんな。

後半へ続く!!!!!!


いいなと思ったら応援しよう!