[ VR ] 오큘러스 Interaction SDK < 02 . Tutorials > - ui와 상호작용하기

[ OverView ]

[ 개요 ]

Ray / Poke / Grab등의 다양한 상호작용을 위한 튜토리얼이다 .

 

[ Create Ray Interaction ]

[ 개요 ]

광선을 통한 인터렉션을 위해서는 , 손을 사용한다면  hand ray interactors 를 컨트롤러를 사용한다면 controller ray interactors를 추가해야한다 . 이후 광선을 감지할 오브젝트에는 ray interactable을 추가해야 한다 .

 

[ Hand Ray 인터랙터 추가 ]

1. Hand Ray Interactors를 추가한다 . 핸드 레이 추가 를 참고하자
2. Project 에서 HandRayInteractor 를 검색 하고 검색 결과에서 HandRayInteractor 프리팹을 OVRInteraction > OVRHands > LeftHand > HandInteractorsLeft 로 드래그한다 .
3. HandInteractorsLeft 를 선택합니다 .
4. Inspector 아래에서 + 를 클릭하여 Interactors 목록 에 새 요소를 추가한다 .
5. Hirearchy 에서 요소의 속성으로 ControllerRayInteractor를 드래그하여 요소를 Interactors 로 설정한다 .
6. HandRayInteractor 를 선택한다 .
7. Inspector 에서 Hand Ref 의 Hand 속성을 LeftHand 로 설정한다 .
8. 오른손에 대해 이 단계를 반복한다.

[ Controller Ray 인터랙터 추가 ]

1. Controller Ray Interactors를 추가한다 . 컨트롤러 레이 추가 를 참고하자
2. Project 에서 ControllerRayInteractor 를 검색 하고 검색 결과에서 ControllerRayInteractor 프리팹을 OVRInteraction > OVRControllers > LeftController > ControllerInteractors 의 자식으로 설정한다 .
3. ControllerInteractors 를 선택합니다 .
4. Inspector 에서 Interactors 목록 에 새 요소를 추가한다 .
5.  ControllerRayInteractor 를 Element0에 드레그한다 .
6. ControllerRayInteractor 를 선택한다 .
7. Inspector 아래의 Controller Ref 에서 Controller 속성을 LeftController 로 설정합니다 .
8. 오른쪽 컨트롤러에 대해 이 단계를 반복한다 .

[ 상호작용 하고자 하는 물체에 Ray Interactable 추가 ]

1. 상호작용 하고자 하는 오브젝트에  Box Collider 및 Collider Surface 를 추가한다 .
2. Collider Surface의Collider 에 위에서 추가한 Box Collider를 추가한다 .
3. RayInteractable 스크립트를 추가한다 .이제 Ray가 닿으면 이를 감지합니다.
4. RayInteractable 스크립트의 Surface에 위에서 추가한 Collider Surface를 넣어준다 .

=>여기까지의 과정을 거치면 광선이 컨트롤러부터 나오고 , 물체에 닿은채로 엄지 손가락 트리거를 당기면 해당 물체에 점이 나타남을 볼 수 있다 .

=>또한 , Max Ray Length를 통해 Ray의 거리를 정할 수 있다.

[ Create UI ]

[ 개요 ]

Interaction SDK에는 곡선형 UI 및 플랫 UI용 프리팹이 존재한다 . Poke , 스와이프 , 스크롤 등의 기능이 가능하다 .

 플랫 UI를 만들려면 FlatUnityCanvas 프리팹을 , 선형 UI를 생성하려면 CurvedUnityCanvas 프리팹을 추가한다 .

추가로 자세한 예제는 도큐먼트 : Example Scenes 를 참고하자 .

 

[ ui와 함께  Ray 작용 사용 ]

기본적으로 위에서 추가한 UI 에는 Poke정도의 상호작용만 지원한다 . 손이 닿지 않는 UI와 상호작용을 하려면 ui 프리팹에 Ray Interactable을 추가한 다음 해당 속성을 설정해야 한다 .이를 설정하면 RayCast 를 통해 ui 에 도달이 가능하다 .

 

[ RayInteractable 추가 ]

플랫 ui 프리팹에 Ray Interactable 컴포넌트를 추가하자 . 이후

1. Ray Interactable 구성 요소 에서 Pointable Element 속성을 FlatUnityCanvas 로 설정한다 .
2. Surface 속성을 Unity Canvas 로 설정한다 .

근데 ,, 공식문서에서는 여기까지 하면 된다고 하였지만 어찌된 이유인지 작동을 하지 않았다 .

 

해결한 방법은 두가지이다 .

 

[ UIHelper 추가 ]

때아때 : 유니티) oculus VR 개발_(컨트롤러로 ui 인터랙션 하기) 를 참고하였다 .

 

1. Project 에서  UIHelpers를 검색하여 Hirearchy로 드래그하여 가져온다 .
2. 내부를 보면 OVRInputModule이 있는데 JoyPadClickButton 어느 손이 클릭인지 선택이 가능하다 . Primary Index Trigger로 선택한다 .
3. 상호작용 하고자 하는 Canvas의 Graphic Raycaster를 OVR Raaycaster로 변경한다 .

=>이렇게 했을때 인식이 가능하긴했지만 , 단점은 클릭 포인트와 ray(컨트롤러에서 쏘는)의 위치가 맞지가 않았다 .

또한 왼쪽 , 오른쪽중 하나의 손으로만 포인터의 인식이 가능했다 . 필요한 ui 인식 방법이 아니었기에 다른 길을 

찾아야 했다 .

 

[ Ray Example 활용 ]

=>도큐먼트 : Ray Example에 원하던 형식의 ui 인터렉션 방식이 있었다 .

Ray Interactable을 물체에 넣은 것과 같이 동작하는 방식이었다 . 여기서는 메시를 활용하여 곡선 ui를 구현하는데 ,

평면 ui를 이 방식으로 구현해보겠다 .

 

=>빈 게임 오브젝트에 EventSystem 과 Pointable Canvas Module을 추가하고 , PointableCanvasModule로 명명한다 .

=>다시 빈게임 오브젝트에 RayInteractable / Pointable Canvas / Pointable Canvas Mesh를 추가하고

CanvasModule로 명명한다 .(인스펙터를 채우는건 모든 모듈을 추가하고 진행할것이다 .)

=>빈 게임 오브젝트를 만들고 MeshRenderer / Mesh Filter / MeshCollider / /OVR CanvasMeshRenderer /

Collider Surface / Canvas Rect를 추가하고 Mesh라 명명한다 .

=>인스펙터를 보이는 이름대로 채워준다 . (Canvas Render Texture에는 Canvas를 그 외에는 다 Mesh를 끌어다 놓는다)

=>Canvas를 만들고 (이때 만들어지는 EventSystem 은 삭제) Canvas Render Texture를 추가한다 .

인스펙터의 Canvas에 나 자신을 넣어준다 . 또한 Canvas는 WorldSpace로 설정을 변경한다 .

=>이떄 , RenderScale을 1에 두었다 가정했을때 , Resoution으로 ui의 해상도를 정한다 .

파악한 바로는 , 해상도가 높아질수록 외곽선이 지글거리는 듯한 현상이 있어 (ui에서 멀어질수록 심해짐)

각자의 상황에 맞는 적절한 해상도를 찾는게 중요해 보인다.

=>확인을 위해 하위에 버튼을 추가한다 .

=>Mesh에는 Mesh를 끌어다 놓는다 .

=>Ray Interactable의 Pointer Element에 Canvas Module 자신을 놓으면 아래의 창이 나온다 .

=>PointableCanvasMesh를 클릭하자.

=>Canvas에 Canvas를 끌어다 놓는다 .

=>Mesh에는 Mesh를 끌어다 놓는다 .

=> Forward Element에 자신을 드레그하면 아래의 창이 나올것이다 .

=>이번에는 PointableCanvas를 눌러준다 .

 

[ 빌드 ]

이상의 과정을 거치면 , ui 와 상호작용이 가능하다 .