언어:
페이지 정보
엔진 버전:
언리얼 엔진

Stylized Rendering 포스트 프로세싱

언리얼 엔진

PostProcessHeader.png

쇼케이스에서 가장 두드러지는 특징 중 하나는 포스트 프로세싱으로, 씬의 오브젝트 주변을 두른 카툰 형식 외곽선을 만드는데 주로 사용된 것입니다. 씬 전반적으로 종이같은 느낌의 텍스처 오버레이를 만드는 데도 사용되었고, 뷰 외곽을 두른 아티스트 테이프 효과를 만드는 데도 사용되었습니다. 포스트 프로세스 이펙트는 전체적으로 하나의 포스트 프로세스 볼륨 안에서 처리되고 있습니다. 이 포스트 프로세스 볼륨에는 포스트 프로세스 이펙트 중 중요한 부분 대부분: 포스트 프로세스 머티리얼이 들어 있습니다. 머티리얼이 포스트 프로세스 이펙트처럼 작동하게 하는 것은 두 과정으로 나뉘는데, 앞으로 차차 살펴 보도록 하겠습니다.

이 씬용으로 만든 대부분의 머티리얼은 사실상 머티리얼 인스턴스 콘스턴트 를 통해 적용됩니다. 이를 통해 머티리얼을 다시 컴파일하느라 기다릴 필요 없이 빠른 프로퍼티 조정 및 조율이 가능합니다.

포스트 프로세스 머티리얼은 주의해서 꼭 필요할 때만 사용해야 합니다. 가급적이면 색 보정이나 조정, 블룸, 뎁스 오브 필드, 기타 여러가지 이펙트에 대해서는 최적화도 잘 되어 있고 더욱 효율적인 포스트 프로세스 볼륨 에 상속된 세팅을 사용하는 것이 좋습니다.

파라미터를 구하기 위해서는 포스트프로세스 머티리얼에서 머티리얼 인스턴스를 만들어야 합니다.

초보라서 포스트 프로세스 머티리얼 셋업 관련 튜토리얼이 필요하다 싶으신 경우, 포스트 프로세스 머티리얼 문서 를 참고해 주시기 바랍니다.

Stylized 포스트 프로세스 머티리얼

PostStylized.png

이 머티리얼은 다수의 이펙트 시리즈로 나뉘어 있습니다. 개괄적으로 보자면:

  • 오브젝트 주변의 외곽선 생성

  • 앰비언트 오클루전이 없는 영역에만 그 외곽선을 선택적으로 그리기

  • 씬의 오브젝트 주변의 선 전체적으로 채색

  • 뷰의 가장자리 채색

  • 뷰의 가장자리에 마스크를 적용하여 아티스트 테이프 효과 생성

  • 종이같아 보이는 텍스처 오버레이 생성

포스트 프로세스 머티리얼은 꽤나 기술적이라 언리얼 엔진 4 에서 머티리얼을 만드는 데 익숙치 않은 분들께는 어려울 수 있습니다. 여기서 추구하고자 하는 바는 만드는 방법을 단계별로 설명드리기 보다는 머티리얼의 작동 방식에 대한 속성과 그 용도를 개괄적으로 살펴보고자 함입니다.

이펙트의 각 섹션이 어찌 생성되었는지 확인하기 위해서는 M_PostProcess_BaseM_PostProcess_Paper 머티리얼을 열어보시기를 추천합니다.

카툰 외곽선

Outline.png

위 이미지에서 외곽선을 처리하는 포스트 망 부분을 추출한 뒤 그것만 표시하여 이펙트가 더욱 명확해 지도록 했습니다.

이 이펙트는 M_PostProcess_Base 머티리얼 안에서, 주로 Line Render 코멘트가 달린 섹션에서 확인할 수 있습니다.

위의 각 이미지에 대해, 각각에 우클릭한 다음 다른 이름으로 저장해서 원래 크기로 살펴보는 것이 가장 좋을 것입니다 (이 머티리얼 망은 Stylized 쇼케이스에서도 찾을 수 있습니다).

씬의 오브젝트 주변 외곽선은 SceneTexture 표현식을 통한 씬 깊이를 샘플링하여 처리합니다. 여기다가 UV 좌표를 가로 세로 모두 음양 방향으로 약간 동요시켜 오프셋을 줍니다. 그런 다음 그 결과를 합쳐 외곽선 위치를 결정하는 데 사용합니다.

그러나 선을 실제로 렌더링하기 전, 앰비언트 오클루전에서 두 번째 SceneTexture 를 계산합니다. 이것을 외곽선 마스킹에 사용하는데요. 그 목적은 일부 와이어프레임 가장자리에 내부의 선이 보이는 것을 방지하기 위해서입니다. 이 모습은 아래와 같이 볼 수 있습니다:

AO 마스킹 전

AO 마스킹 후

종이 이펙트

뷰 바깥쪽 주변의 외곽선은 사실상 2 단계 이펙트입니다. 화면에서 가장 먼 쪽의 가장자리는 종이같은 텍스처로 변환됩니다. 그 바로 안쪽 영역은 과도한 채색을 통해 화면 가장자리에 좀 더 시각적인 흥미를 돋웁니다.

이 효과는 특수한 화면 정렬 텍스처를 사용하는 것을 통해 주로 이뤄냅니다. 텍스처는 R G B 채널을 사용하여 마스크를 담습니다. 아래는 텍스처와, 각 채널을 분할시킨 것입니다.

T_MaskedPaper_Screen_RGB.png

T_MaskedPaper_Screen_R.png

T_MaskedPaper_Screen_G.png

T_MaskedPaper_Screen_B.png

RGB

R 만

G 만

B 만

화면 가장자리를 초록 채널로 마스킹을 한 다음 노이즈가 낀 종이같은 텍스처와 색을 겹쳐놓는 식으로, 종이 조각 위에 씬을 그린 듯한 효과를 내고 있습니다.

이 모든 것 위에 종이 텍스처를 전체 뷰에다가 곱해 줘서 전체 씬에 종이 입자같은 효과를 주고 있습니다.

StylizedPaper.png

이 시스템의 정수는 Paper Mask 코멘트 부분에 있습니다. 이 망은 위에 표시된 텍스처를 사용하지만, ScreenAlignedUVs 머티리얼 함수를 활용합니다. 이것이 텍스처 좌표를 받아 화면 크기에 적용, 사실상 텍스처를 화면 크기에 맞게 늘입니다. 포스트 프로세스 머티리얼의 일부로 사용되는 경우, 그 결과는 뷰를 완벽히 채우는 텍스처가 됩니다.

PaperMaskNetwork.png