유니티

유니티 캔버스(Canvas)와 Render Mode

bugmin 2024. 4. 16. 21:39

RectTransform 에 앞서 UI에 대해 얘기해보면

 

UI, 즉 유저 인터페이스는 유저가 소프트웨어를 편리하게 다룰 수 있도록 도움을 주는 역할을 하고 이러한 UI는 유니티에서는 캔버스(Canvas)라는 도화지 위에서 그려지게 된다.

 

캔버스는 Canvas 컴포넌트를 포함하고 있다.

 

캔버스의 경우 카메라로 찍는 것이 아니라 화면에 그려지기에 기본적으론 카메라의 위치와는 무관하다.

 

씬에 캔버스가 없다면 UI를 만들면 자동적으로 캔버스를 생성하며 생성한 UI는 캔버스의 자식으로 만들어지게 된다.

 

즉 모든 UI는 캔버스 안에 있어야 한다는 것이다.

 

 

캔버스 컴포넌트는 다음과 같이 생겼다.

이중에서 렌더 모드에 대해 알아보자

 

Render Mode

 

1. Screen Spcae - Overlay

Render Mode의 초기값이다.

위에서 카메라의 위치와 무관하다 말했듯이 스크린 공간 모드에선 캔버스가 화면(스크린)에 맞게 렌더링 되어 카메라가 없는 경우에도 UI가 렌더링 될 수 있게 한다. 

 

스크린의 크기와 해상도가 바뀌더라도 UI는 자동으로 스케일이 될 수 있다.

 

씬 위에 렌더링 된다 보면 된다.

 

2. Screen Space - Camera

유니티 문서를 살펴보면 "카메라 절두체 내에 정확히 맞도록 스케일된다" 라 언급하고 있다.

 

카메라 절두체가 무엇인가 하면

카메라 컴포넌트의 Projection을 Perspective로 설정하여 카메라 절두체에 대한 개념을 좀 이해할 수 있다.

 

Orthographic은 정투영하는 반면, Perspective는 원근감이 있게 투영을 하기 때문에 멀리있는 것은 크기가 작아짐을 알 수가 있다.

 

 

이처럼 Perspective의 카메라를 보면 각뿔을 절단한 모양을 하고 있는데 이러한 것을 절두체(frustum)이라 한다.

 

 

카메라 컴포넌트에 보면 Clipping Planes라는 것도 있는데 기본 값은 Near가 0.1 Far가 1000이다.

 

Far를 작게하면 멀리있는게 안보이고 Near값을 늘리면 가까이 있는 것이 안보인다.

 

 

이미지로 설명하면 다음과 같다. 저 절두체 사이에 사물이 있어야 보이게 된다.

 

이 이미지에선 값을 늘리면 왼쪽으로 이동한다 생각하면 된다.

그렇기에 Far 값이 작아지면 멀리있는 것이 안보이고 Near를 크게하면 가까이 있는 것이 안보이게 되는 것이다.

 

얘기가 좀 길어 졌는데 결국 Screen Space - Camera는 저 절두체 사이에 캔버스를 꽂아버리고 이동한다 생각하면 된다.

 

꽂아버렸기 때문에 거리에 따라 크기가 달라지지는 않는다.

 

만일 사물이 절두체 안에 있고 꽂아둔 캔버스보다 앞에 있다면 사물이 먼저 보이게 된다.

 

화면 크기가 변하거나 해상도가 변경되거나 절두체가 변경된다해도 자동으로 스케일링을 해준다고 한다.

 

자동차 안에서 애플의 비전프로를 사용하는 모습을 생각하면 좋을 거 같다. 

 

https://youtu.be/C-PeV8tXcIk

4분 29초경 참고

 

내비게이션은 시야에 고정되어 있고 내비게이션 앞에 있는 손은 보여주고 뒤에 있는 것은 안보이지 않는 모습이다.

 

3. World Space

 

이거는 단순히 캔버스가 게임오브젝트마냥 있는 것이다.

그렇기에 당연히 카메라의 각도나 거리에 영향을 받는다.

 

식물의 이름표 같은 거로 생각하면 좋을 거 같다. 

식물을 게임오브젝트, 이름표를 월드 스페이스로 렌더링 된 캔버스라 생각하면 내가 식물과 멀어진다고 이름표가 날 따라오진 않지 않는가

 

이 문서는 아래의 유니티의 문서를 참고하여 작성하였음

 

https://docs.unity3d.com/kr/2019.4/Manual/class-Canvas.html

'유니티' 카테고리의 다른 글

유니티 - 애니메이션  (0) 2024.05.24
유니티 아크탄젠트(Atan2)에 대하여  (0) 2024.05.13
유니티 PlayerPrefs  (0) 2024.04.18
유니티 UI의 Rect Transform  (0) 2024.04.17
유니티 C# OrderBy와 ThenBy  (0) 2024.04.15