Stylized Rendering 포스트 프로세싱

UE4 에 포함된 Stylized Rendering 쇼케이스에 사용된 포스트 프로세싱 이펙트에 대한 개요입니다.

Windows
MacOS
Linux

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

Select Skin
Light
Dark

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback