環境: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」に接続します。これで以下のような結果となります。
色を変更するには、Colorノードのプレビュー領域をダブルクリックすると色の変更パレットが表示されます。HEXコードの入力も可能です。
Photoshopと同じ色にしたい場合は「HexsRGB」項目を使ってください。
Multiplyなので「乗算」の効果になります。元の色を残しつつ暗くするための一つの方法です。
実例として犬のテクスチャを使いますが、本来はグレースケール形式のテクスチャをおすすめします。
チャネルの使用も可能
基本的にはRGBの出力値を使用しますが、各チャネルを個別に使用することも可能です。
チャネル上のグレースケールはPhotoshopのチャンネルレイヤーと同様です。
チャンネル一つで試すと、上記の例と比べて青が鮮やかに見えます。
RGB値を使わず、A値だけOpacityに接続すると完全な塗りつぶしになり、シルエット化ができます。
Addノードで加算効果
[使用マテリアル :M_Colors_Add]
Multiplyノードの代わりにAddを使うと、色が明るくなります。
これは加算の効果です。
HUEの変更
[使用マテリアル :M_Colors_Hue]
Photoshopでは「Ctrl+U」の色調整メニューと同様です。色を足して塗るのではなく、画像の元色を塗り直します。「HueShift」ノードを置いてそれにScalarParameterをつなげます。そのパラメーター値の動作範囲は「0~1」の間です。
0~1の間で0.1刻みの結果を出力し、テクスチャを作成してみました。
固定のパラメーターの代わりにTimeノードをつなげると、カラーアニメーションを作成できます。