はじめに
今回はShaderGraphを用いてカートゥーン風な海を作ってみたいと思います。
(一応開発中の未公開ゲームの一部なので、このブログをみた方のみの秘密です)
GIFだとわかりにくいかもしれませんが、水面や水面の高さが動的に動いていたりします。
流れ
カートゥーン風な海を作るに当たって大きく3つのパートに分けてられます。
Voronoi Nodeを利用して水面の模様を作成Gradient Noise Nodeを利用して水面に高低差をつける- Zバッファ(深度情報)を用いて陸地との接触判定をつける
それぞれについてみていきたいと思います。
水面の模様の作成
水面の模様にはVoronoi Nodeを利用します。
Voronoi Node | Shader Graph | 6.9.2
このノードの入力にあるAngle Offsetを色々変えてみると面白い動き方をしてくれます。
これをベースに色々と追加をしてみるとこんな感じ。
高低差の作成
次に海がずっと平面だと悲しいので、頂点シェーダーにより頂点の位置を動的に変化させていきます。
どの頂点を高く，どの頂点を低くするかを決定するためにGradient Noise Nodeを利用します。
Gradient Noise Node | Shader Graph | 6.9.2
ただこのまま使うと静止しているだけなので、Shaderでは定番のuvスクリールを行いアニメーションさせます。
uvスクロールに関しては以前紹介したことがあるので是非そちらを参照してみてください。
【Unity】ShaderGraphのTiling And Offsetノードについて - はなちるのマイノート
またShaderGraphによる頂点シェーダーのやり方も以前書いたのでそちらも是非。(少し古いですが)
【Unity】ShaderGraphで頂点シェーダーを用いて簡単な蝶を動かしてみた - はなちるのマイノート
これらを考慮しながら以下のようなノードを作成してみました。
接触判定の作成
次に接触判定を作っていきますが、具体的に言うと陸と接している箇所を白くするみたいな効果を付け足します。
こちらはUnity公式の動画に詳しく紹介されている(10:00辺り)ので、そちらをみてみると良いと思います。
https://www.youtube.com/watch?v=7ToExWKVZW0
