🌊

Unity ShaderGraphによる波の動きの作成

2022/03/20に公開

ShaderGraphの学習動機

Unityには、ShaderLab言語によりコードベースでシェーダーを作成する方法の他に、ShaderGraphというノードベースでシェーダーを作成する方法が用意されている。
今まではURP（Universal Render Pipeline）、HDRP(High Difinition Render Pipeline)には対応していたものの、Built-in Render Pipelineには対応していなかった。
しかし、v12.0.0（2021.01.11リリース）より対応するようになったとのこと（UnityサイトのChangelog参照）で、今後も引き続きアップデートが期待できると考え、ShaderGraphを使いこなせるようになっておこうと考えた。
また、視覚的にシェーダーを作成しやすいこともやってみようと思った動機の一つである。

今回作成したシェーダー適用結果の紹介

シェーダー適用前

簡単なテクスチャを適用したPlane

シェーダー適用後

作成したシェーダーを適用した様子

作成したシェーダーのShaderGraphでの表示

作成したシェーダーのShaderGraphでのノード表示

作成したシェーダーのインスペクターでの設定

作成したシェーダーのインスペクター設定

本シェーダー作成にあたっての考え方

以下の波の式に基づいて、ポリゴンの頂点のY座標を時間変化させる。

Y(x, z) = Asin(k_x x+k_z z-vt)

ここで、k_xはX方向の波数、k_zはZ方向の波数、vは波の速さである。

作成したシェーダーのShaderGraphでのノード配置の解説

波の変位の計算

上図の部分では、Y座標の変位を計算している。
赤枠部分では、頂点のワールド座標を取得してきて、それをSplitノードで直交3成分に分解している。
黄緑枠部分では、得られた頂点の位置の情報・時刻・外部変数としての波の速さ、X方向の波数、Z方向の波数を元に、上式を元に波の変位を計算する。

計算した波の変位を、元のオブジェクトの頂点座標に加算

上図部分では、前工程で計算したY座標の変位のfloat値を、Y座標の単位ベクトルと掛けて、変位ベクトルにし、これをオブジェクトの頂点座標と足し合わせ、その座標を改めて頂点座標としてセットしている。

パラメータを様々に変えて実験

k_x = 1, k_z = 1, v = 5

k_x = 1, k_z = 3, v = 5

k_x = 3, k_z = 3, v = 5

手動で、k_zを変化させて、波の形状変化を確認

k_x = 20, k_z = 0 \to 10.76, v = 5

パラメータ設定によって、波の形状がきれいな場合もあるし、不自然な表示になる場合もある。
不自然な表示になっているものについては、ポリゴン数を増やすことで解決する可能性もある。

今後やってみたいこと

今回は頂点シェーダー部分に関するもののみだったが、フラグメントシェーダー部分の変更があるシェーダーについてもShaderGraphで作成する
使用できる環境が限定される（シェーダーモデル5.0以降）が、テッセレーションを行って、より滑らかな波の表現ができるかを試す

参考文献

Discussion