この記事ではUnityのShderforgeを使って浜辺に打ち寄せる波のシェーダーの作り方を紹介します。
![Wave01_fin - STYLY 波のシェーダー](https://styly.cc/wp-content/uploads/2018/09/Wave01_fin.gif)
波のシェーダー
このような寄せては返す波の表現です。 Planeにアサインするだけで使えるものを作っていきます。
サンプル
STYLY GALLERYからサンプル空間を体験できます。
記事で紹介しているUnityプロジェクトのダウンロードはこちらからできます。 Wave_Sample
プロジェクトデータには各種プラグインは入っていませんので使用する際はご自身でインストールしてからご利用ください。 Playmaker SteamVR Plugin
Shaderforgeで新しくシェーダーを作る
シーンには波に使う1枚のPlaneと砂浜に見立てた1枚のPlaneがあるだけです。 Shaderforgeを起動してNew ShaderからLit(PBR)で新しくシェーダーを作ります。
![Wave01_01 - STYLY](https://styly.cc/wp-content/uploads/2018/09/Wave01_01.jpg)
Shaderforgeで新規のシェーダーを作る
透明度を使用するのでBlend Modeを”Alpha Blended”に変更します。
![Wave01_02 - STYLY ブレンドモードの設定](https://styly.cc/wp-content/uploads/2018/09/Wave01_02.jpg)
ブレンドモードの設定
STYLYで使用するためにOpenGL ES3.0にチェックを入れます。
![Wave01_03 - STYLY OpenGL ES 3.0にチェック](https://styly.cc/wp-content/uploads/2018/09/Wave01_03.jpg)
OpenGL ES 3.0にチェック
Heightmapを使って形状を変化させる
グレースケールのテクスチャを使って実際にポリゴンの形状を変化させます。 実際にオブジェクトの形状を変えることでより説得力のある表現が可能になります。
![Wave01_04 - STYLY 波のHeightmap](https://styly.cc/wp-content/uploads/2018/09/Wave01_04.jpg)
波のHeightmap
このテクスチャはPhotoshopの雲模様で作りました。 このテクスチャをShaderforgeで使用していきます。 テクスチャをそのままドラッグしてTexture2Dノードを作成します。
![Wave01_05 - STYLY テクスチャを使用する](https://styly.cc/wp-content/uploads/2018/09/Wave01_05.jpg)
テクスチャを使用する
UVをスクロールさせて波のアニメーションの作ります。
![Wave01_06 - STYLY PannerとUV Coordをつなぐ](https://styly.cc/wp-content/uploads/2018/09/Wave01_06.jpg)
PannerとUV Coordをつなぐ
PannerとUV Coordノードを作成して、テクスチャとつないでいきます。 このままでは一方方向にスクロールするだけなので行ったり来たりする動きを入れていきます。
![Wave01_07 - STYLY 時間で制御する](https://styly.cc/wp-content/uploads/2018/09/Wave01_07.jpg)
時間で制御する
行ったり来たりはSinを使うことで実装出来ます。 Timeで行ったり来たりの速度とRemapで範囲を設定します。 Normal Directionを使って頂点が移動する向きを取得してそれをMultiplyで合わせます。 それをVertexOffsetにつなぐことで実際にオブジェクトの形状を変化させることができます。
![Wave01_08 - STYLY Vertex Offsetで頂点移動](https://styly.cc/wp-content/uploads/2018/09/Wave01_08.jpg)
Vertex Offsetで頂点移動
このままではシーンには適用されません。 新しく作ったシェーダーを割り当てたマテリアルをPlaneにアサインにしてインスペクタから使用するテクスチャを指定します。
![Wave01_09 - STYLY テクスチャを指定する](https://styly.cc/wp-content/uploads/2018/09/Wave01_09.jpg)
テクスチャを指定する
これでPlaneの形状に変化が出ました。 テクスチャのグレースケールによって頂点が法線の方向にオフセットされています。
波の高さの調整
波全体に上下の動きをつけて動きにボリュームをつけていきます。 Waveheightというスライダーを作って調整できるようにします。
![Wave01_10 - STYLY 波の高さのスライダー](https://styly.cc/wp-content/uploads/2018/09/Wave01_10.jpg)
波の高さのスライダー
Wavewidthというスライダーも作って波が打ち寄せる幅を調整できるようにします。
![Wave01_11 - STYLY Wavewidthの調整](https://styly.cc/wp-content/uploads/2018/09/Wave01_11.jpg)
Wavewidthの調整
Wavedirection というValueを作って波全体が動く方向を指定します。
![Wave01_12 - STYLY Wavedirectionの調整](https://styly.cc/wp-content/uploads/2018/09/Wave01_12.jpg)
Wavedirectionの調整
ここではZ方向だけに移動する設定にしています。
Heightmapの追加
さらにHeightmapを追加していきます。
![Wave01_13 - STYLY Heightmapの追加](https://styly.cc/wp-content/uploads/2018/09/Wave01_13.jpg)
Heightmapの追加
白い部分が盛り上がる感じになるのでこれをスクロールさせて定期的に押し寄せる波の表現に使います。
![Wave01_14 - STYLY UVをスクロールする](https://styly.cc/wp-content/uploads/2018/09/Wave01_14-1.jpg)
UVをスクロールする
PannerとUV Coordの間にAddを挟んでVector2をつないでいます。 これはUVを少し移動させているだけですが波全体の動きに合うように動き出すポジションを変えました。 雲模様のテクスチャとAddで重ねてNormal Dirにもつないでいきます。
![Wave01_15 - STYLY Addで追加する](https://styly.cc/wp-content/uploads/2018/09/Wave01_15.jpg)
Addで追加する
テクスチャを指定することでマテリアルに反映されます。
![Wave01_16 - STYLY テクスチャを指定](https://styly.cc/wp-content/uploads/2018/09/Wave01_16.jpg)
テクスチャを指定
グラデーションのテクスチャの動きも追加されました。
Normalmapの追加
さらにディテールを追加するためにNormalmapを追加します。 細かいディテールの表現はNormalmapを使うととてもやりやすいです。
![Wave01_17 - STYLY 波のNormalmap](https://styly.cc/wp-content/uploads/2018/09/Wave01_17.jpg)
波のNormalmap
このテクスチャは雲模様の画像をPhotoshopで法線マップに変換したものです。 NormalmapもUVをスクロールさせて動きをつけていきます。
![Wave01_18 - STYLY スクロールの設定](https://styly.cc/wp-content/uploads/2018/09/Wave01_18.jpg)
スクロールの設定
インスペクタからテクスチャをしてあげると表面にNormalmapの表現が追加されます。
![Wave01_19 - STYLY Normalにつなぐ](https://styly.cc/wp-content/uploads/2018/09/Wave01_19.jpg)
Normalにつなぐ
海っぽい見た目になりました。
海の色をつけていく
海っぽい色にするために明るい色と暗い色を混ぜていきます。
![Wave01_20 - STYLY 海の色の設定](https://styly.cc/wp-content/uploads/2018/09/Wave01_20.jpg)
海の色の設定
Frenelを適用してカメラの向きで見た目が変わるようにします。 グラデーションのHeightmapをカラーとして使います。 白い部分をそのまま白として重ねて波しぶきっぽい雰囲気にしてみます。
![Wave01_21 - STYLY 白く見える部分をブレンド](https://styly.cc/wp-content/uploads/2018/09/Wave01_21.jpg)
白く見える部分をブレンド
ここではBlendノードを作ってScreenで重ねています。
Alphamapの使用
まだ波の先端がまっすぐのままなのでナミナミの形状にしてあげます。 ここではナミナミのテクスチャを使って透明度で表現します。
![Wave01_22 - STYLY 波の形のアルファマップ](https://styly.cc/wp-content/uploads/2018/09/Wave01_22.jpg)
波の形のアルファマップ
この白い部分だけが見えるように設定していきます。 テクスチャをValueをつないでOpacityにつなぎます。 Valueの値で透明度の調整ができるようになります。
![Wave01_23 - STYLY Opacityへつなぐ](https://styly.cc/wp-content/uploads/2018/09/Wave01_23.jpg)
Opacityへつなぐ
planeの影は必要ないのでCast Shadowをoffにします。 これで波のシェーダーの完成です。
![Wave01_fin - STYLY 波のシェーダー](https://styly.cc/wp-content/uploads/2018/09/Wave01_fin.gif)
波のシェーダー
この記事ではUnityのShaderforgeを使って波のシェーダーの作り方を紹介しました。 Vertex offsetでオブジェクトの形状をテクスチャで変化させるといろいろな表現ができます。 モデリングする必要がなくなるので使い方次第で手間が省けると思います。 UnityからSTYLYにアセットをアップロードする方法 この記事を読む