Material을 활용한 캐릭터 Outline 그리기

사전 지식

1. 픽셀 (Pixel):
   • "Pixel"은 "Picture Element"의 줄임말로, 디지털 이미지에서 가장 작은 단위를 나타냅니다.
   • 디스플레이나 디지털 이미지에 픽셀은 각각의 색상 정보를 담고 있습니다. 일반적으로 픽셀은 RGB (빨강, 녹색, 파랑) 색상 값으로 표현됩니다.
   • 해상도는 이미지나 디스플레이에서 가로 및 세로 픽셀 수를 나타내며, 예를 들어 "1920x1080"은 가로로 1920개, 세로로 1080개의 픽셀을 가진 이미지를 의미합니다.
   • 픽셀은 이미지의 세부 정보를 나타내며, 디지털 카메라, 모니터, 스마트폰 디스플레이 등 다양한 디지털 장치에서 중요한 역할을 합니다.
2. 텍셀 (Texel):
   • "Texel"은 "Texture Element"의 줄임말로, 3D 그래픽스에서 사용됩니다.
   • 3D 모델의 표면에 텍스처를 적용할 때, 텍스처 이미지가 텍셀로 나누어집니다. 이때 각각의 작은 사각형 영역을 텍셀이라고 합니다.
   • 텍셀은 3D 모델의 표면에 텍스처를 렌더링할 때 사용되며, 각 텍셀에는 해당 부분의 색상, 질감 및 기타 시각적 속성이 포함됩니다.
   • 텍셀의 개념은 3D 그래픽스 소프트웨어 및 게임 엔진에서 매우 중요하며, 고품질의 시각적 효과를 구현하는 데 사용됩니다.

차이점:

• 픽셀은 2D 이미지에서 사용되는 개념이며, 주로 이미지의 해상도 및 색상을 나타냅니다.
• 텍셀은 3D 그래픽스에서 사용되며, 주로 3D 모델의 표면에 텍스처를 적용하는 데 사용됩니다.
• 따라서 주된 차이점은 픽셀이 2D 이미지에 적용되고, 텍셀은 3D 모델의 표면에 텍스처를 적용하는 데 사용된다는 점입니다.

Rendering 후 PostRender를 한번 더 해주는 방식

Custom Depth Render가 활성화 되어있고, Custom Depth Stencil 값이 250으로 설정 되어있는 Object를 화면에 그린다고 가정을 하면 아래와 같이 표현 될 수 있다. (Object를 그려야 할 Pixel에 Custom Depth Stencil값으로 채워 주는 것)

 

현재 Texel의 상, 하, 좌, 우에 있는 Texel에 방문해 각각의 tencil값을 가져와 계산을 한다

• 계산식

(CurrentTexelTencil값 - RightTexelTencil값) + (CurrentTexelTencil값 - LeftTexelTencil값)

 + (CurrentTexelTencil값 - BottomTexelTencil값) + (CurrentTexelTencil값 - TopTexelTencil값)

 

• 참조 사진

계산을 통해서 나온 값을 -100으로 나눠주고

그 값을 다시한번 -1을 해준다.

마지막으로 결과값을 Clamp(0, 1) 0과 1사이의 숫자로 바꿔준다(0보다 작을 경우 0, 1보다 클 경우 1)

이런 방법으로 각 Texel의 최종 값을 가져와

그 값이 == 1 이면 Outline에 해당 되는 Texel. 사용자가 지정한 색깔로 해당 Texel을 칠한다.

아니면 Outline에 해당이 안되는 Texel. 해당 Texel을 칠하지 않고 원래 색상을 칠한다.

---

• 추가 (물체 뒤에 가려진 Object도 Outline이 그려지는 현상 발생)

1. 현재의 Depth에서 SceneDepth를 뺀 후 Clamp(0, 1)을 해주고 해당 값을 1에서 빼준다.

ex) 현Depth = 10, SceneDepth = 3;

현재의 Depth가 더 높기 때문에 물체 뒤에 가려져 있으므로 그릴 필요 없음.

10 - 3 = 7, Clamp(0, 1)을 하면 결과 값이 1이 된다. 다시 한 번 상수 1에서 해당 결과 값(1)을 빼주면 1 - 1 = 0;

(현재 Depth가 물체 뒤에 가려져 있을 경우 무조건 0이 된다.)

1. 최종 결과물의 값과 위에서 얻은 값을 곱해준다.
2. ex) 현재 Texel이 Outline에 해당하지만 물체 뒤에 가려져 있을 경우 1 * 0 = 0 최종 값이 1에서 0으로 변경된다. 즉 Outline에 해당하는 Texel이었다가 아닌 Texel로 바뀌게 된다.

   3. 새로 얻은 최종 값으로 Outline인지 아닌지 판단 하고 그려준다.