이번 시간에는 Curved UI를 만드는 방법에 대해 배워보고자 합니다. 저번 시간에 배운 Flat Canvas도 참고하시길 추천드립니다!
유니티 VR UI 인터렉션 #Flat Canvas
이번 포스팅에서는 Flat한 Canvas와 인터렉션 할 수 있는 방법에 대해 알아보겠습니다. UI와 인터렉션 하기 위해 Ray 기능을 사용할 것입니다. UI 세팅 먼저, 빈 게임 오브젝트를 하나 생성해준 후 이
wlsdn629.tistory.com
이번 시간 최종 목표는 Curved UI를 만든 후에, Ray Interaction이 가능하도록 하는 것입니다.
구조
위 사진과 같은 구조로 만들 예정이므로, 각 이름에 맞게 빈오브젝트를 만들어 두시길 바랍니다. Canvas의 경우 빈 오브젝트가 아닌 UI - Canvas로 만드시면 됩니다.
UI Cylinder : 3D UI가 어떤 모양으로 휠 지와 얼마나 휠 지 조정하는 컴포넌트들을 담을 오브젝트
Curved Panel : Canvas와 상호작용이 가능하게 하는 컴포넌트들을 담고 있는 오브젝트
Canvas : 2D UI들을 담고 있는 오브젝트, Canvas Render Texture 컴포넌트가 반드시 들어 있어야 함
Mesh : 3D UI를 렌더링 하는 컴포넌트들을 담을 오브젝트
UI Cylinder
| Cylinder | Cylinder Surface |
| Cylinder Surface가 생성될 때의 Radius를 결정합니다. | 3D 객체와의 인터렉션이 가능하게 함, 주로 충돌 감지에 사용됩니다. 실린더 형태의 표면을 나타나게 되며 Facing, Height를 조절할 수 있습니다. |
Facing에는 In, Out, Any가 있으며 실린더 표면의 방향을 설정하는 옵션입니다.
Height를 0이나 음수로 설정하면 무한으로 설정됩니다.
Curved Panel
| Ray Interactable | Pointable Canvas | Pointable Canvas Mesh |
| Ray 인터렉션이 가능하게 만들어줍니다. | VR 환경 내에서 Canvas와 상호작용할 수 있게 만들어 줍니다. 사용자의 동작을 감지하여 Canvas와 연동시켜줍니다. | 3D UI 요소와 인터렉션이 필요할 때 사용됩니다. 포인터 이벤트를 받아 Canvas Mesh의 3D 공간 내 위치, 방향에 맞게 변환시켜주어 3D 환경에 더 정교한 인터렉션이 가능하도록 만들어줍니다. |
Pointable Canvas Mesh을 좀 더 설명하자면, 위에서 만들어둔 Cylinder Surface를 보면 2D와 다르게 휘어져 있는 모습을 하고 있습니다. 2D와 다르게 휘어져 있다 보니 휘어진 부분에 포인팅 된 부분의 정보를 더 정교하게 감지해서 Canvas와 연동시켜 준다고 생각하면 좋을 것 같습니다. 그러다 보니 Plat Canvas에서는 사용하지 않고 Curved Canvas 같은 곳에서만 사용이 됩니다.
Canvas Render Texture
Canvas Render Texture는 캔버스를 텍스처로 렌더링하는 기술입니다.
왜 텍스처로 렌더링하는 것이냐면, Canvas를 사용하여 UI를 직접 렌더링 하려면 프레임마다 UI를 다시 그려야 하는 성능 이슈가 발생합니다. 또한 Curved UI와 같이 사용자가 원하는 메시 형태에 래핑하는 것이 어렵습니다.
Canvas Render Texture를 이용하여 캔버스를 텍스처로 만들면 Curved UI와 같은 모습을 렌더링할 수 있으며, UI가 텍스처에 사전 렌더링 되어 매 프레임마다 복잡한 UI(휘어져 있는 등)들을 3D 공간에 직접 다시 그릴 필요가 줄어들게 되어 최적화를 할 수 있습니다. 텍스처를 단일 객체로 처리하기만 하면 되니깐요!
렌더링 스케일을 조절하여 UI 품질을 높이기 위한 텍스처 해상도를 조정할 수 있습니다.
Render Resolution을 조절하여 텍스처의 해상도를 결정할 수 있습니다. 자동 모드를 선택할 경우 캔버스의 크기에 따라 해상도가 결정되며 수동으로 직접 해상도를 설정할 수 있습니다.
Mesh
| Canvas Cylinder | OVR Canvas Mesh Renderer | Collider Surface |
| UI Cylinder에서 만들어둔 Cylinder를 이용하여, 실제 2D UI를 실린더로 감싼 모습으로 렌더링해줍니다. | OVROverlay를 사용하여 Canvas를 최적화하며, 오버레이 혹은 언더레이로 렌더링할 때 사용됩니다. | 콜라이더의 표면을 나타내며, 물리적인 인터렉션이나 충돌 검출에 사용됩니다. |
OVROverlay란 UI 요소들을 VR 헤드셋에 더 직접적으로 렌더링할 수 있도록 Oculus에서 제공하는 기술입니다. 한 마디로, VR에 최적화할 수 있게 도와주는 기능이라고 생각하시면 됩니다.
Use VR Compositor Layers | Oculus Developers
developer.oculus.com
OVROverlay Sample Scene | Oculus Developers
developer.oculus.com
두 사이트를 통해 더 자세히 알아보시는 것을 추천드립니다!