Unity 2018.2 でシェーダーグラフに「Vertex Position(頂点座標)」の入力が追加され、メッシュの調整とアニメーション化が可能になりました。本記事では、ユーザー独自の頂点アニメーションシェーダーの作成方法と、いくつかの一般的な例(風や水のシェーダーなど)をご紹介します。
シェーダーグラフにまだ馴染みのない方は、主な機能について説明した Tim Cooper のブログ記事をお読みください。また、Unity の YouTube チャンネルで Andy Touch の講演動画「Shader Graph Introduction」(英語)もご視聴いただけます。
このシーンはテクスチャやアニメーションアセットを一切使用していません。すべての要素の色付けとアニメーション化は、シェーダーグラフを使って行われています。
シェーダーはレンダリングパイプラインの非常に強力な要素で、シーンアセットの表示に対する高度な制御を可能にするものです。一連の入力や操作によって、アセットの各種レンダリングプロパティ(サーフェスの色やテクスチャからメッシュの頂点位置まで)を調整するシェーダーの作成が可能です。また、それらを組み合わせて複雑で表情豊かなアニメーションを作ることもできます。本記事では、頂点アニメーションの作成を始めるためのガイドをお届けするとともに、マスクやプロパティの使用方法と、『Desert Island Scene』用のシェーダーがどのように作成されたかをご紹介します。
GitHub のレポジトリをクローンして入手または GitHub から .zip ファイルをダウンロードして入手
サンプルプロジェクト『Desert Island Scene』をダウンロードし、ご自分でシェーダーを操作してみてください!このプロジェクトには、シェーダーグラフの使用を開始するために必要なものがすべて含まれています。このプロジェクトは、バージョン 2018.2 以降の Unity で起動してください。
『Desert Island Scene』に含まれるすべてのシェーダーはカスタマイズされる前提で作成されていますので、インスペクターでシェーダーの色々な値を自由に変えてみてください!各オブジェクトには、値をデフォルトにリセットするプリセットファイルが含まれています。
このプロジェクトにはクリエイティブ・コモンズ(表示 4.0 国際)ライセンスが採用されています。
シェーダーグラフを使用するには、プロジェクトが以下の要件を満たしている必要があります。
シェーダーグラフをインストールするには、プロジェクトを作成するか 2018.2 以降のバージョンに更新し、メニューを Window > Package Manager > All の順に選択して、リストの中から「Shader Graph」 を探して「Install」をクリックしてください。
シーンビューでマテリアルにアニメーションが付いていない場合は、「Animated Materials」にチェックマークを入れてください。
Making something fancy with Shader Graph?
You can preview Animated Materials by clicking the little picture drop down at the top left of the scene view #UnityTips #Unity3D pic.twitter.com/AwxQ5jj2Sg— John O'Reilly ? (@John_O_Really) July 17, 2018
複雑な計算を使って動きの作成を開始する前に、まずは、何を動かすのかを理解する必要があります。
シーン内のメッシュには以下の 4 種類の Space があります。
Position ノードのドロップダウンメニューで、どの Space に影響を与えるか選択できます。
Split ノードを使って、どの軸に影響を与えるか選択できます。
Split ノードは 4 つのチャンネルへ出力します。最初の 3 つは Transform の軸(R=X、G=Y、B=Z)に対応しています。上の例では、オブジェクトの Y 軸に 1 を加えています。これはオブジェクトをそのローカル座標の Y 軸に沿って正方向に 1 動かすことに相当します。
場合によってはワールド空間においてオブジェクトを動かしたいこともあります。これを行うには、Position ノードで World を選択し、出力を Transform ノードを使用してオブジェクト空間に変換し戻します。
以上でメッシュの動かし方が理解できました。ここで、エフェクトを制御する方法を理解しておくと役立ちます。
Lerp などのノードを使用すると、2 つの値の間でブレンドを行うことができます。T 入力は Lerp の制御値です。T 入力が 0 の時(黒く表示される)は A チャンネルが使用されています。入力が 1 の時(白く表示される)は B チャンネルが使用されています。下の例ではスライダーを使用して 2 つの入力をブレンドしています。このスライダーの代わりに、以下でご紹介する方法のどれかを使用することも可能です。
白黒テクスチャの場合、詳細なシェイプを使用してメッシュを押し上げることができます。上の例で、白は範囲内における最大の高さを表し、黒はメッシュの位置に全く効果が及ぼされていない状態を表しています。黒の数値は 0 であり、0 をメッシュの位置に加えてもメッシュは動かないからです。
Vertex Position(頂点座標)にテクスチャを使用するには、通常の Sample Texture 2D ノードではなく Sample Texture 2D LOD ノードを使用する必要があります。テクスチャは、特殊な形状のマスクや一定量のフォールオフが必要な場合などに特に便利です。
テクスチャマスクと似ていますが、UV マスクでは、UV Unwrap に応じて、メッシュのどの部分に効果を及ぼすか選択できます。上のキャプチャー画像では、UV の U 軸を使用して左から右へのグラデーションを作成しています。グラデーションにオフセットを加えるには Add ノードを、強度を上げるには Multiply ノードを、フォールオフを増加させるには Power ノードを使用してください。
各頂点が、Vertex Color と呼ばれる一揃いの Vector3 情報を格納しています。Polybrush パッケージを使用すれば、頂点色をエディター内で直接ペイントできます。あるいは、3D モデリングソフトウェア(3ds Max、Maya、Blender、3D Coat、Modo など)を使って頂点色をアサインすることも可能です。ほとんどの 3D モデリングソフトウェアは、デフォルトでは RGB の最大値が各頂点にアサインされた形でモデルをエクスポートする設定になっていることも覚えておくと良いでしょう。
上のキャプチャー画像では、分割された Vertex Color ノードの成分のうち、赤(R)のチャンネルが Lerp ノードの T チャンネルに接続されて、マスクとして機能しています。入力が 0 の場合に Lerp ノードの A チャンネルが使用され、入力が 1 の場合に B チャンネルが使用されています。結果、上のセットアップでは、頂点に赤の頂点色が割り当てられている場合にのみ Y 軸に 1 が追加されることになります。
Normal Vector ノードを使用すると、メッシュの面の向きによって入力をマスクすることができます。ここでも、効果を及ぼしたい軸(R=X、G=Y、B=Z)を Split ノードで選択できます。上のキャプチャー画像の例では、Y 軸を使ってマスクすることで、上を向いた面だけが正数値になるようにしています。0 と 1 の間でない値は Clamp ノードを使用してすべて破棄することがポイントです。
この一連のノードは、ワールド空間におけるオブジェクトの Y 軸座標が 0 より大きい場合に入力をマスクします。
シェーダーをビルドする時、思い通りのエフェクトを実現するための適正な入力値を得るのが難しいこともあります。このために(そして後々のプレハブとプリセットのカスタマイズのためにも)、プロパティを使用することが重要です。
プロパティを使用すれば、シェーダーがコンパイルされた後でその値を修正することができます。プロパティを作成するには、Blackboard(右画像)上で、「+」印をクリックしてください。プロパティには 6 つの種類があります。
旗のシェーダーは、オブジェクト空間で、サイン波を旗を横切る形でパンさせて実現しています。UV マスクを使用して左側が動かないようにしています。
風のシェーダーは、ワールド空間 Gradient Noise を単一の軸に沿ってパンさせることで、草と葉を穏やかに押し引きしています。
このシェーダー内では、オブジェクトの軸方向に生成されるサイン波によって魚を動かしています。その上で、魚の頭部のマスクを取り除くことで頭部が動かないようにしています。
最後は、海のシェーダーです!このシェーダーは、メッシュの上部を、スケールと角度の異なる 3 つのサイン波を使用してオフセットします。これらのサイン波は、波の谷間と先端の色の生成にも使用されています。
シェーダーグラフの使用を開始したい方には、GDC で行われた Andy Touch の講演(英語)のご視聴をお勧めします。本記事でご紹介したもの以外のシェーダーグラフの例をご覧になりたい方は、Andy が GitHub で公開している Example Library をご利用ください。
各ノードの説明も含め、シェーダーグラフに関する詳細な資料は、 GitHub の Shader Graph developer Wiki(英語)をご参照ください。シェーダーグラフの世界を探索して、「Graphics Experimental Previews」フォーラム(英語) にもご参加ください!そして、あなたがシェーダーグラフで制作している素敵なプロジェクトをぜひご紹介ください!私の Twitter アカウント(@John_O_Really)に、お気軽にご連絡ください!
Is this article helpful for you?
Thank you for your feedback!