본문 바로가기

Graphics/Shader

Effect - Outline

이번에는 Toon Shader에 관련된 유니티 코리아 강의 영상을 보았습니다. 저는 그 중에서 Toon Shader에 많이 사용되는 Outline에 대해 얘기를 해보겠습니다.

 

 


Outline을 표현하는 방법은 여러개가 있지만, 이 영상에서 소개하는 것은 같은 모델을 2개로 만든 후, 한 모델을 좀 더 크게 검은색으로만 그려서 Outline을 표현하는 방식입니다.

 

 

하지만 위의 그림처럼 단순히 스케일만 늘릴 경우, 모델이 복잡한 모양일수록 외곽 모양이 엇나가는 모습을 보일 수 있습니다. 따라서 이상적인 외곽선을 표현하려면 아래의 그림처럼 모델의 노멀 벡터 방향으로 크기를 늘려야 합니다.

 

 


하지만 모델의 노멀 벡터 방향으로만 Outline 모델을 확장하면, 실제 모델이 아래의 그림처럼 Outline 모델에 가려지게 될 것입니다.

 

 

즉, 이러한 가려짐을 예방하려면 Outline 모델의 앞부분을 렌더링에서 제외할 필요가 있습니다. 이럴때 백페이스 컬링의 원리가 필요한데, 백페이스 컬링이란 모델의 폴리곤들을 카메라를 기준으로 앞면뒷면으로 구분하여 뒷면의 폴리곤들을 렌더링에서 제외하는 기술입니다.

 

폴리곤들은 여러 삼각형으로 이루어져 있고, 이 삼각형의 버텍스들을 그리는 데에는 일정한 순서가 존재합니다. 먼저 앞면의 삼각형은 아래의 그림처럼 일반적으로 버텍스들이 시계방향으로 그려집니다.

 

 

하지만 여기서 뒷면의 삼각형이 배치가 된다면 실제 버텍스들은 시계방향으로 그려진다고 쳐도, 카메라가 볼때는 시계의 반대 방향으로 그려지는 것처럼 보입니다.

 

 

이러면 결국 앞면, 뒷면의 버텍스들을 통해 나온 외적의 방향은 서로 다를 수 밖에 없고, 두 외적 벡터의 Z 값 양수음수로 나뉘게 됩니다. 이러한 성질을 이용해 뒷면의 삼각형들을 렌더링하지 않는 것이 백페이스 컬링이지만, Outline에서는 반대로 앞면의 삼각형들을 렌더링하지 않아야 하기 때문에 반대의 기준을 적용해줍니다.

 


이제 해당 효과를 적용해주니 아래와 같은 외곽선을 완성할 수 있었습니다. 영상에는 이후에 더 보완하는 기술들이 나오지만, 나중에 여유가 되면 다시 다뤄보도록 하겠습니다.

 

 


자료 출처

1. https://www.youtube.com/watch?v=CyO5lvfjRRE

2. https://blog.naver.com/PostView.nhn?blogId=canny708&logNo=221547037658

 

 

 

'Graphics > Shader' 카테고리의 다른 글

Effect - Aura  (0) 2023.09.19
Definition of Shader  (0) 2023.08.28