クラスター開発者ブログ

Shader Forgeを使って部位ごとにテクスチャや色を変更できるシェーダを作る

デザイナーの吉岡です。

凝った効果や表現の実現にはシェーダが欠かせません。

cluster.でも独自のシェーダを使っていますが、これらは直接コードを書いたものではなく、Shader ForgeというAsset(有償)を利用して作りました。

ノードベースのインターフェースで視覚的にシェーダを組むことができ、ノンプログラマーでも簡単にシェーダを作ることができます。

例として、ユーザーのプロフィール画像によって顔のテクスチャが変化するアバターのシェーダを紹介します。

アバターの例

事前準備

3DモデルのUV座標は規則的に展開する

アバターのUV座標は、色やテクスチャわけに適した形で展開します。

部位ごとにそれぞれ、体を左上(x:0〜0.5, y:0.5〜1)に、アンテナの球体部分を右上(x:0.5〜1, y:0.5〜1)に、そしてプロフィール画像を描画する顔部分を左下(x:0〜0.5, y:0〜0.5)に収めて展開します。

このようにある程度規則的にしておくことで、シェーダを組む時間がグッと減ります。

規則正しくアバターのUV座標を展開した図

シェーダを組む

Asset StoreからShader Forgeをダウンロードしてインポートしたら、[メニュー > Window]からShader Forgeを選択します。

ウィンドウが開いたら[New Shader]をクリックして基本となるシェーダを選択します。今回は、[Lit(PBR)]を使用します。

編集画面の左上に表示されているプレビューは、表示するオブジェクトを変更できるので自分が用意したものに変更しておくと、ノードの効果がよりわかりやすいです。

Shader Forgeの編集画面

RGBチャンネルを使って色をわける

色やテクスチャの色情報が反映される状態までノードを組みました。

Base Colorに接続されているChannel Blendは、Maskに入力されたRGB情報を元にそれぞれ出力する色を変更してくれるノードです。

RGBで塗り分けた画像をMaskに入力し、RcolにColor、GcolにAccent Color、Bcolにテクスチャの色情報を入力しています。色やテクスチャは任意に変更が可能です。

ただ、顔部分に表示するテクスチャをそのまま入力しているため、画像の左下部分のみ表示されています。

Channel Blendを使って出力する色を変更した図

テクスチャの密度を最適なサイズに調整する

テクスチャをUV座標に対してどのように割り当てるかを調整するには、Texture 2Duvに編集したUV座標の情報を入力します。

ここではUV Coord.で取得したUV情報に2を掛けて密度を上げて入力しています。

あとは新しいマテリアルに作ったシェーダを設定して完了です。

テクスチャの密度を調整した図

表現の幅を広げる

公式の情報に一通り目を通しておきます。

  • チュートリアル
    • 操作の雰囲気とできることのイメージがわきやすくなります
  • ノード一覧
    • 取得できる情報や扱える値を一覧できるので、新たな表現を考えるときの役に立ちます

よく見かける表現は、Wikiに例がまとめられています。
例を元に少しずつ変更を加えていってオリジナルのノードを組むのも良いと思います。

さらなる組み方に関する情報は、画像検索サービスを利用した方が視覚的に確認できて見つけやすいです。

このエントリーをはてなブックマークに追加