circle-loader
by
33/ 1

基本知識

Radial Blurは、中心から外側に放射状に広がるストライプ状のぼかしとして現れる一般的な視覚効果です。

レースゲームやアクションの特殊効果で、高速モーションの視覚効果やカメラを突然ズームインしたときの衝撃的な効果を強調するためによく使用されます。

Need for Speedにおけるラジアルブラー効果

Radial Blurの基本原理は他のぼかし効果と同じです。周囲のピクセルと元のピクセルの色の値が一緒になってピクセルの色に影響を与え、ぼかし効果を実現します。Radial Blurの効果は、中心から外側に放射状に広がる形状であるため、選択したサンプリングポイントは、中心点とピクセルポイントを結ぶ延長線上に配置する必要があります。

図に示すように、赤は中心点、青は現在処理中のピクセル、緑はサンプリングポイント、赤の矢印の方向は中心点から現在のピクセルまでの延長線の方向です。

ピクセルが中心点から離れるほど、ぼやけます。したがって、サンプリングポイント間の距離は大きくなります。他のぼかし効果と同様に、サンプルポイントが多いほどぼかし効果は良くなりますが、コストが増加します。

 

Unityの実装

上記の原理によると、UnityでBuild-inパイプラインを使用して、Radial Blur効果を実装します。

まず、画像の中心を中心点として設定し、サンプリングステップサイズを計算します。

float2 Vector = (float2(0.5, 0.5) - i.uv)*_MainTex_TexelSize.xy*_BlurRadius;

このように、ステップサイズ(Vector)は中心点からピクセルまでの距離に正の相関があり、中心点から遠いピクセルはよりぼやけます。変数_BlurRadiusを追加して、サンプリングステップサイズを調整し、ぼかしの強さを制御します。

サンプリング、色の重ね合わせ、平均値を求めることで計算を行い、または必要に応じて異なる重みを選択することもできます。変数_SampleCountを設定して、サンプリングポイントの数を制御します。サンプリングされるピクセルが多いほど、ぼかし効果はよくなりますが、コストも大きくなります。

fixed4 blur(v2f i):COLOR
{
	float2 Vector = (float2(0.5, 0.5) - i.uv)*_MainTex_TexelSize.xy*_BlurRadius;
	fixed4 resultColor = fixed4(0, 0, 0, 0);
	for (int index = 0; index < _SampleCount; ++index)
	{
		resultColor += tex2D(_MainTex, i.uv);
		i.uv += Vector;
	}
	return resultColor / _SampleCount;
}

効果は図のようになります。

動的に変数_BlurRadiusを調整し、効果は次のとおりです。

最適化

Radial Blurは、前述のBlur最適化と同じ方法で最適化されます。 DrawCallを追加する代わりに、ダウンサンプリングによって解像度を低下させ、それによって画像サンプリング操作が減少し、最適化の目的を達成します。


UWA公式サイト:https://jp.uwa4d.com

UWA公式ブログ:https://blog.jp.uwa4d.com

UWA公式Q&Aコミュニティ(中国語注意):https://answer.uwa4d.com