[UI] 최적화 방식 2 - Invalidation Box

Invalidation이란?

공식 문서 : https://dev.epicgames.com/documentation/en-us/unreal-engine/using-the-invalidation-box-for-umg-in-unreal-engine

https://coding-hell.tistory.com/78

[UE4] 언리얼 ui 최적화 기법

https://redchiken.tistory.com/391

[UI] Optimization

 

 

[기본 아이디어]

- Invalidation Box 아래의 자손 위젯들은 지오메트리 정보가 캐시됨

- Pre-pass, Tick, Paint 등을 건너뛰고 캐시된 정보를 활용하므로 Slate 렌더링 최적화 가능

- 레이아웃, 트랜스폼 등 시각적 요소가 변경되는 경우 캐시를 Invalidate 하여 다음 paint pass 에 다시 그리도록 해야 함

* 단, 위젯의 버텍스 버퍼에 저장되지 않는 외적 요소가 변경되는 경우 (e.g. 머티리얼 파라미터 변경) invalidate 필요 없음

- 캐시를 Invalidate 한다는 것은 더 이상 유효하지 않음으로 마킹하여 다음 렌더 사이클에 다시 페인트하도록 하는 것이다.

 

[활용 방법]

UMG 디자이너 - 팔레트 창

위와 같이 Optimization 그룹 아래에 Invalidation Box 와 Retainer Box 를 볼 수 있다.

이미지 하단의 Hierarchy 에서 볼 수 있듯이 Invalidation Box 아래로 자손 위젯들을 추가하면 위에서 설명한 것처럼 지오메트리 정보가 캐시되고, 슬레이트 위젯을 표시하는 일련의 과정 (Pre-pass - Tick - Paint 등) 을 거치는 대신 캐시 정보를 표시하여 최적화가 가능하다.

Invalidation 에 포함시킨 위젯의 지오메트리 정보가 변경되는 경우, 캐시된 정보 Invalidate - 렌더링 - 캐싱을 거치게 된다. 따라서, 자주 변경되는 요소가 Invalidation Box 에 포함된다면 오히려 퍼포먼스에 악영향을 미칠 것이다.

그렇다면 위 이미지와 같은 계층 구조에서 ExpBar 딱 한 가지 위젯이 자주 변경된다면?

--> 해당 위젯의 디테일 패널에서 Is Volatile 세팅을 활용할 수 있다.

 Is Volatile 을 활성화하면 해당 위젯은 캐싱에서 제외되며 Paint-pass 마다 렌더링된다.

 

정리하자면, 캐싱을 최대한 효율적으로 사용하기 위해서는 가장 먼저 위젯을 업데이트 빈도에 따라 분류하여 변화가 적은 위젯을 인밸리데이션 박스로 감싼다. UI 계층 구조에 따라 위젯을 분류하기가 복잡한 경우가 있는데, 이 때에는 Is Volatile 세팅을 활용해 특정 위젯만 캐시에서 제외하여 캐시된 정보를 Invalidate 해야 하는 요소를 최소화한다.

 

[Invalidate 방법]

아래와 같이 직접 Invalidate 해주는 것이 원칙이나, 일부 자주 이용되는 위젯 요소는 자동으로 캐시를 Invalidate 한다.

(이게 어떤 위젯들인지는 공식문서에도 나와있지 않다...)

블루프린트 노드

C++ 함수:

void SWidget::Invalidate(EInvalidateWidgetReason InvalidateReason)

 

[디버깅]

SlateDebugger.Invalidate.Enable 1

위와 같은 콘솔 커맨드로 디버깅을 활성화했을 때 Invalidation 이 활성화된 요소들을 상태에 따라 다른 색상으로 보여준다.

초록색의 경우 캐시된 정보를 재활용하여 업데이트되지 않은 위젯들, 빨간색의 경우 위젯 요소가 변경됨에 따라 캐시 정보가 Invalidate 되어 다시 페인트된 경우이다.

 

둘 중 아래의 이미지에서 볼 수 있듯이 플레이어 캐릭터의 머리 위에 부착된 3D 위젯의 경우 캐릭터 이동에 따라 레이아웃 (위치)가 변경되었으므로 빨간색으로 변한다.

 

해당 위젯 같은 경우에는 Invalidation Box 를 쓰면 캐싱 --> 캐시 Invalidate --> Paint 하는 오버헤드가 발생하므로 Invalidation 을 활용하지 않는 것이 더 효율적일 것이다.

 

왼쪽 상단의 위젯은 플레이어 정보를 나타내는 위젯으로, 시각적 요소의 변경이 빈번하지 않기에 Invalidation 을 활용하기에 적합할 것이다.

 

포스팅 맨 위에 링크한 글들을 참고하면 더 자세한 최적화 내용에 대해 읽어볼 수 있다.