対象： Unity中級者
こちらの動画ではProBuilder、Polybrsh、ProGrid、Shader Graphを用いた効率的なレベルデザインついて解説しています。このページでは上記の動画の中で紹介しているテクニックから、下図の様な風を受けてはためいているカーペットをProBuilderとShader Graphで実現する方法を紹介します。
ProBuilderはUnity上でジオメトリの構築、編集、テクスチャリングができるモデリングツールです。このページでは頂点カラーをペインティングする方法を学べます。Shader Graphはノードを繋げるだけでオリジナルのシェーダーを作成できるツールです。このページでは頂点カラーの値を元に頂点アニメーションを行うシェーダーの作成方法を学べます。これらの機能を組み合わせることで比較的低コストに小物のアニメーション表現を学ぶことができます。
使用環境を以下に示します。
- Unity 2020.2.7f1
- Windows 10(21H2)
基本的にWindows 10で検証していますが、macOSでも利用できますのでご安心ください。
目次
サンプルアセット
下記のURLにテクスチャファイルを格納しましたのでご利用ください。
https://forpro.unity3d.jp/wp-content/uploads/2022/03/ForProSamples-2.zip
ProBuilderによるカーペットの作成
まずは新規プロジェクトを作成します。テンプレートは「3D(URP)」を選択してください。Shader GraphがBiRP(Built-In Render Pipeline)でも使えるようになったためBiRPでも問題ありませんが、今回参考している動画がURPのためそちらに合わせました。
次にProBuilderをインストールします。Package Manager経由でインストールします。
次にProBuilderのSampleに含まれる「Universal Render Pipeline Support」をインストールします。これはProBuilderのデフォルトマテリア理が格納されています。ですが、自分で設定しないと使えませんので、サンプルパッケージのインストール後に設定するのを忘れないようしましょう。
それではProBuilderのデフォルトマテリアにURP用マテリアルを設定します。UnityのメニューからEdit > Preferencesを実行し、ProBuilderを選択します。次にMesh SettingsのMaterialsに「ProBuilder Default URP」をセットします。
準備ができました。それでは早速カーペットを作成します。PlaneやQuadを加工しても良いのですが、それだと厚みが無いため、ここではCubeを薄く引き伸ばして作成します。次にいくつか分割します。頂点数が増えればそれだけ細かくアニメーションを指定できます。ですが、余り沢山増やしても不自然な感じになるので、様子を見ながら増やしていくのが良いでしょう。図を参考に分割して、適当なところで折り曲げてください。
モデリングが苦手な方は配布したパッケージの中に作成済みのモデルがありますので、必要であればご利用ください。
これをSceneビューにドラッグ＆ドロップしたあと、Carpet > Cubeを選択します。
そして、Tool > ProBuilder > Object > Pro Builderizeを実行してProBuilderで編集できるようにしてください。
Shader Graphによる頂点アニメーションの作成
次に頂点カラーによる頂点アニメーションを行うシェーダーの作成です。SubGraphを用いているため見た目はすっきりしています。それではCarpetColorShakeグラフを開いてください。
開くと大きく「Shake effect」（上）と「Visuals」（下）の2つに処理が分かれているのが分かると思います。そして、上下に関わっている重要なパラメータは「Vertex Color」です（左中央）。
Shake Effectは頂点カラーのRGBの値をShake(サブグラフで定義)で乗算し、オブジェクトの頂点座標に加算しています。
Shake SubGraphはSimplexNoiseとSinカーブの乗算によるグラフです。3つパラメータが用意されていて調整ができます。
Shake Frequency: 振動周波数。値を大きくすると早く動く。
Shake Amplitude: 振幅。値を大きくすると揺れが大きくなる。
ShakeAxis: 振動方向：XYZにそれぞれ移動の可否を指定。1で最大移動、0で動かないとなります。
まとめると、各頂点は頂点カラーのRGBの値に基づきXYZ方向に揺れます。例えばB(青)ならZ方向に揺れます。これで周期的な動きをさせたい方向の色を頂点カラーとして設定することで頂点がアニメーションします。全体的な調整は「Shake Frequency」と「hake Amplitude」で行います。
次にCarpetColorShakeグラフの下の方にある「Visuals」の方を見てみましょう。「PBR Inputs」はSubGraphです。これはURPのLit Shader相当の機能を提供するために似たような処理まとめているグラフです。興味がある方は追いかけてみてください。この「Visuals」のポイントは右上にあるBranchノードです。これはパラメータ「ColorView」の値により、画面出力に頂点カラーかAlbedoのいずれかを選択することができます。この機能により、揺れを編集するときは「ColorView」をチェック(True)に、リリース時は「ColorView」のアンチェック(False)にすることでUnityだけで揺れの編集ができます。
シェーダーの動きが分かったのでマテリアルを作成してCarpetモデルに適用しましょう。
上記のマテリアルを適用すると次のようになるはずです。
Albedoを見ると赤い部分がありますが、UV Editorで確認すると青い部分のみ使用しているのが分かると思います。
頂点カラーの編集と揺れの確認
最後に頂点カラーを設定て揺れを確認しましょう。まずはSceneビューのCarpet > Cubeに対して、Assets > ForProSamples > Materials > CarpetWaveマテリアルを適用します。
マテリアルを適用すると少し動きがあると思います。より分かりやすくするために、Sceneビューの上部にあるメニューから「Always Refresh」を選択しましょう。
さて、勝手に動いているので一旦止めたいと思います。まずは評点カラーを表示するモードに切り替えましょう。頂点カラーを表示するには、Inspectorの下部にあるマテリアルのプロパティの中から、「ColorView」を見つけてチェックしてください。
するとモデルが真っ白になります。つまりすべての頂点に白(RGB=1.0, 1.0, 1.0)と設定されていたため全方向に動いていました。これを黒にすることで止めることができます。
Tools > ProBuilder > Edtiros > Open Vertex Color Editorを実行して頂点編集ウィンドウを開きます。
ウィンドウの位置は自由ですが、この辺に置いておくと良いでしょう。
まずは全体を黒にしたいのでオブジェクト選択モードにします。
Carpet > Cubeを選択し、黒の隣にある「Apply」ボタンをクリックします。これで動きが止まりました。
次に頂点の編集選択モードにします。
次にカーブの下の辺りの頂点を選択します。
矢印の色を確認してください。例えば手前と奥に揺らしたい場合は「青」を設定すれば良いと言うのが分かりますでしょうか？試しに設定してみましょう。
どうですか、上手く揺れましたか？このような感じで揺らしたい頂点を選択して、揺らしたい方向の色を設定するだけでアニメーションができます。設定が終わったら、マテリアルの「ColorView」のチェックを外しましょう。ここでは1つの頂点しか試していませんが、色々な頂点カラーを設定して確かめてみてください。
おわりに
頂点カラーはシェーダーやProBuilderを学び始めた時に利用しますが、それっきりになっている方も多いと思います。しかし、応用次第でこのような活用例もあるので皆さんも色々と工夫して面白い活用方法を見つけてください。
このブログでは今後も様々なUnityの機能について情報を発信していく予定ですのでご期待ください。
