new GUI (ugui) 최적화 팁

Draw call을 줄이는 것은 최적화 시 가장 중요한 요소중 하나입니다. Unity의 새로운 UI는 이러한 Draw call을 줄이는 것이 매우 용이하게 되어있습니다. 이 글에서는 new GUI의 Draw call에 대해 다루고자합니다.

new UI는 Button, Image 등 UI 컴포넌트를 추가 시 자동으로 Canvas하위로 배치되게 되어있습니다. 

유니티 UI의 Draw call은 이 Canvas 단위로 이루어집니다. Canvas 하위의 UI 컴포넌트들에 쓰이는 이미지가 SPrite packing되어 있다면 모두 하나의 Draw call로 처리가 가능합니다. 그러므로 유니티의 UI시스템을 이용하면 Draw call을 절약할 수 있어서 성능 향상에 매우 도움이 됩니다. 하지만 유니티의 UI를 이용한다고 해서 무조건 Draw call이 하나만 발생하는 것은 아닙니다. 성능 향상을 위해서 숙지하고 있어야 할 사항을 몇 가지 이야기하고자 합니다.

Draw call

그래픽 최적화를 위해서는 Draw call을 줄이는 것이 중요합니다. 이는 UI 역시 마찬가지입니다. 유니티의 UI에서는 Canvas마다 각자의 Vertex buffer를 가지고 있기때문에 Canvas가 두개면 최소 두번의 Draw call이 일어납니다. 이는 Canvas하위에 Canvas가 존재하는 경우에도 마찬가지입니다. 만일 Canvas안에 Canvas를 추가하는 경우에도, 씬 바로 하위의 Canvas는 하나 뿐이지만, 최소 두 개의 Draw call이 발생합니다.

위에도 언급했지만 하나의 Draw call이 되기 위해서는 사용되는 이미지들이 atlas 처리가 되어있어야합니다. 즉, Sprite packing되어있는 sprite들을 사용해야합니다. 다만, atlas 페이지가 두 개 이상으로 나뉘어져있으면 경우에 따라서 두 개 이상의 Draw call이 일어날 수도 있습니다. 따라서 Packing Tag를 잘 나누는 것이 중요합니다.

다만, Canvas 별로 Draw call이 일어난다고해서 무조건 모든 UI요소들을 하나의 Canvas에 몰아넣는 것이 꼭 좋은 솔루션인것만은 아닙니다. 동적으로 반응하는 버튼이나 Fill Image등을 처리하기위해서는 매 번 갱신 비용이 발생하기 때문입니다. Runtime시에 변경되지 않는 이미지와 실시간으로 변경되는 이미지가 같은 Canvas에 존재하면 변경되는 이미지 하나를 처리하기 위해서 Canvas의 Vertex buffer를 갱신하기때문에 쓸데없는 갱신 비용이 발생합니다. 따라서, Draw call을 하나 희생하더라도 정적인 이미지들은 별도의 canvas로 빼두는 것이 효율적일 수도 있습니다. 

Text

Text는 별도의 Texture를 사용하기때문에 별도의 Draw call로 발생합니다. 이 텍스쳐는 font별로 만들어지므로 font의 종류를 줄이는 것이 Draw call을 줄이는 방법이기도 합니다.

따라서 아래의 씬에서는 UI가 차지하는 Draw call이 3입니다. 아이콘 이미지들은 패킹되어있는 상태라서 모두 합쳐서 1개의 Draw call을 차지합니다. 텍스트는 3개가 존재하지만 사용된 폰트는 2개라서 2개의 Draw call을 차지합니다. 따라서 총 3개의 Draw call이 발생합니다.