[UE5]Color CurveをMaterial Functionで設定するには

執筆バージョン: Unreal Engine 5.5

こんにちはこんにちは！アートディレクターのくろさわです。
今回はColor CurveをMaterial Functionで使用する方法を解説します。

Color Curveとは？

Unreal Engineには、Color Curveという機能があり、入力値の変化を指定したグラデーションに変換できます。これはPhotoshopのトーンカーブやMayaのRampに相当し、明暗を任意のグラデーションに変換するという意味合いにおいてはPhotoshopのグラデーションマップとも似た機能です。通常、グラデーションマップは外部ツールで作成しますが、UEのColor Curveを使えば、エンジン内で直接編集できます。

外部ツールを使わずに細かい調整ができるので、UIのデザインや簡易的なアニメーション、トゥーン表現に活用されます。

Color Curveはそのままではマテリアル内で使用できません。Curve Atlas を使用することで、複数のColor Curveを1つのリソースとしてまとめ、マテリアルから扱いやすい形式に変換して使用します。

Curve Atlasとは？

Curve Atlasは、複数のColor Curveを管理し、テクスチャのように扱える機能です。Curve Atlasを使用することで、Color Curveを1枚のテクスチャのように扱うことが可能になり、マテリアル内で自由に参照できるようになります。

Curve Atlasはパッケージ化すると通常の画像テクスチャとして扱われるため、パフォーマンス的にも最適化された形で使用できます。

Color Curveを使った例

Color Curve は Miscellaneous / Curve を選ぶとフローティングメニューが出るので、Curve Liar Colorを選ぶと作成できます。Curve Atlasは Miscellaneous / Curve Atlas を選ぶと作成できます。

Color Curveを使うには、Curve Atlas Row Parameter を利用する方法が一般的です。

簡単な作例として、トゥーン風表現、時間でグラデーションが変化するマテリアル、時間で動くマテリアルを作成してみました。

簡易的なトゥーン表現

Curve Atlas Row Parameter は作成すると、Paramという表記に簡略化されます。

時間でグラデーションが変化するマテリアル

Frac行うことで小数点だけが出力されるので、Color Curve の値にフィットします。

時間で動くマテリアル

こういう円状の運動は三角関数で作った方が良いですが、近似的な表現はカーブでも作れます。

「Curve Atlasはパッケージ化すると通常の画像テクスチャとして扱われる」ということに触れましたが、動きを作る場合には特に注意が必要です。Curve Atlasのインターフェイス的にはマイナスを持ちますが、画像なのでマイナスの値は拾うことが出来ません。上記の例のように0.5が中心になるようにカーブを作成しておき、0が中心になるようマテリアルの中で処理を加える必要があります。

弊社のブログには他にもColor Curveの活用方法がありますので、よかったら参考に読んでみてください。

参考記事：Color Curveを使用したUEマテリアルの活用例

Color CurveをMaterial Functionで設定するには？

通常、マテリアル内でColor Curveを使用する場合、Curve Atlas Row Parameter を利用します。しかし、Material Function内でこれをFunction Inputとして直接パラメーター設定することはできません。そのため、別の方法でColor Curveを使用する必要があります。

Texture Sampleを使用する方法

Material Function 内で Color Curve を扱うには、Texture Sample を使用することができます。
Texture Sample は単なる画像の表示機能だと思われがちですが、入力された座標（通常は UV 座標）を基に、対応するテクスチャデータ（色や値）を取得する機能を持つ “データルックアップツール” として捉えることもできます。

Color Curve は、「入力値の変化を指定したグラデーションに変換できる機能をもつ」とこの記事の冒頭に書きましたが、実際のところ、これはTexture Sampleの説明にほかなりません。次元を圧縮した1D テクスチャ（グラデーションテクスチャ）を使用することで Texture Sample でも同様の処理が可能になります。
そのため、Curve Atlas Row Parameter の代わりに Texture Sample を用いることで、Function Inputが受け取れる形にすることができます。

具体的には以下のように設定します。

Material Functionを作成し、3つのFunction Inputを設定します。

Column

- Curve Atlasの横方向（U軸）の値を指定します。
- これはColor Curveの入力値となり、例えば、トゥーンシェーディングのサンプルでは、ライトの角度とPixelNormalの内積から得られる陰影情報を入力します。
- Appendノードを使用し、UVのU座標として利用します。

RowNumber

- Curve Atlas内で、どのColor Curveを使用するかを指定します。
- これはCurve Atlasの縦方向（V軸）の値を決定するために用います。

CurveAtlas

- Texture2D型のパラメータで、使用するCurve Atlasのテクスチャを指定します。
- Texture Propertyノードを用いてテクスチャの解像度を取得し、RowNumberの値と組み合わせてUVのV座標を計算します。

計算に0.5をAddしているのは別のグラデーションと混ざり合わないためです。
Curve Atlasには複数のグラデーションが接続されますが、テクスチャ化するときに補完が入るので他のグラデーションと溶け合ってしまいます。0.5をAddすることで、他のテクスチャの影響を受けない芯の部分をPickできます。

このMaterialFunctionの使用例です。
Texture Sampleを使うことで、Curve Atlas と何番目のカーブを使うかを選ぶことができるようになりました。