🌲
【Unity / ShaderGraph】風で揺れる木を作ってみる
概要
風で揺れる木を作ってみました。
サンプル
環境
Unity2021.3.16f1
Universal RP 12.1.8
使用ツール (DCC)
| ツール | 用途 |
|---|---|
| Photoshop | 葉の素材テクスチャ作成 |
| Substance Designer | 葉のテクスチャ作成 |
| Houdini | 木のモデル作成 |
素材の用意
葉のテクスチャ (Photoshop)
葉の形状テクスチャを用意します。
Photoshopで作成した葉の形状テクスチャ
葉のテクスチャ (Substance Designer)
Substance Designer を利用して、葉が集まったようなテクスチャを作成します
SubstanceDesignerで作成した葉の形状テクスチャ
木の3Dモデル
木の3Dモデルを用意します。
葉の部分には、0~1のランダムな頂点カラーを設定しておきます。
この頂点カラーは、葉をランダムに揺らす際に使用します。
Houdiniで作成した木のモデル
ShaderGraphの作成 (Unity)
Unityにて、木を揺らすためのShaderGraphを作成します。
STEP1. テクスチャを割り当てる
この木をUnityへ取り込み、葉にテクスチャを割り当てます。
結果
STEP2. 葉を揺らす
葉の頂点座標にSine(Time)を加算し、葉を揺らします。
頂点座標をSine(Time)で揺らす
参考 : 🍇 3Dモデルの変形 (頂点シェーダー)
結果
STEP3. ランダムに揺らす
動きが単調なので、ランダムに揺らすことを考えます。
ランダムな方向に揺らす
法線は、葉ごとにランダムな方向を向いているため、法線方向に動かすことでランダムな動きを作ることができます。
時間をランダムにする
また、葉の頂点カラーにも0~1のランダムな値が格納しているため、
頂点カラーを時間に加算すると揺れるタイミングをランダムにずらすことができます。
Houdiniで作成した木のモデル
ShaderGraph
ランダムな揺れを与える
全体
結果
STEP3. 2方向に揺らす
葉を2方向に揺らすと、より複雑な動きを作れます
Normal方向への揺れと、Tangent方向への揺れを加算
全体
結果
STEP4. シェーダーを整理 (完成)
STEP3.のシェーダーには似た処理が２つあるので、1つにまとめることができます。
上 : 整理後, 下 : 整理前
完成
Discussion