このチャプターでは、グレースケール画像に色を付ける方法をいくつか紹介します。

使用するノード

• Multiply ノード
• Lerp ノード
• Smoothstep ノード
• Sample Gradient ノード
• Sample Texture 2D ノード

など

1色 (Multiplyノード)

Multiplyノードを使うと、グレースケール画像を1つの色で着色できます。
この方法は、表現全体を一つの色で統一したい場合に活躍します。

利用例 : ホログラム表現

ホログラム表現では、Multiplyノードを使って着色しています。

2色 (Lerpノード)

Lerpノードを使うと、グレースケール画像を2つの色で着色できます。

3色 (Smoothstepノード + Lerpノード)

Smoothstep と Lerp を組み合わせることにより、3色を混ぜることができます。

Float値を変化させれば、色が混ざる位置も変化します。

以下のような星形のグレースケール画像に着色した場合

以下のような結果になります。

活用例 : 爆発を作る

以下のようにノードを組むと、グレースケールのノイズテクスチャを加工して、爆発っぽく見せることができます。

グラデーションを使った着色 (Sample Gradientノード)

Sample Gradientというノードを利用することで、
カラーグラデーションを利用してグレースケール画像に色を付けることができます。

Gradientノード

Gradientノードを利用することで、グラデーションを単体で扱うことができます。
複数のグレースケール画像に同じ色をつけたい場合に活躍します。

Gradientは、プロパティとして定義することもできます。

Expose不可

GradientのプロパティはExposeすることができないため、
Inspectorからのグラデーション変更は不可能です。

Rampテクスチャを使った着色

Rampテクスチャ(カラーのグラデーションが含まれる画像)を利用することで、グレースケール画像に色を付けることができます。

グレースケール画像の色をRampテクスチャのUVとして利用することで、画像に色が付きます。

色の置き換えについて

テクスチャの各ピクセルにて、明るさに応じた色の置き換えが行われます。

黒い部分(色の値=0)は UV = (0, 0) 扱いになるため、Rampの左端(左下)がサンプリングされます。
白い部分(色の値=1)は UV = (1, 1) 扱いになるため、Rampの右端(右上)がサンプリングされます。

色がはみ出る問題の対策

色がはみ出る問題

グレースケールの暗い部分に対して、Rampテクスチャの明るい部分の色が出るという不具合が発生することがあります。

Wrap ModeをRepeatにするとはみ出る

この現象は、テクスチャ設定のWrap Mode が Repeat の場合に発生します。

Wrap ModeをClampにする

Wrap ModeをClampに設定することで、色がはみ出なくなります。

Sampler State

もう一つの方法は、Sampler Stateノードを利用する方法です。
Sampler StateノードのWrap を Clamp に設定することで、色がはみ出ないようにすることができます。

Rampテクスチャの作成 (Substance Designer)

Substance Designerを利用したRampテクスチャの作成方法を紹介します。

Gradient Linearを使ってグラデーションを作り、Gradient Map ノードを適用することで、カラーグラデーションを作ることができます。