언리얼 엔진에서 슬레이트 포스트버퍼 사용하기 | 언리얼 엔진 5.5 문서

Example of a Slate postbuffer creating a VHS blur

슬레이트 포스트버퍼(Slate postbuffers) 는 포스트 프로세스 머티리얼에서 SceneColor를 사용하는 방식과 마찬가지로 UI 머티리얼에서 사용하기 위해 게임 씬을 샘플링합니다. 이를 통해 게임 월드와 유저 인터페이스 모두에 적용되는 비주얼 이펙트를 생성할 수 있습니다. 또한 슬레이트 포스트버퍼는 슬레이트 포스트 프로세스(Slate postprocess) 클래스를 적용하여 블러 이펙트 같은 다양한 포스트 프로세스를 처리할 수도 있습니다.

슬레이트 포스트버퍼의 몇 가지 사용 사례 예시는 다음과 같습니다.

투명한 팝업 메시지 뒤의 씬 블러링
대미지 또는 어둠을 표시하는 비네팅 이펙트
위젯뿐 아니라 게임 월드를 선택적으로 가리는 화면 전체의 블러
낡은 VHS 테이프와 비슷한 효과를 내는 디스토션 필터

위의 각 예시는 콘텐츠 예제 프로젝트의 UI_SlatePostBuffer 레벨에서 확인할 수 있습니다.

이 페이지에서는 다음과 같은 내용을 살펴봅니다.

슬레이트 포스트버퍼를 사용하기 위한 워크플로 개요
슬레이트 포스트버퍼 함수 및 한계에 관한 기술 정보
다음 방법에 대한 지침:
- 슬레이트 포스트버퍼 활성화하기
- 슬레이트 포스트버퍼 환경설정하기
- 새 슬레이트 포스트 프로세서 클래스 생성하기
- 슬레이트 포스트버퍼를 머티리얼에 통합하고 UI 엘리먼트에 적용하기

개요

슬레이트 포스트버퍼 및 포스트 프로세서 클래스는 글로벌 리소스이므로 프로젝트에서 이를 사용하는 방법에 대해 팀 전체와 소통해야 합니다.

UE는 최대 5개의 슬레이트 포스트버퍼를 지원하며, 각각은 UI 머티리얼에서 사용하기 위해 게임 씬을 샘플링합니다. 각 포스트버퍼에 대해 슬레이트 포스트 프로세서 클래스를 설정하여 해당 포스트버퍼에 다양한 포스트 프로세스를 적용한 다음 UI 머티리얼에서 사용할 수 있습니다. 포스트 프로세서가 없다면, 게임 씬의 사본을 샘플링만 합니다.

The Slate RHI Settings in Project Settings

UI 머티리얼은 GetSlatePost 함수를 사용하여 포스트버퍼를 샘플링할 수 있습니다. 예를 들어, GetSlatePost0 은 슬레이트 포스트버퍼 0을, GetSlatePost4 는 슬레이트 포스트버퍼 4를 샘플링합니다. UI 머티리얼은 포스트 프로세스 머티리얼이 SceneColor로 씬을 샘플링하는 방식과 마찬가지로 슬레이트 포스트버퍼를 사용할 수 있습니다.

UI 머티리얼을 위젯에 적용하면 위젯을 사용하여 그 뒤에 있는 화면 부분에 머티리얼의 포스트 프로세스를 적용합니다. 다음 예시에서는 반전된 Y축 UV 좌표를 사용하여 사각 위젯 내의 뷰포트 부분을 위아래로 뒤집습니다.

Example of a picture-in-picture with inverted UV coordinates from the Content Samples project

다음 스크린샷은 더 복잡한 예시로서, 위젯이 화면을 낡은 VHS 테이프 화면처럼 보이도록 왜곡하는 것을 보여줍니다. VHS 디스토션 머티리얼을 적용한 위젯은 화면 전체를 차지하며 UI 내에서 다른 위젯 위에 레이어링됩니다. 이를 통해 UE가 UI와 게임 씬을 함께 처리할 수 있으므로 UMG 블루프린트에서 텍스트 위젯으로 타임코드와 날짜 같은 엘리먼트를 제어할 수 있습니다.

기본적으로 GetPostBuffer 노드는 UI 위젯 바로 뒤에서 샘플링합니다. 이를 오버라이드는 방법은 아래의 UI 머티리얼에서 포스트버퍼를 사용하기 위한 팁 섹션을 참조하세요.

슬레이트 포스트버퍼 활성화하기

슬레이트 포스트버퍼를 활성화하려면 프로젝트의 *Engine.ini 파일에 다음 CVar를 추가합니다.

DefaultEngine.ini

	[ConsoleVariables]
	Slate.CopyBackbufferToSlatePostRenderTargets=1

또한, 다음 콘솔 명령을 사용하여 이 CVar를 활성화할 수도 있습니다.

Console

	-dpcvars=Slate.CopyBackbufferToSlatePostRenderTargets=1

프로젝트 세팅에서 슬레이트 포스트버퍼 환경설정하기

포스트버퍼를 환경설정하는 방법은 다음과 같습니다.

프로젝트 세팅(Project Settings) 을 엽니다.
게임(Game) > 슬레이트 RHIRenderer 세팅(Slate RHIRenderer Settings) > 포스트 프로세싱(Post Processing) 으로 이동합니다.
환경설정하려는 버퍼에 대한 드롭다운을 펼칩니다. 필요에 따라 각 버퍼를 활성화하거나 비활성화할 수 있습니다.
특정 포스트 프로세스를 슬레이트 포스트버퍼에 추가하려면, 해당하는 포스트 프로세서 클래스(Post Processor Class) 를 선택합니다.

슬레이트 포스트 프로세서 클래스 생성 및 사용하기

새 슬레이트 포스트 프로세서 클래스를 생성하는 방법은 다음과 같습니다.

USlateRHIPostBufferProcessor 또는 그 자손 클래스 중 하나에서 파생된 새 블루프린트 클래스(new Blueprint Class) 를 생성합니다. 이 튜토리얼에서는 USlatePostBufferBlur를 예시로 사용합니다.
새 포스트 프로세서의 블루프린트를 연 다음 클래스 디폴트를 편집합니다. 가우시안 블러 세기(Gaussian Blur Strength) 에 대한 디폴트 세팅을 부모 클래스에서 상속된 디폴트 값과는 다른 값으로 변경합니다. 이 예시에서는 가우시안 블러 세기를 10.0으로 설정합니다.
프로젝트 세팅(Project Settings) > 슬레이트 렌더러 세팅(Slate Renderer Settings) > 포스트 프로세싱(Post Processing) 을 열고 포스트버퍼 중 하나에 대한 드롭다운을 펼친 다음, 포스트 프로세서 클래스 를 새 포스트 프로세서로 변경합니다.

이제 UE는 위젯이 백버퍼를 복사하기 전에 해당 포스트프로세서를 사용하여 백버퍼를 처리합니다. 이 경우에는 가우시안 블러를 추가합니다.

또한, USlateRHIPostBufferProcessor 에서 새로운 C++ 클래스를 파생하여 자체 포스트 프로세서를 구현할 수도 있습니다.

런타임 시 슬레이트 포스트 프로세서 수정하기

Slate FX Subsystem 을 사용하여 런타임 시 슬레이트 포스트 프로세서의 값을 수정할 수 있습니다.

Slate FX Subsystem 노드를 생성합니다.
Get Slate Post Processor 를 호출하여 포스트버퍼 중 하나에서 포스트 프로세서를 가져옵니다.
포스트 프로세서를 적절한 클래스에 형변환합니다.
형변환된 포스트 프로세서 오브젝트에서 포스트 프로세서의 파라미터에 액세스합니다.

위의 이미지는 런타임 시 포스트 프로세서를 수정하는 방법을 보여주는 예시일 뿐입니다. 여기서 보여준 대로 틱에서 이 작업을 수행하는 것은 권장되지 않습니다.

슬레이트 포스트버퍼 및 포스트 프로세서는 글로벌 리소스이므로 위의 예시에서 슬레이트 포스트 프로세서의 값을 변경하면 전역적으로 값이 변경됩니다. 따라서 이 포스트 프로세서를 사용하는 UI 머티리얼이나 슬레이트 위젯의 모든 인스턴스에 변경사항이 반영됩니다. 런타임 시 슬레이트 포스트 프로세스 값을 수정하기 전에 팀 전체와 소통하고 주의해서 사용해야 합니다.

UI 머티리얼에서 포스트버퍼 사용하기

포스트버퍼를 샘플링하는 UI 머티리얼을 생성하는 방법은 다음과 같습니다.

새 머티리얼(Material) 을 생성합니다.
해당 머티리얼의 머티리얼 도메인(Material Domain) 을 유저 인터페이스(User Interface) 로 설정합니다.
버퍼를 샘플링하려면 사용하려는 포스트버퍼에 해당하는 GetSlatePost 함수를 호출합니다. 예를 들어, GetSlatePost0 은 슬레이트 포스트버퍼 0을 가져옵니다.

UI 머티리얼에서 포스트버퍼를 사용하기 위한 팁

다음은 UI 머티리얼에서 포스트버퍼를 사용하기 위한 몇 가지 팁입니다.

기본적으로 GetSlatePost 노드는 현재 위젯 뒤에 있는 픽셀만 샘플링하지만, UV 입력을 사용하여 이를 수정할 수 있습니다.
LinearRGB 를 사용하여 백버퍼의 감마 보정 샘플링을 얻을 수 있습니다.
RGB 는 보정 컬러 반전 같은 이펙트에 유용합니다.

다음 그래프는 포스트버퍼를 사용하여 로고 뒤의 월드 컬러가 반전되는 회전하는 UE 로고를 제작하는 머티리얼의 예시입니다. UE 로고 텍스처는 오파시티(Opacity) 출력에 공급되고, 파이널 컬러(Final Color)는 GetSlatePost0의 RGB 출력을 반전합니다.

A material that inverts and blurs portions of the buffer.

이 머티리얼이 아래 이미지에서 사용되었습니다. 참고로 이 머티리얼은 GetSlatePost0 에 UV 입력이 없어도 위젯 바로 뒤의 씬을 샘플링합니다.

The previous material in use on UE logos in frame.

포스트버퍼에서 UI 위젯 캡처하기

기본적으로 씬만 GetSlatePost 노드가 캡처합니다. 하지만, 슬레이트에 UI 캡처 시점을 알리기 위해 포스트버퍼 업데이트 위젯(Post Buffer Update Widget) 을 사용하여 씬 및 다른 UI 위젯을 모두 캡처할 수 있습니다. 포스트버퍼에서 UI를 캡처하는 방법은 다음과 같습니다.

UMG 디자이너의 팔레트(Palette)에서 포스트버퍼 업데이트 위젯(Post Buffer Update Widget) 을 찾습니다.
현재 UI를 업데이트하려는 위치에 위젯을 추가합니다. 이 위젯이 배치된 위치에서 슬레이트 포스트버퍼가 업데이트됩니다.

샘플링하려는 위젯 뒤, 또는 위젯 위에 그리도록 업데이트 위젯을 계층구조 내의 마지막 엘리먼트로 배치하는 것이 좋습니다.
디테일(Details) 패널에서 포스트버퍼 업데이트 위젯을 환경설정합니다.

포스트버퍼 업데이트 위젯에는 다음과 같은 파라미터가 있습니다.

파라미터	설명
디폴트 포스트버퍼 업데이트 수행(Perform Default Post Buffer Update)	활성화하면 디폴트 씬 전용 복사/슬레이트 포스트 프로세스가 발생합니다. 그렇지 않으면 디폴트 복사/프로세스가 발생하지 않습니다. 포스트버퍼 업데이트가 '그려지지' 않고 이 세팅이 꺼져 있으면 위젯이 슬레이트 포스트버퍼를 샘플링하려고 시도할 때 해당 행동이 정의되지 않습니다. 그러면 마지막 프레임이 되거나 흑백이 될 수 있으므로, 이러한 시나리오는 피해야 합니다.
업데이트할 버퍼(Buffers to Update)	이 위젯이 UI + 씬의 샘플링을 트리거해야 할 버퍼의 배열입니다. UI의 이 포인트에서 예상되는 GetSlatePost 노드 사용과 일치해야 합니다.

파라미터

설명

디폴트 포스트버퍼 업데이트 수행(Perform Default Post Buffer Update)

활성화하면 디폴트 씬 전용 복사/슬레이트 포스트 프로세스가 발생합니다. 그렇지 않으면 디폴트 복사/프로세스가 발생하지 않습니다. 포스트버퍼 업데이트가 '그려지지' 않고 이 세팅이 꺼져 있으면 위젯이 슬레이트 포스트버퍼를 샘플링하려고 시도할 때 해당 행동이 정의되지 않습니다. 그러면 마지막 프레임이 되거나 흑백이 될 수 있으므로, 이러한 시나리오는 피해야 합니다.

업데이트할 버퍼(Buffers to Update)

이 위젯이 UI + 씬의 샘플링을 트리거해야 할 버퍼의 배열입니다. UI의 이 포인트에서 예상되는 GetSlatePost 노드 사용과 일치해야 합니다.

포스트버퍼 업데이트 위젯을 환경설정하고 나면 향후 위젯은 업데이트하도록 선택한 버퍼에 어떠한 포스트 FX가 적용되더라도 씬과 UI를 자유롭게 샘플링할 수 있습니다.

포스트버퍼 및 그리기 순서

포스트버퍼 업데이트가 제대로 작동하려면, 슬레이트는 포스트버퍼가 샘플링할 모든 UI 엘리먼트를 포스트버퍼가 샘플링하기 전에 그려야 합니다. 가로/세로/그리드 박스 내에 오버레이로 포스트버퍼를 배치하면 그리기 순서가 뒤죽박죽되어 이를 보장하지 않을 수 있습니다. 다음 가이드라인을 따라야 합니다.

계층구조의 하단 레이어는 포스트버퍼의 영향을 받는 비주얼을 표시하려는 위젯이어야 합니다.
중간 레이어는 포스트버퍼 위젯을 포함해야 합니다.
상단 레이어는 포스트버퍼를 샘플링하고 해당 이펙트를 하단 레이어에 적용하는 머티리얼이어야 합니다.

다음 이미지는 효과적인 그리기 순서를 보여줍니다.

다음 이미지는 가로 박스의 이미지에 적용된 머티리얼을 보여줍니다.

An example material that blurs the inside of a horizontal box.

기술 정보 및 제한 사항

다음은 슬레이트 포스트버퍼 행동 방식에 대한 몇 가지 기술 정보와 제한 사항입니다.

샘플링

GetSlatePost 노드는 위젯이 샘플링할 씬 백버퍼의 프레임당 한 번 처리된 사본을 샘플링합니다. 이러한 버퍼는 글로벌이므로 팀과 사용 계획을 논의해야 합니다. 머티리얼이 백버퍼의 사본을 샘플링하므로, 포스트버퍼 업데이트 위젯을 사용하지 않는 한 상단에 그려진 위젯은 그보다 아래쪽의 위젯을 샘플링하지 않습니다.

퍼포먼스 및 블러 포스트 프로세스

블러 포스트 프로세스는 사용 중인 블러의 양에 비례하여 퍼포먼스 비용이 커질 것으로 예상됩니다. 즉, 32픽셀 블러의 퍼포먼스 비용은 16픽셀 블러보다 큽니다. 다음 표는 게임 씬의 프레임 렌더링에서 측정한 퍼포먼스 비용 값을 보여줍니다. 이러한 측정값은 Renderdoc RTX 3080에서 UE 5.4의 Renderdoc을 사용하여 측정한 값입니다.

블러 세기(픽셀)	커널 크기	블러 시간(마이크로초, μs)	총 GPU 프레임 시간	블러에 사용된 GPU 비율
72	28x28	93μs	8272	1.1%
256	97x97	212μs	8254	2.5%

위의 수치는 주로 블러 크기 간의 상대적인 퍼포먼스 차이에 대한 개념을 전달하기 위한 것입니다. 언리얼 엔진이나 현세대 하드웨어의 현재 퍼포먼스를 반드시 반영하는 것은 아닙니다.

여러 개의 포스트 프로세서

포스트 프로세스가 있는 여러 개의 포스트버퍼를 사용하는 경우, 화면에 실제로 표시되는 포스트 프로세스에 대한 퍼포먼스 비용만 지불하면 됩니다. 예를 들어, 각기 다른 값의 블러 포스트 프로세스를 사용하는 두 개의 포스트버퍼가 있는 경우,

둘 중 하나만 표시되면 해당 포스트버퍼 비용만 지불합니다.
둘 다 표시되면 두 포스트버퍼 비용을 모두 지불합니다.

버퍼 사용량 최소화하기

각 버퍼는 그 버퍼를 사용하는 위젯이 그려진 경우에만 복사되거나 채워집니다. 두 프레임 동안 버퍼가 사용되지 않으면 GPU에서 크기가 1x1로 조정됩니다.

HDR 지원

슬레이트 포스트버퍼는 HDR 을 지원합니다. 그렇지만, HDR을 사용할 때 머티리얼이 LinearRGB 대신 RGB에서 샘플링 해야 합니다. 또한, HDR 지원은 HDR 컴포짓이 꺼진 상태에서만 즉시 작동합니다. HDR 컴포짓을 사용하려는 경우, 사용하는 동안 감마 값을 보정해야 할 수 있습니다.

캐시된 버퍼 사용량

위젯 머티리얼은 머티리얼/텍스처를 생성할 때와 리소스를 업데이트할 때 포스트버퍼 사용량을 캐시하지만, 그리기마다 이 캐시된 값을 업데이트하지는 않습니다.

이 캐시 때문에 CVar Slate.CopyBackbufferToSlatePostRenderTargets를 끈 상태로 실행하는 경우, 머티리얼이 사용되지 않은 상태로 표시될 수 있습니다. 이 시나리오에서는 포스트버퍼를 사용하려는 머티리얼이 흑/백만 샘플링할 것입니다. 이런 경우 사용량 캐시를 지우고 올바른 결과를 얻으려면 재시작해야 할 수 있습니다. *Engine.ini 파일에서나 테스트 초기에 Slate.CopyBackbufferToSlatePostRenderTargets를 활성화하는 것이 좋습니다.

포스트버퍼 업데이트 위젯으로 PIE에서 크기를 조정하면, 크기를 조정하는 동안 샘플링 결과가 일시적으로 흑/백이 될 수도 있습니다. 이 문제는 포스트버퍼 업데이트 위젯이 크기 확인을 더 보수적으로 진행하기 때문에 발생합니다. 이러한 문제는 PIE에서만 발생하는데, 에디터 그리기로 인해 크기를 조정하는 동안 PIE에서 그리기가 더 활발하게 이루어지기 때문입니다. 독립형 또는 출시 빌드에서는 이러한 문제가 발생하지 않습니다.