草のモデルとかを用意するの大変よね。ということでShader Graphを使って揺れる草を作ってみましょう。Shader Graphで作ると画像を差し替えることで使い回すことが出来ますよ。
画像を表示するところまで
まずはShader Graphを使って草を表示するところまで作って見ましょう。
プロジェクト作成
ShaderGraphを利用するため、3DのURPプロジェクトを選択してください。
アセットストアから画像を入手
今回は下記アセットを利用したいと思います。Grass画像以外にお花の画像もあります。入手したら、プロジェクトにインポートしましょう。
今回の主役であるShader Graphを作成する
プロジェクトビューを右クリックしてCrate>Shader Graph>URP>Lit Shader Graphからシェーダーグラフを作成します。作られたShader Graphの名前はGrassShaderとします。ダブルクリックしたらエディターが起動すると思います。
草を表示するシェーダー作成
まずはシンプルに草を表示させるシェーダーを作成してみます。
Black board や Inspectorの設定
グラフ本体の前に、変数やインスペクターの設定を行います。下図を参考に設定してください。
MainTexture : 草の画像をセットします。私の方ではgrass01で進めます。
赤で強調している部分以外の設定以外も異なる場合は合わせてください。
設定 | どうなる? |
---|---|
Surface Type | 画像が透けます |
Render Face | 後ろから見たときに表示される |
Alpha Clipping | 透明部分を透かす 影が表示されているところのみ適応される |
Graph本体
まずはシンプルに表示されるシェーダーを作成しましょう。下図を参考に組み上げてください。Normal用の画像がある場合はそれ使ってもいいのですが、ない場合はNormal From Textureでもそれっぽく仕上がります。
マテリアルを作って表示してみる
表示を行うにはマテリアルを作成して、Quadに貼り付けて表示させます。
マテリアルを作成
GrassShaderを右クリックして、Create>Materialからマテリアルを作成します(GrassMaterial)。もちろん普通にマテリアルを作った後に、Shader部分をShader Graph>GrassShaderでも構いません。
Quadを作成
表示に利用するQuadを用意します。3D Object>Quad で作成します。座標などはReset位置でもいいですが、地面に埋もれていると思うので、少し上にあげておきましょう。
プレビュー
作ったQuadにGrassMaterialをドラッグアンドドロップや、マテリアルを差し替えて、下図のようになれば成功です。
影が四角いままだったりする場合は、Inspectorの設定が不十分だったり、利用した画像にアルファ情報がなかったりする場合がありますので、そのあたり修正しながら試してみてください。
草を揺らす!
ここからは実際に草を揺らしていこうと思います。揺らしは2段階。まずは水平に揺らして、垂直方向に揺れの制限を加えて草っぽく仕上げて行きましょう。
水平方向に揺らす
基本的にはこれが出来ればクリア同然です。水平に揺らす考え方としては、主に3つの要素で作成します。時間によって変化し、テクスチャのUV座標をオフセットさせます。移動方向は水平向きに当たるx座標のみ変化するように調整。
変数とその役割は以下
変数 | 役割 | 初期値 |
---|---|---|
Wind Movement | 風の移動出来る量 yを0にしておくことで横だけに揺れる | (3.0f , 0f) |
Wind Density | 風の密度 数字が大きいほどうねる! | 0.5 |
Wind Strength | 風の強さ 数字が大きいほど激しく揺れる | 0.2 |
シェーダーの変更が済んだらSave Assetで保存してください。すると草が横方向に揺れ始めると思います。
上下で揺れ具合を調整する
上下の調整は最後の方のCombine後にY方向にグラデーションさせるようにLerpを利用して調整します。
コメント