[DirectX 11] 외곽선

왼쪽은 라플라시안 필터를 이용, 오른쪽은 뎁스 차이를 이용한 외곽선 출력

 

개발 일자 : 2021년 12월 21일

 

외곽선은 다음과 같은 두 가지 방식으로 개발했습니다.

1. 라플라시안 필터를 이용한 외곽선 출력

2. 뎁스 차이를 이용한 외곽선 출력

 

1. 라플라시안 필터를 이용한 외곽선 출력

픽셀 쉐이더에서 라플라시안 필터에 픽셀들을 필터링시켜 외곽선을 검출했습니다.

float mask[9] =
{ -1, -1, -1,
  -1,  8, -1,
  -1, -1, -1 }; // Laplacian Filter

float coord[3] = { -1, 0, +1 };
float divider = 1;

float4 PS_Outline_Laplacian(VertexOut_RenderTarget pin) : SV_Target
{
	float4 Color = 0;
	float4 Ret = 0;
	float3 grayScale = float3(0.3, 0.59, 0.11);

	for (int i = 0; i < 9; i++)
		Color += mask[i] * (gNormalW.Sample(samLinear, pin.Tex + float2(coord[i % 3] / MAP_CX, coord[i / 3] / MAP_CY)));

	float gray = 1 - dot(Color, grayScale);
    
    	Ret = float4(gray, gray, gray, 1) / divider;
	
	return Ret;
}

 

라플라시안 필터는 픽셀과 픽셀 사이의 값 변화가 급격하게 나타날 때 이를 외곽이라고 판정하기 때문에, normal 벡터 값을 이용했습니다. 또, 일반적인 3D 프로그램에서 외곽선을 사용하는 경우가 오브젝트의 뒤에 가려질 때임을 감안하여 뎁스 버퍼를 따로 생성해줬습니다.

 

Picking을 이용하여 툴에서는 아래와 같은 방식으로 현재 선택된 오브젝트를 강조하기 위한 용도로도 사용 가능합니다.

 

추가적으로, 가우시안 블러를 주고 그 렌더 타겟과 합성하여, 외곽선을 더 강조하는 효과도 개발해봤습니다.

 

 

2. 뎁스 차이를 이용한 외곽선 출력

라플라시안 필터로 외곽선을 만들어봤으나, 너무 민감하게 픽셀이 필터링되고 생각보다 깔끔하지 않아 2번째 방법을 개발하게 되었습니다. 구현 방식은 다음과 같습니다.

 

(1) 외곽선을 그리고자하는 오브젝트의 Depth를 기록합니다. Depth만 기록하면 되기 때문에 픽셀 쉐이더는 비활성화 해줬습니다.

(2) Vertex의 Pos에 Normal을 더해 vertex들을 각각 normal 방향으로 키웠습니다.

(3) (1)에서 기록한 Depth를 기준으로 (1)과 (2)가 겹치는 부분을 제외시키고 나머지만 원본과 합성합니다.

(4) 깔끔한 외곽선을 얻었습니다.