輪郭線をPostProcessで描画する

開発環境

Unity 2020.2.3f1を用いて開発を行っています。

深度情報から輪郭線を抽出

手始めにRobaertsCrossを使用して深度バッファからエッジを検出して輪郭線を描画してみます。下にシェーダコードを載せておきます。

float halfScaleFloor = floor(_SampleScale * 0.5f);
float halfScaleCeil = ceil(_SampleScale * 0.5f);
float2 uv0 = i.texcoord - float2(_MainTex_TexelSize.x, _MainTex_TexelSize.y) * halfScaleFloor;
float2 uv1 = i.texcoord + float2(_MainTex_TexelSize.x, _MainTex_TexelSize.y) * halfScaleCeil;
float2 uv2 = i.texcoord + float2(_MainTex_TexelSize.x * halfScaleCeil, -_MainTex_TexelSize.y * halfScaleFloor);
float2 uv3 = i.texcoord + float2(-_MainTex_TexelSize.x * halfScaleFloor, _MainTex_TexelSize.y * halfScaleCeil);

float centerDepth = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, i.texcoord);
					
float d0 = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, uv0).r;
float d1 = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, uv1).r;
float d2 = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, uv2).r;
float d3 = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, uv3).r;

float d10 = d1 - d0;
float d32 = d3 - d2;
float edgeDepth = sqrt(d10 * d10 + d32 * d32);
					
depthEdge = edgeDepth > _DepthThreshold * centerDepth ? 1.0f : 0.0f;

各行で何をやっているかについて説明します。
1~13行にかけて、_SampleScaleに基づいてサンプリングするUVのオフセット値を求めて、深度バッファから深度値をサンプリングしています。
15~17行では、RobertsCross演算を行っており、注目画素におけるエッジの強さを算出しています。
19行では、17行目で算出した値に対して閾値で制限をかけて、ノイズが誤ってエッジ検出されることを防いでいます。ここで閾値に注目画素の深度値を乗算しているのは、遠方でのエッジ検出ではより小さな差分が必要になるためです。閾値を変調して遠方でエッジ検出がうまくいくようにしています。

SobelFilterでも同じように深度バッファからエッジを抽出してみます。

float4 depthDiag;
float4 depthAxis;

float2 uvDist = _MainTex_TexelSize.xy * _SampleScale;
float centerDepth = (SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, i.texcoord)); // Center
depthDiag.x = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, i.texcoord.xy + uvDist); // TR
depthDiag.y = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, i.texcoord.xy + uvDist * float2(-1.0f, 1.0f)); // TL
depthDiag.z = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, i.texcoord.xy - uvDist * float2(-1.0f, 1.0f)); // BR
depthDiag.w = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, i.texcoord.xy - uvDist); // BL
depthAxis.x = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, i.texcoord.xy + uvDist * float2(0.0f, 1.0f)); // T
depthAxis.y = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, i.texcoord.xy - uvDist * float2(1.0f, 0.0f)); // L
depthAxis.z = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, i.texcoord.xy + uvDist * float2(1.0f, 0.0f)); // R
depthAxis.w = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, i.texcoord.xy - uvDist * float2(0.0f, 1.0f)); // B

const float4 vertDiagCoeff = float4(-1.0f, -1.0f, 1.0f, 1.0f); //TR , TL , BR , BL
const float4 horizDiagCoeff = float4(1.0f, -1.0f, 1.0f,-1.0f);
const float4 vertAxisCoeff = float4(-2.0f,  0.0f, 0.0f, 2.0f); // T, L , R , B
const float4 horizAxisCoeff = float4(0.0f, -2.0f, 2.0f, 0.0f);

float4 sobelH = depthDiag * horizDiagCoeff + depthAxis * horizAxisCoeff;
float4 sobelV = depthDiag * vertDiagCoeff + depthAxis * vertAxisCoeff;
float sobelX = dot(SobelH, float4(1.0f, 1.0f, 1.0f, 1.0f));
float sobelY = dot(SobelV, float4(1.0f, 1.0f, 1.0f, 1.0f));

float sobel = sqrt(sobelX * sobelX + sobelY * sobelY);
depthEdge = Sobel > _DepthThreshold * centerDepth ? 1.0f : 0.0f;

SobelFilterもやっていることはRobertsCrossとあまり大差ありませんが、サンプルする回数が多いです。

描画結果を見比べてみます。

あまり見た目に大差はありませんが、RobertsCrossに比べてSobelFilterがのほうが太く出ていることがわかります。

ビュー法線情報からエッジ検出

基本的に深度バッファからエッジを検出するのとやることは変わらないので、コードは割愛します。
結果だけ見比べてみます。

深度バッファを用いてエッジ検出したものと見比べてほしいのですが、法線を使ってエッジ検出をすることで、深度を使ったものより詳細なエッジを検出できていることがこの結果からわかります。立方体の角がわかりやすいかと思います。

色情報からエッジを検出してみる

これもコードは割愛します。まず下図のようなシーンのレンダリング結果があるとして、これを入力とし、RGBA情報のR成分に注目してエッジ検出を行ってみます。本来であれば、線の厚さ等をコントロールするバッファを用意することになると思いますが、今回は色があれば何でもいいので一旦レンダリング結果をそのまま使うことにしました。

下図のような結果となりました。

上記結果を見てわかる通り、愚直にシーンのレンダリング結果からエッジを検出しようとすると、エッジを検出してほしくないところまで検出処理が走ってしまうので工夫が必要のようです。今回は「別のバッファにエッジコントロール専用のデータを書き出して、ポストプロセス処理で入力として使用する」といった凝ったことはせずに、レンダリング結果をそのまま使えるように、ジオメトリを描画するシェーダーをデフォルトのものから、下記のようなライティング処理を行わずマテリアルカラーをそのまま出力するシェーダーに変えるようにしてみます。

Shader "Custom/UnlitShader"
{
	Properties
	{
		_Color("Color", Color) = (1,1,1,1)
	}
	CGINCLUDE
	#include "UnityCG.cginc"
	ENDCG

	SubShader
	{
		Tags { "RenderType" = "Opaque" }
		LOD 200

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			struct appdata
			{
				float4 vertex : POSITION;
				float3 normal : NORMAL;
				float4 uv : TEXCOORD0;
			};

			struct v2f
			{
				float4 vertex : SV_POSITION;
				float3 normal : NORMAL;
			};

			float4 _Color;

			v2f vert(appdata v)
			{

				v2f o = (v2f)0;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.normal = UnityObjectToWorldNormal(v.normal);

				return o;
			}

			float4 frag(v2f i) : SV_Target
			{
				float4 color = _Color;
				return color;
			}
			ENDCG
		}//pass
	}//sub shader
	FallBack "Diffuse"
}

上記のシェーダーコードでレンダリングした結果が下記になります。

そして、上記を入力として再度エッジ検出をかけた結果が下記になります。

それぞれのバッファを合成してみる

最後に、それぞれのバッファからエッジを検出した結果をレンダリング結果と合成して出力します。

エッジの色はマゼンタで描画しています。

終わりに

RobertsCrossとSobleFilterで結果を比較しながら進めてみたわけですが、あまり差異がないように見えました。RobertsCrossの方がサンプル数が少ない分、負荷が軽そうです。ComputeShaderを使わずPixelShaderでポストプロセスを行いましたが、ComputeShaderを使えばPixelShaderより負荷が軽いものを作れそうです。
もし次に記事を書く機会があるとすれば、NPR系Shaderについて何か書こうと思っています。

参考

Sobel Filter

Roberts Cross

エッジ検出

画像処理 (4)エッジ検出