3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【UE5】ビューポート上でテクスチャのカラーを正しく表示したい

Last updated at Posted at 2025-12-05

UEのカラーマネジメントについて、ハマったことを共有します

ビューポート上で色が正しく表示されない問題

再現手順

テクスチャを用意しました(R:255 G:180 B:131)
T_orange.png

こんな感じのマテリアルを作ります。Texture Sampleで先ほどのテクスチャをEmmisive Colorに入力。Shading ModelはUnlit(=つまり、ライティングの影響は受けないマテリアルになるのでテクスチャの色がレベル上でも再現されるはず)
スクリーンショット 2025-12-04 230009.png

このマテリアルを適当なPlaneにアサインします
マテリアルプレビュー画面でも気づきますが、明らかに色が違いますね
スクリーンショット 2025-12-04 230145.png

原因:Tonemap

ほぼデフォルトの設定なのに色が違うのは何故??と思うことでしょう
原因はUEでデフォルトで入っているトーンマップです。

参考)トーンマップ

PostProcessVolumeを追加して、Misc>トーンカーブ量で値を0にしましょう(UEではPostProcessVolumeがないレベルにもデフォルトでPostProcessがかかっているので注意)
これで、トーンマップが無効化され、元のテクスチャの色に近づきました
スクリーンショット 2025-12-04 231343.png

これで万事解決!と思いたいところですがトーンマップを切った効果はシーン全体に適用されてしまうので、他のオブジェクトの色味も変わってしまいます。特定のオブジェクトだけトーンマップの効果を外したいみたいなときは困ります

トーンマップあり
スクリーンショット 2025-12-04 231711.png

トーンマップなし
スクリーンショット 2025-12-04 231722.png

対処法①

特定のオブジェクトだけトーンマップの効果を外す方法としてSceneDepthを使う方法があります。
Planeを選択し、Render CustomDepth Passにチェック
スクリーンショット 2025-12-04 232748.png

CustomDepthが入っている確認はビューポート上の表示モード>バッファを可視化>カスタム深度でできます。
スクリーンショット 2025-12-04 232615.png

新規にマテリアルを作成して、Material DomainをPostProcessに、以下のようなノードを組みます
スクリーンショット 2025-12-04 232246.png

ざっくり説明すると
SceneTexture:PostProcessInput0:トーンマップがかかった後のシーンテクスチャ
SceneTexture:PostProcessInput2:トーンマップがかかる前のシーンテクスチャ
SceneDepthとCusutomDepth(先ほどPlaneに設定した深度)の差分を取ってマスクをすることで、CustomDepthを設定した部分にだけ、トーンマップが適用されないようにすることができます

結果

トーンマップが適用されている部分と適用されていない部分を分けることができました
スクリーンショット 2025-12-04 233234.png

しかし、よく見てみるとPlaneのエッジがじらついてるようです
スクリーンショット 2025-12-04 233327.png

原因:アンチエイリアスとトーンマップの描画順

Renderdocで確認してみます。
上から順にTSR(アンチエイリアス)、Tonemap、ポストプロセスマテリアル(PPM_BG)と処理が走っていることが分かります。
つまり、PPMで処理しているDepthのマスク部分にはアンチエイリアス処理がされていないためにエッジ部分がジャギーのように見えてしまっていたわけです。
スクリーンショット 2025-12-05 012844.png

対処法②

こちらの記事で紹介されている方法で、マテリアル側でトーンマップの影響を相殺してみます

Multiplyに接続されている方のCustomノード
スクリーンショット 2025-12-05 002058.png

return 1;
}
#include "/Engine/Private/TonemapCommon.ush"

void dummy(){

Emmisive Colorに接続されている方のCustomノード
スクリーンショット 2025-12-05 002049.png

return FilmToneMapInverse(col);

Input Name->colに変更

結果

デプスマスクを使った方法であったジャギーの問題もなくなり、Planeの色がテクスチャ画像の色に近づきました!
ただし、こちらの方法は、BloomなどPostProcessの影響を受けるのと、計測すると完全に色再現ができているわけではありません(R:256 G:179 B:128)
厳密なカラーマネジメントが求められるプロジェクトでは注意が必要です
スクリーンショット 2025-12-05 002138.png

対処法③:Widget表示してしまう

ScreenSpaceのWidgetはTonemapの影響を受けません。
UI要素などオブジェクトの上に描画されるのが問題ない場合は、Widget表示させてしまうのもありです
(World Spaceで3D空間にUI表示したい場合は不可ですが)

スクリーンショット 2025-12-05 002644.png
スクリーンショット 2025-12-05 002703.png

まとめ

UEのビューポート上でテクスチャのカラーを正しく再現する方法を紹介しました
いずれの対処法も一長一短なところはあるので、プロジェクトの状況に応じて使い分けるのがいいと思います。
他にも解決策があれば是非教えてください!

参考

https://tech.spark-creative.co.jp/entry/2023/06/12/113558
https://qiita.com/ruyo/items/28255f26725a6b6bd475

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?