Chapter 09無料公開

🔰色効果に関するノード

Yukiya
Yukiya
2024.10.20に更新

環境:UE5.4
作成マテリアル:M_Colors_Add, M_Colors_Blends, M_Colors_Default, M_Colors_Hue, M_Colors_Mono, M_Colors_Overlay

前書き

この章では色に関するノードをご紹介します。恐らくアーティストにとっては、ワクワクする楽しいトピックになるでしょう!
テクスチャのHUE(色味を表す要素)の変更や、Photoshopにあるレイヤー効果モードの再現方法を説明していきます。

色パラメーターの追加方法

[使用マテリアル :M_Colors_Default]

まず色を表すパラメーターから追加しましょう。
色というのは数学から見れば「R,G,B,A」4つの情報を持ち、4次元ベクトルとして扱われます。サイドメニューから「VectorParameter」を選択し名前を任意に定義します(例:Color)。

それから、「Multiply」ノードを追加してColorパラメーターと「TextureSample」のRGBにつなげます。
背景が透明になるように、TextureSampleの「A」を「Opacity」に接続します。これで以下のような結果となります。

ColorsMultiply.png::色をテクスチャにかける

色を変更するには、Colorノードのプレビュー領域をダブルクリックすると色の変更パレットが表示されます。HEXコードの入力も可能です。
Photoshopと同じ色にしたい場合は「HexsRGB」項目を使ってください。

20240924_Colors_ColorPalette.gif::色変更のパレット

Multiplyなので「乗算」の効果になります。元の色を残しつつ暗くするための一つの方法です。
実例として犬のテクスチャを使いますが、本来はグレースケール形式のテクスチャをおすすめします。

チャネルの使用も可能

基本的にはRGBの出力値を使用しますが、各チャネルを個別に使用することも可能です。
チャネル上のグレースケールはPhotoshopのチャンネルレイヤーと同様です。
チャンネル一つで試すと、上記の例と比べて青が鮮やかに見えます。
20240924_Colors_OnDifferentChannels.gif::各チャネルの使用例

RGB値を使わず、A値だけOpacityに接続すると完全な塗りつぶしになり、シルエット化ができます。
ColorsAlphaOnly.png::アルファのみ

Addノードで加算効果

[使用マテリアル :M_Colors_Add]

Multiplyノードの代わりにAddを使うと、色が明るくなります。
これは加算の効果です。
ColorsAdd.png::加算結果

HUEの変更

[使用マテリアル :M_Colors_Hue]

Photoshopでは「Ctrl+U」の色調整メニューと同様です。色を足して塗るのではなく、画像の元色を塗り直します。「HueShift」ノードを置いてそれにScalarParameterをつなげます。そのパラメーター値の動作範囲は「0~1」の間です。
ColorsHueShift.png::HUEの変更

0~1の間で0.1刻みの結果を出力し、テクスチャを作成してみました。

HueFinale.png::前結果HUE変更

固定のパラメーターの代わりにTimeノードをつなげると、カラーアニメーションを作成できます。
20240924_HueChangeWithTime.gif::タイムカラーアニメーション

白黒

[使用マテリアル :M_Colors_Mono]

彩度調整ができるノードもあります。Desaturation(彩度低下)ノードです。値の領域は同じく「0~1」の間で、高ければ高いほど白黒になります。
ColorsDesaturation.png::白黒

ブレンドモード

[使用マテリアル :M_Colors_Overlay & M_Colors_Blends]

ブレンドモードはPhotoshopのようにいくつかあります。
日常ではほぼ使いませんが、強いて言うなら「Overlay」をごく一部に使用してます。
エフェクトやアニメーション用でない限り、Photoshopでテクスチャに効果を前もってつけておくと、処理負荷を軽減できます。

ColorsBlend_OverlaySample.png::Overlayの例

例えば「Difference」の場合は、これほど異なる効果が得られます。
ColorsBlendDifferenceSample.png::Differenceブレンド

同じ緑色を使ってブレンドモード効果をすべて出してみました。
BlendFinale.png::ブレンド全効果

画像内の右列のブレンドノードだけが反転しています。
BlendWarning.png::反転ブレンドノード

色に関するノードの解説はこれで終わりです。