Outline Shader - 1

Post Process를 이용한 Outline Shader입니다

 

참조 유튜브: https://www.youtube.com/watch?v=9KvUfnrHcqM&t=1886s 

 

● 기본원리

 

아웃라인을 씌우는 기본 원리는 한 픽셀을 잡고 상하좌우 네 개의 픽셀과 깊이값을 검사한다.

 

공식: 

Variation = abs(Depth왼 + Depth오 + Depth위 + Depth아래 - 4*Depth가운데(타겟픽셀))

이렇게 구해진 Variation의 값이 정해진 한계치(Threashold)를 넘으면 외곽선에 해당하므로 해당 픽셀의 색을 바꿔주면 외곽선이 그려지는 효과를 얻을 수 있다. 

 

 

해당 방법은 Depth Edge Detection으로 이 방법으로는 바깥쪽의 외곽선만을 그릴 수 있다는 단점이 있다.

 

 

안쪽의 외곽선을 그리기 위해 Normal Edge Detection을 사용해야한다.

 

 

앞에서처럼 타겟 픽셀의 왼쪽, 오른쪽, 위, 아래의 픽셀 노말과 타겟 픽셀 노말의 거리를 각자 구해 모두를 더하면 Variation을 구할 수 있는데 여기서도 해당 Variation값이 한계치(Threashold)를 넘으면 모서리가 되므로 검은색으로 칠해준다.

 

 

Depth Edge Detection과 Normal Edge Detection을 통해서 안쪽과 바깥 쪽의 외곽선을 모두 구해서 칠해주면 물체의 외곽선을 모두 그릴 수 있게된다.

 

 

● Material Function

 

MF_GetKernel : 한 픽셀을 기준으로 상하좌우의 픽셀값을 구하여 전달하는 함수. 가운데 SceneTexel을 이용하는 이유는 1080p의 모니터는 720p의 모니터보다 같은 해상도에서 픽셀의 크기가 더 클것이기때문에 정확한 연산을 위해 사용한다.

 

＊1080p의 4k모니터가 더 큰 픽셀을 가지는 이유

1080p의 4K 모니터와 720p의 모니터가 같은 해상도를 가진다면, 두 모니터는 실제로 같은 픽셀 수를 가지게 됩니다. 즉, 두 모니터 모두 화면에 1920x1080 픽셀을 표시할 수 있으며, 픽셀 밀도는 동일합니다.

그러나 4K 모니터는 물리적으로 더 큰 화면 크기를 가지는 경우가 일반적입니다. 그래서 같은 해상도를 가질 때, 4K 모니터는 픽셀을 더 넓게 표시하게 되며, 픽셀 밀도가 낮아집니다. 반면 720p의 모니터는 더 작은 화면 크기를 가지며, 같은 해상도를 표시할 때 픽셀이 더 밀집되어 보입니다.

결론적으로, 4K 모니터가 같은 해상도를 가질 때 더 큰 픽셀을 가지게 됩니다.

 

MF_DetectEdges_Depth :

앞에서 설명한 원리대로 상하좌우 픽셀의 깊이값의 합과 타겟픽셀의 깊이값 * 4값을 비교하여 결과를 리턴하는 함수. 중간에 Switchparameter 노드는 이 함수에서 연산한 값을 적용할지 말지 선택할 수 있는 선택지를 주는 노드로써 연산과는 관련이 없다.

 

MF_Detect_EdgesNormal: 역시 앞에서 설명한 원리대로 상하좌우 픽셀의 노말값과 타겟 픽셀의 노말값의 거리를 구하고 합하여 한계치와 비교하여 결과를 리턴하는 함수.

 

해당 함수들을 제작한 뒤 PostProcess용 material을 만들고 Emissive Color에 적용된 내용을 전달한다. 그리고 PostProcess의 Material에 해당 Material을 통해 생성한 Material Instance를 넣어준다.

 

결과값은 아래와 같이 출력되어 외곽선을 잘 그리는 것을 확인할 수 있다.  지금은 흰색으로 외곽선이 표시되는데 Material의 흰색으로 표시된 부분의 색을 바꿔주면 다른 색으로 출력이 가능하다.

2편에서 버그들을 수정하는 내용으로 이어가겠다