SAMSAM

[Unity] UGUI & 최적화

샘김 — Sun, 23 Apr 2023 18:59:38 +0900

UGUI란?

UGUI는 Unity Graphic User Interface 의 약자입니다.

유니티 에디터상에서 UI를 만들어 줄 수 있게 유니티에서 제공해주는 것이며.

기존에는 NGUI라는 유료에셋을 사용하였습니다.

Canvas?

Canvas는 게임화면에 대응합니다. 게임뷰의 해상도를 1280 x 1024라고 지정을 해놓고 작업을 한다고 생각하면

Canvas에서 RectTransform 에 있는 Width와 Height 가 각각 1280 * 1024로 되어 있습니다.

1:1 비율로 플레이어의 화면에 따라 대응하게 됩니다.

Canvas의 Render Mode

Screen Space - Overlay : 화면 좌표계에 대응하고 UI들이 스크린상에서만 존재하면서 모든 3D 오브젝드들이 그려진 다음에 마지막 UI요소를 덮어 쓰는 방식입니다.
1. Pixel Perfect : 요소의 픽셀을 선명하게 유지하고 블러(Blur)를 방지하는 효과를 볼 수 있다.
2. Sort Order : Canvas의 정렬 순서이다. 숫자가 작을 수록 먼저 렌더링 된다.
3. Target Display : 다중 모니터를 사용할 경우 표시할 모니터를 지정한다.
Screen Space - Camera : 기본적으로 화면 좌표계에 대응하고 3D 좌표 상에서의 위치를 가지게 됩니다. 카메라를 기준으로 거리에 따라 떨어져있게 되기도 합니다.
1. Pixel Perfect : 요소의 픽셀을 선명하게 유지하고 블러(Blur)를 방지하는 효과를 볼 수 있다.
2. Render Camera : Canvas 를 비출 카메라를 지정한다.
3. Plance Distance : 카메라로 부터 거리를 지정한다. 크기는 카메라 영역에 꽉 차게 조절된다.
4. Sorting Layer : 정렬 레이어를 지정한다.
5. Order in Layer : 레이어에서 렌더링 될 우선 순위를 지정한다.

World Space : 일반적으로 카메라는 Canvas 를 렌더링 하진 않지만 Canvas 컴포넌트에서 지정된 카메라는 Canvas 를 렌더링한다. 보통 증강현실 또는 가상현실의 UI를 작업할 때 사용되며 World Space로 설정하게 되면 Canvas 도 하나의 3D 오브젝트가 될 수 있다. 위 두가지 방식 중 하나는 좌표를 가질 수 없고, 스크린 상에서만 UI를 그릴 수 있게 하는 방식이고, 하나는 카메라에 따라 Canvas가 달라지는 반면에, World Space는 하나의 3D 오브젝트가 되기 때문에 좌표만 지정해놓고, 큐브위에 올려 놓을 수도 있습니다.
1. Pixel Perfect : 요소의 픽셀을 선명하게 유지하고 블러(Blur)를 방지하는 효과를 볼 수 있다.
2. Event Camera : Canvas를 비출 카메라를 지정한다.
3. Sorting Layer : 정렬 레이어를 지정한다.
4. Order in Layer : 레이어에서 렌더링 될 우선 순위를 지정한다.

Canvas Scaler

UI Scale Mode 속성 Canvas 에서 UI요소가 스케일 되는 방법을 결정합니다.

Constant Pixel Size : UI 요소가 화면 크기에 관계없이 동일한 픽셀 크기로 유지된다.
Scale With Screen Size : 화면이 커질수록 UI요소도 커지는 상태. 즉, 화면 비율에 따라서 UI도 맞춰진다.
Constant Physical Size : 화면 크기와 해상도에 관계없이 UI요소가 동일한 물리적인 크기로 유지되는 상태

Constant Pixel Size

< Constant Pixel Size >

Scale Factor : Canvas의 모든 UI 요소를 이 배율로 스케일한다.
Reference Pixels Per Unit : 스프라이트에 이 'Pixel Per Unit' 설정이 적용된 경우 스프라이트 1픽셀이 UI의 유닛 하나에 해당한다.

Scale With Screen Size

< Scale With Scrren Size >

Reference Resolution : UI 레이아웃에 적합한 해상도로 화면 해상도가 크면 UI더 크게 되고 작으면 작게 보여짐.
Screen Match Mode : 현재 해상도의 종횡비가 레퍼런스 해상도에 맞지 않는 경우 Canvas영역을 스케일하는데 사용
1. Match Width of Height : Canvas 영역의 너비 또는 높이를 레퍼런스로 사용하여 스케일 하거나 그 사이로 스케일
2. Expand : Canvas 크기가 레퍼런스보다 더 작아지지 않도록 Canvas 영역을 수평 또는 수직으로 확장합니다.
3. Shrink : Canvas 크기가 레퍼런스보다 커지지 않도록 수평 또는 수직으로 자릅니다.

Match : 스케일링 레퍼런스로 너비 또는 높이를 사용할 지, 아니면 둘 사이의 배합을 사용할 지 결정합니다.
Reference Pixels Per Unit : 스프라이트에 'Pixel Per Unity' 설정이 적용된 경우 스프라이트의 1 픽셀이 UI의 유닛 하나에 해당합니다.

Constant Physical SIze

< Constant Physical Size >

Physical Unit : 현재 디스플레이으 길이를 계산한 실제 단위를 사용한다.
Fallback Screen DPI : 화면 DPI를 알 수 없는 경우 가정되는 DPI이다.
Default Sprite DPI : 'Pixel Per Unit'설정이 'Reference Pixels Per Unit' 설정과 일치하는 스프라이트에 사용할 인치당 픽셀(DPI)이다.
Reference Pixels Per Unit : 스프라이트에 'Pixels Per Unit'설정이 있는 경우 DPI는 'Default Sprite DPI' 설정과 일치한다.

Canvas Scaler 에서 가장 많이 사용되는 방법은 Scale With Screen Size 입니다. 왜냐하면 스마트폰의 기기들의 화면 비율들이 각각 다르기 때문입니다.

Graphic Raycaster

Canvas 의 모든 Graphic를 감시하여 그 중 하나에 충돌하였는지 여부를 결정합니다.

Graphic Raycaster 를 설정하여 후면 Graphic을 무시하거나 그 앞에 있는 2D 또는 3D 오브젝트에 의해 가져지도록 설정 할 수 있습니다. 이 요소의 처리 순서를 Raycasting의 앞이나 뒤로 변경하고 싶은 경우, 수동으로 우선 순위를 지정 할 수 도 있습니다.

Ignore Reversed Graphics : Raycaster 가 후면 Graphics를 무시할지 여부입니다.
Blocked Objects : Graphic Raycast를 막을 오브젝트 타입입니다.
Blocking Mask : Graphic Raycast를 막을 오브젝트 타입니다.

UI 병목현상

UI 병목현상은 유니티에서 UI가 느리게 렌더링되거나 응답이 늦는 현상을 의미합니다.

이는 사용자가 게임을 플레이하는 동안 사용자 인터페이스가 느려지거나 버벅거리는 원인이 됩니다.

UI 병목현상의 원인은 다양합니다. 예를들어, UI의 개수가 많을 경우 렌더링 속도가 느려지거나, UI요소의 크기가 매우 큰 경우 GPU 메모리 부족으로 인해 렌더링 속도가 느려지거나 렌더링이 제대로 되지 않을 수 있습니다.

또한, UI요소가 복잡한 경우, UI요소 내부의 계층 구조가 깊거나 복잡하건, UI 요소의 애니메이션, 이벤트 처리 등이 불필요하게 많은 경우도 UI병목현상의 원인이 될 수 있습니다.

GPU 바운드 : Fillrate(오버드로우, 대역폭 이슈)
Fillrate : 그래픽 카드가 초당 화면에 렌더링 할 수 있는 픽셀의 수를 의미한다.
CPU 바운드 : DrawCall, Batch
CPU 바운드 : 캔버스 배치 구축 연산 시간
CPU 바운드 : 버텍스 생성 시간
많은 수의 UI 엘리먼트

Unity UI Optimization

Unity에서 UI 최적화를 위해서는 다음과 같은 몇가지 방법을 고려할 수 있습니다.

Canvas 크기 조정
- UI 요소가 포함된 Canvas의 크기가 화면크기와 동일하지 않다면, 크기 조정을 통해 불필요한 렌더링을 줄일 수 있습니다.
UI 요소의 불필요한 애니메이션 제거
- UI 요소에 불필요한 애니메이션을 추가하면 불필요한 계산이 추가됩니다. 또한 UI요소가 이동하는 경우 Canvas가 다시 렌더링 되므로 부하가 발생할 수 있습니다. 따라서, 최소한의 애니메이션만 사용하는 것이 좋습니다.
Text 요소의 처리
- Text 요소는 UI에서 자주 사용되지만, 폰트와 같은 리소스 크기가 크기때문에 메모리를 많이 사용합니다. 텍스트를 표시할때는 가능한 한 폰트 크기와 스타일을 통합하여 사용하고, 큰 텍스트를 블록을 사용하는 대신 여러 작은 블록으로 분할하여 사용하면 메모리 사용량을 줄일 수 있습니다.
UI 요소를 최소화
- 불필요한 UI요소를 삭제하면 불필요한 렌더링을 줄일 수 있습니다. 또한 UI 요소의 최소한의 수를 사용하면 화면의 복잡도를 줄일 수 있습니다.
UI요소의 배치
- UI요소의 배치를 최적화하여 Canvas의 렌더링 효율을 향상시킬 수 있습니다. UI요소를 겹치지 않도록 배치하고,크기가 큰 UI요소 위에 배치하지 않는 등의 방법을 사용할 수 있습니다.
Texture Atlas 사용
- UI요소에 사용되는 이미지나 아이콘등의 리소스를 Texture Atlas 로 만들어서 사용하면, 메모리 사용량과 렌더링 시간을 줄일 수 있습니다.
적절한 기기 성능 대응
- 각 기기의 성능을 고려하여 UI를 최적화 해야합니다. 예를 들어, 모바일 기기에서는 낮은 해상도와 작은 텍스처를 사용하거나, 네이티브 UI를 사용하는 것이 좋습니다.

이러한 방법들을 고려하여 Unity UI 최적화를 수행하면, 게임의 성능을 향상시키고 사용자 경험을 향상시킬 수 있습니다.

[Unity] Occlusion Culling

샘김 — Mon, 5 Dec 2022 22:34:18 +0900

Frustum Culling

Frustum Culling 유니티에서 기본적으로 제공하는 Culling 기법으로 카메라에서 비추고 있는 영역을 Frustum Area 로 정의합니다. Clipping Plane을 줄여 에서 Frustum Area를 벗어난 오브젝트는 렌더링 대상에서 제외시킵니다.

카메라 오브젝트의 카메라 컴포넌트 Clipping Plane으로 설정 가능
단위는 미터(모든 유니티에서)
Near Clipping Plane 과 Far Clipping Plane 을 설정하여 가시거리 설정 가능
유니티 안에서 기본적으로 수행

카메라가 비추는 절두체 모양의 피라미드 모양의 Frustum Area

Near : 화면이 시작하는 지점

Far : 화면이 끝나는 지점

Near, Far Clipping Planes 설정

Occlusion Culling

Occlusion Culling 은 오브젝트가 다른 오브젝트에 의해 가려져서 카메라에 보이지 않을 때 해당 오브젝트의 렌더링을 비활성화 하는 기능입니다. 3D 그래픽에서는 카메라에서 가장 먼 오브젝트가 먼저 그려지고 가까운 오브젝트는 그 위에 그려집니다(overdraw) . Frustum Culling 은 카메라의 시야 영역밖에 있는 오브젝트에 대한 렌더링을 비활성화 하지만 Overdraw 에 의해 숨겨진 것을 끄지는 않습니다.

낭비되는 렌더링 작업을 방지하여 CPU, GPU 시간 모두 절약
동적 오브젝트를 가릴 순 있지만, 동적 오브젝트가 다른 오브젝트를 가릴 순 없다.( 동적 오브젝트는 Occludee 일 순 있지만 Occluder 일 수는 없음
불투명 오브젝트에는 적용할 수 없음

Occluder & Occludee

Occluder : 다른 오브젝트를 가리는 오브젝트(정적 오브젝트)

Occludee : 다른 오브젝트에 의해 가려지는 오브젝트

Occlusion Culling 설정 방법

Occlustion Culling 을 시작하기 전에 오브젝트에 Occluder static, Occludee static을 설정해야 합니다.

카메라 컴포넌트에서 Occlusion Culling 플래그를 활성화 시켜준다.

Occlusion Culling window

- 상단 메뉴에서 Window → Rendering → Occlusion Culling 을 눌러 Occlusion Culling widow을 엽니다.

- Occlusion Areas를 누르면 녹색 반투명 상자가 생성되고 그 안에 객체들에게 Occlusion Culling을 적용합니다.

- Is View Volume 활성화 시킵니다.

- 오브젝트들을 Occluder static 또는 Occludee static 으로 설정한다.

- Bake 카테고리를 눌러 각 옵션을 설정해주는데 옵션들의 기능은 다음과 같습니다.

Smllest Occluder : 오브젝트를 Occluder로 인식할 최소 크기, 해당 크기보다 작은 오브젝트는 다른 오브젝트를 가리지 않는다고 판단.
Smallest Hole : 카메라가 지오메트리 사이의 빈 공간을 인식할 최소거리, 오브젝트들이 촘촘하게 배치되어 있을수록 더 작게 설정.
Backface Threshold : Backface를 제거할 임계값, 값이 작을수록 더 많은 Backface를 제거

- [Bake] 버튼을 누르면 Occlusion Culling 이 Bake된다.

- [Visualization] 탭에서 실제로 Culling 되는 모습을 확인할 수 있다.

[Unity]Forward, Deferred, Forward+, SSAO

샘김 — Fri, 18 Nov 2022 09:30:27 +0900

Render pipeline

렌더 파이프라인은 씬의 콘텐츠를 가져와서 화면에 표시하는 일련의 작업을 수행합니다. 수행하는 작업의 간략한 내용은 다음과 같습니다.

Culling
Rendering
Post Processing

렌더 파이프라인은 저마다 다른 기능 및 성능을 지니고 있으며, 다양한 게임, 어플리케이션 및 플랫폼에 적합합니다.

Unity 가 제공하는 다양한 렌더 파이프라인을 이해해야 개발 초기에 프로젝트에 대한 올바른 경험을 내릴 수 있습니다.

Unity 는 다음의 렌더 파이프라인을 제공합니다.

빌트인 렌더 파이프라인은 Unityd의 기본 렌더 파이프라인 범용으로 사용되는 렌더 파이프라인이므로 커스터마이즈 옵션이 제한적입니다.
유니버설 렌더 파이프라인(URP)은 광범위한 플랫폼에서 최적화된 그래픽스를 구현하도록 지원합니다.
고해상도 렌더 파이프라인(HDRP)는 고사양 플랫폼을 위한 최신 고해상도 그래픽스를 구현하도록 지원합니다.
Unity의 스크립터블 렌더 파이프라인 API를 사용하여 커스텀 렌더 파이프라인을 생성할 수도 있습니다.

렌더링이란 3차원 공간에 객체(Object)를 2차원 화면인 하나의 장명(Scene)에 바꾸어 표현하는것을 말한다.

즉 2차원에 표시된 물체처럼 보이게 하는 것이라고 이해하며 쉽다.

https://parksh86.tistory.com/168

렌더링(Rendering) 이란?

렌더링(Rendering) 렌더링이란 3차원 공간에 객체(Object)를 2차원 화면인 하나의 장면(Scene)에 바꾸어 표현하는 것을 말한다. 즉 2차원에 표시된 물체를 3차원에 물체처럼 보이게 하는 것이라고 이해

parksh86.tistory.com

Forward Rendering

전통적인 렌더링 기법이며 수많은 동적 Light를 다루는데 에는 한계가 존재합니다. 비교적 저 사양에서 잘 작동하고, 해상도가 올라가도 요구하는 메모리가 Deferred에 비해 적으며 반투명 처리도 문제가 없습니다. 하지만, n개의 광원과 m개의 Mesh가 포함된 Scene을 표현하기 위해서는 n x m 번의 드로우콜이 필요합니다. 그리고 화면에 보이지 않더라도 모든 오브젝트 광원을 계산합니다.

Forward Rendering은 오브젝트들을 바로 하나의 버퍼에 그려주기 때문에 각 오브젝트를 그려줄 때 마다 조명 연산을 수행합니다. 광원이 많을수록 드로우 콜의 호출 횟수가 늘어나면서 성능에 큰 부담을 안겨줄 수 있습니다.

3D MMORPG로 대성공한 리니지2는 대표적인 Forward Rendering 방식의 게임이다. 당시 게임에서는 특별한 라이팅 처리를 하는것이 어려웠기 때문에 당시 출시된 게임은 화면이 비슷해 보이는 특징이 있다.

Deferred Rendering

많은 수의 실시간 Lighting 을 좋은 성능으로 처리하기 위한 기술입니다. 필요한 장면을 그린 후 G-Buffer 에 저장하여 장면을 합성하고 최종 결과물을 렌더링 하는 기법입니다. Scene 렌더링과 광원 렌더링을 구분하고 드로우콜이 감소되는 효과가 있고 모바일 GPU에 최적환 된 방법이지만 많은 Render target(Frame Buffer) 을 필요로 합니다.

Deferred Rending의 연산처럼 각 오브젝트의 Normal 정보와 Depth 정보 Diffuse 정보 등을 모아서 한번에 처리해주는 것을 볼 수 있습니다. MRT(Multi Render Target) 라는 기법으로 각 Render Target에 각각의 정보들을 그려준 뒤 G-Buffer 에 저장하고 하나의 Texture에 연산하여 그려줍니다.

하지만, 메모리 대역폭이 뒷받침 되어야 하며 PC에서 많이 사용하지만 모바일에서는 메모리 대여폭이 낮아 성능이 저하됩니다.

* Anti aliasing (MSAA) 해결 과 반투명 오브젝트의 Rendering 이 어렵다.

현실감 넘치거나 눈부신 화면을 연출할 때 강력한 효과를 보여주는 Deferred Rendering 현재는 많이 개선되었습니다.

Forward +

수많은 Lighting 다루는 기술입니다. 여러 개의 타일을 나누고 타일 별로 Lighting 개수를 나눕니다. Forward 의 경우 Lighting 의 영향을 받는 제한이 오브젝트에 있었다면 Forward+ 는 타일 별로 Lighting 의 개수로 영향을 받아 하나의 오브젝트에 여러 개의 Lighting 을 적용시킬 수 있습니다.

Forward + Rendering 기술의 첫 번째 단계는 화면 공간에서 균일한 타일 그리드를 사용하여 조명을 타일별 목록으로 분할

두 번째 표준 Forward Rendering pass 를 사용해 Scene 의 개체를 셰이딩 처리하지만, 씬의 모든 동적 조명을 반복해 계산하는 대신 현재 Pixel의 화면 공간 위치를 사용하여 이전패스에서 계산된 그리드의 조명 목록을 조회한다. 이 Light Culling 은 Pixel을 올바르게 조명하기 위해 반복해야 하는 중복 조명의 수를 크게 줄이므로 표준 Forward Rendering 기술에 비해 상당한 성능 향상을 제공하게 된다. Forward + 는 표준 기술을 통합하기 때문에 기존방식으로 구축된 그래픽 엔진에 통합 될 수 있다. Forward + 는 G-Buffer 를 사용하지 않으며 Deferred 의 한계를 겪지 않는다. 불투명 및 투명 지오메트리 모두 Forward +를 사용하여 렌더링할 수 있다. 최신 그래픽 하드웨어를 사용하여 5,000~6,000개의 동적 조명으로 구성된 장면을 Full HD 해상도에서 실시간으로 Rendering 할 수 있게된다.

Screen Space Ambient Occlusion (SSAO)

AO(Ambient Occlusion) 빛의 차폐(가려 막고 덮음)로 인한 감쇠 근사치를 구하는 효과입니다. 현실에서도 방의 구석 부분은 훨씬 어둡듯이, 구석이나 틈 같은 곳을 더 어둡게 하여 더욱 자연스럽고 사실적인 느낌을 낼 수 있도록, 표준 글로벌 일루미네이션에 더해 미묘한 효과를 사용하는 것이 가장 좋습니다. 일반적으로 광원과 물체를 던져 놓고 지역 조명으로 처리를 시행하면 그림자는 있지만 실제와 미묘하게 다른데 AO는 이를 보정하고 입체감을 강화하며 실제에 더 가깝게 보이도록 만들어 줍니다.

SSAO(Screen Space Ambient Occlusion) 가장 많이 쓰이는 AO이며 현재 모니터에 Rendering 되는 영역만을 Screen Space로 인식하여 해당 영역에만 AO를 적용함으로써 일정 수준 최적화 된 그래픽을 제공합니다. 정확도는 떨어지지만 실시간 렌더링에 사용이 가능하면서 연산이 가벼운 이점이 있습니다.

위의 사진은 SSAO가 없는 그림이고 아래 사진은 SSAO가 적용된 그림이다. 그림자 층에 따라 좀 더 사물의 형태가 명확하게 보이는 것을 느낄 수 있따. 별다른 텍스처를 사용하지 않고도 포리곤과 셰이더를 이용해서 음영을 사실적으로 표현할 수 있게 해준다.

AO를 표현하는 기법들은 기본적으로 연산이 비쌉니다. 왜냐하면 해당 영여이 표면에 의해서 둘러쌓여있는지 판가름하기 위해서 여러 정보를 수집해야 하기 때문입니다.