【UE5】ナイトビジョンポストプロセス作ってみる

これで夜もばっちり(/・ω・)/

今回はナイトビジョン風のポストプロセスを作成します！
FPSでよくある雰囲気なものを目指せたらなと思います。

全体的に暗い場所でも見えるような、
ナイトビジョンのマテリアルを作ってみました。
ノイズなしでだいぶクリーンに見える形です。#UE5 pic.twitter.com/41sYVlBcxH

— アルゴンブログ公式 (@Argonblog) 2026年10月17日

◆各種参考リンク
夜の表現を設定する紹介動画
各種ポストプロセス紹介動画

※UE4/UE5の機能になります。
※書き間違え等あればコメントください！
※実際に動作させたのはこちらになります。

• ■目次
• ○マテリアルとその他ファイル用意
• ○ナイトビジョンマテリアルの作成
• ○ポストプロセスの切り替え動作
• ○最後に

マテリアルとその他ファイル用意

いつも通りの流れですがコンテンツブラウザを右クリックして、
マテリアル → マテリアルを選択します。

今回はマテリアルパラメータコレクションも作成します。
マテリアル → マテリアルパラメータコレクションを選択します。

今回マテリアルパラメータコレクション内には、
AlphaというScalaパラメータを指定してあげます。

それからナイトビジョン風の仮Maskも兼ねて画像も作りました、
黒い範囲が見える範囲にしていしています。

それでは実際にマテリアルを作成していきます。

・目次に戻る

ナイトビジョン用マテリアルの作成

まずはマテリアルのマテリアルドメインを変更します。
今回はPostProsessに変更しておきます。

実際にマテリアルを作成します。
マテリアルの仕組みとしては下記になります。
1.現状の表現にナイトビジョン用の色をブレンドして明るさを乗算する
2.画像の白黒を反転して値を乗算して見える範囲を指定する
3.マテリアルパラメータコレクションで適応度合いを変化する

以上でナイトビジョン用マテリアルの作成は終了です。
今回PostProsessVolumeを活用しているのでそちらの設定も行いましょう！

・目次に戻る

ポストプロセスの適応と各種設定

PostProcessの前にDirectionalLightの設定を変更します。
今回はDirectionalLightのLightColorを黒に近い灰色に設定します。
色の値：RGBどれも0.036を指定

続いてPostProcessの方を設定していきます。
設定項目のレンズ→ExposureのEV100の部分を変更します。
※Min/Maxどちらも0に指定

こちらができたらポストプロセスマテリアルを指定します。
レンダリング機能→ポストプロセスマテリアルで、
作成したナイトビジョンのマテリアルを適応します。

最後に操作キャラクターの方の動作BPを作成します。
キャラクターBPの方にNキーのデバッグキーのイベントを追加して、
FlipFlopの切り替えとタイムラインを組み合わせて作成します。

タイムラインはフロートトラックを作成します。
長さ1.0で作成して下記キーフレームを作成しています。
開始キーフレーム：時間：0、値：0
最終キーフレーム：時間：1、値：1

以上が今回の説明になります。
夜の表現の状態とナイトビジョン状態の比較画像を置いておきます。

・目次に戻る

最後に

ポストプロセスでナイトビジョンを再現する方法を、
今回紹介させていただきました。

こちらはほかにサーマルなどに活用したり、
他の海の中での表現に活用したりしてもらえたらと思います。

・目次に戻る

【UE5】ToonBSDFでマネキンをトゥーンシェーディング風にする

ToonBSDFを活用しよう(^^)/

今回はUE5.8の実験機能であるToonBSDFを活用して、
マネキンをセルシェーディング風にしてみた記事になります。

下記画像が最終的な仕上がりになります。

※UE5.8の機能を紹介する記事になります。
※書き間違え等あればコメントください！
※実際に動作させたのはこちらになります。

• ■目次
• ○ToonBSDFとは何か？
• ○実際にマテリアルを作成する
• ○最後に

ToonBSDFとは何か？

ToonBSDFとはトゥーンプロファイルという、
新しいプロファイル情報を活用して簡易的に、
トゥーン表現を行えるSubstrate用のマテリアルノードになります。
実験段階ですが今後もっとできることが増えることを期待したいです！

その他参考サイト・動画は下記にまとめています。
良ければ参考に見ていただければと思います。
◎トゥープロファイルの説明など
UE5のSubstrateのToonをフライング解説 #UnrealEngine - Qiita

◎各種動画関連

ToonProfileTutorial
How To Use Toon Shading New In UE5.8 - Unreal Engine 5.8 Materials Tutorial

動画などをいろいろ見るのも大事ですがまずは触っていきましょう～

・目次に戻る

トゥーンマテリアルを作成する

各種作成する前にプロジェクト自体がSubstrateに対応していないと、
始まらない部分もありますのでプロジェクト設定を変更します。

プロジェクト一覧からの検索から、
「Substra」で検索して「層状マテリアル」をONにします。

上記設定が完了したらトゥーンマテリアル用のマテリアルを作成する前に、
トゥーンプロファイルを作成します。
コンテンツブラウザ右クリック→マテリアル→トゥーンプロファイルを選択します。

トゥーンプロファイルを開き、各種設定を変更していきます。
主に変更できるのは下記の4点になります。

・ディフューズ/スペキュラ/シャドウ/グローバルイルミネーション
今回設定変更しているのはディフューズとスペキュラを変更しています。

DiffuseRampを変更して下記の値に設定しています。
下の黒白のカラーカーブをダブルクリックすると出てきます。
3番目の定数補完にすることで2段目の薄影を強調してます。
最初：時間_0.0、値_0.0・2番目：時間_0.385、値_0.0
3番目：時間_0.47、値_0.25(キー補完_定数)
4番目：時間_0.75、値_0.44・5番目：時間・値どちらも1.0

SpecularRampも変更していて下記の値に設定しています。
最初：時間_0.0、値_0.0・2番目：時間_0.745、値_0.0
3番目：時間_1.1、値_0.457・4番目：時間_1.17、値_1.0

こちらでトゥーンプロファイルの設定は完了なので、
これからマテリアルを作成していきます。
コンテンツブラウザ右クリック→マテリアル→マテリアルを選択します。

マテリアルを作成したら今回メインで使用する、
ToonBSDFのノードを作成します。
マテリアルグラフ上を右クリックして検索から、
「toon」と入力するとToonBSDFが出てくると思います。

作成したらフロントマテリアルの個所に接続して、
ToonBSDFノードを選択した状態で、
ToonProfileに作成したトゥーンプロファイルを指定します。

そこまで作成したらマテリアルノードを作成します。
今回は下記のようなマテリアルを作成します。
1.定数は各種パラメータで管理すること。
2.Fresnelノードを活用して輪郭に色付けできること。

それでは実際に作成します。
まずはベースカラーのノード群になります。
ベースカラーのテクスチャと加えるカラーを乗算して、
StaticSwitchのON/OFFでFresnelを切り替え設定になります。

続いて各種メタリック・ラフネス・ノーマルを出力します。
まずテクスチャのRの値からメタリック、Gの値からラフネスを検出します。
名前付きリルートノードで渡します。

ノーマルもメタリック・ラフネスと同様になります。

最後に最初に作ったToonBSDFに各種リルートノードの情報を、
接続することで作成は完了になります。

作成完了したらマテリアルインスタンスを2つ作成します。
1つ目は胴体と指から二の腕までのマテリアルで、
2つ目はそれ以外の箇所のマテリアルになります。

1つ目のみ胴体と腕のテクスチャに変更します。
マテリアルインスタンスを開きます。
開いたらBase/MRA/Normalの画像を変更します。

・Base → T_Quinn_02_Dに変更
・MRA → T_Quinn_02_MRAに変更
・Normal → T_Quinn_02_Nに変更

こちらをSKM_Quiin_Simpleのエレメント0と1にそれぞれあてはめます。
胴体と指から二の腕のマテリアルインスタンスをエレメント1に指定して、
頭やその他の箇所のマテリアルインスタンスをエレメント0に指定します。

これで各種設定については完了になります。
マテリアルインスタンスに用意されたFresnelなどを変更したり、
いろいろできるようにパラメータ化していて、
色とか変更してみようと思います。

以上で今回紹介したToonBSDFの活用になります。
長くなりましたが説明は以上になります。

・目次に戻る

最後に

ここまで見ていただきありがとうございました！

トゥーンシェーダーの方法はポストプロセスで、
ワールド全体に適応したりする方法などいろいろほかにもあるので、
この記事を機会にいろいろ調べることになったら幸いです。

それではまた次の記事を見ていただけると嬉しいです！

・目次に戻る