【UE5】linear, radial-gradientとBanding – Unreal Engine 5.6

Unreal Engine

水ノ茉(こおり)の宣伝

叡智でえっちな同人作品を予定中…

Ci-en R18

同人作品の宣伝

  • 準 備 中 . . .

プラグインの宣伝

始まり

バンディング問題と久々に出会ったのでメモ程度に残しておきます。

初歩的なことです。

問題の現象

こんな感じのコードです。

// Copyright © 2026 kafues511 All Rights Reserved.

#pragma once

float3 LinearGradient(
	float2 UV,
	float AngleDegrees,
	float3 Color0,
	float3 Color1,
	float3 Color2,
	float Stop0,
	float Stop1,
	float Stop2)
{
	float SinAngle, CosAngle;
	sincos(AngleDegrees * (PI / 180.0), SinAngle, CosAngle);
	float2 Dir = float2(SinAngle, -CosAngle);

	float InvLen = rcp(abs(Dir.x) + abs(Dir.y));
	float T = saturate(0.5 + dot(UV - 0.5, Dir) * InvLen);

	float3 FinalColor;
	if (T < Stop1)
	{
		float Factor = saturate((T - Stop0) * rcp(max(Stop1 - Stop0, 1e-6)));
		FinalColor = lerp(Color0, Color1, Factor);
	}
	else
	{
		float Factor = saturate((T - Stop1) * rcp(max(Stop2 - Stop1, 1e-6)));
		FinalColor = lerp(Color1, Color2, Factor);
	}

	return saturate(FinalColor);
}

ぱっと見で分かる通り、単なる線形補間です。

線形補間ですが、何故でしょうか、帯状の模様がクッキリと浮かんで見えます。

実際にはもう少し症状は穏やかなのですが、画像圧縮の兼ね合いで顕著になっています。

これはバンディングと呼ばれる現象です。

詳細はググってください。

対処法

細かい説明はさておき、問題の根本原因は人間にあります。

人間の視覚は周期的・規則的な模様に対して割と敏感です。

先ほどの実装は斜め方向に線形補間なグラデーションをしています。

つまり規則性があります。

それ故に気になってしまうのです。

対して、規則性のない・ランダムな細かなノイズには、割と視認がザルです。

勝手に周囲のピクセルとブレンドしてくれちゃいます。

対処法としては、そんな特性を利用するだけです。

こんな感じでランダムなノイズを乗せてあげます。

0.1が強度なので適当に調整するといいでしょう。

強度を上げ過ぎると隠れノイズではなく、ノイズとして視認できちゃうので、やり過ぎは注意です。

float Noise = frac(sin(dot(UV, float2(12.9898, 78.233))) * 43758.5453);
FinalColor += (Noise - 0.5) * (0.1 / 255.0);

画像圧縮の兼ね合いで伝わりにくいかもしれませんが、ノイズを乗せるだけで簡単に抑制が出来るのです。

おわり!!!

こんな初歩的なこと久々に思い出しました。

逆に言えば忘れてました。

2026年10月30日 発売予定!!!

つべでゴロゴロ徘徊していたら偶然新作が流れてきました。

皆さん思ったことでしょう。

『湊くん?!?!』

少なくとも筆者は思いました。

原画とSDに見覚えのあるお名前があったので納得しました。

やっぱりこの瞳が一番好きです。

購入理由としては十分でしょう。

FORTUNE×WORLD 〜僕らがゲームを作る理由〜 | GLOVETY New Project
FORTUNE×WORLD 〜僕らがゲームを作る理由〜 | GLOVETY New Project

特典の詳細が判明したら予約しましょう。