[Unity3D/VR] Oculus Integration 패키지를 이용하여 3D Object 및 UI와 상호작용하기

---

이전 포스트에 프로젝트 'Paint the City'에 관련한 설명이 있으니 참고바랍니다.

2022.11.25 - [Paint the City] - [Unity 3D/VR] Tilt Brush, Open brush 오픈 소스를 이용하여 3D 페인팅 기능 구현하기

---

안녕하세요. 저번 포스트에 3D 페인팅 기능에 사용할 오픈 소스를 이용하는 과정을 보여드렸는데요.

저희 프로젝트의 VR 프로그램에서 3D 페인팅 기능이 주된 기능이지만, 그 외에도 구현해야 할 부분들이 많았습니다.

그 중에서 가장 기본적으로 VR 환경에서 UI 또는 3D 오브젝트와 상호작용하는 법을 설명해드리려고 합니다.

이 기능을 위해 에셋 스토어에 있는 Oculus Integration 패키지를 이용하였습니다.

간단한 배경 설정과 오브젝트를 배치하는 것부터 Interaction하는 방법까지 자세히 설명드리고, 프로젝트에서 어떻게 쓰였는지도 보여드리겠습니다.

 

Unity VR 환경 세팅에 관한 내용은 따로 작성하지 않았으니, 세팅되어있지 않다면 세팅 후 시작해주세요.

---

Oculus Integration 패키지 설치

에셋스토어에서 Oculus Integration 에셋을 추가합니다.

https://assetstore.unity.com/packages/tools/integration/oculus-integration-82022

Oculus Integration | 기능 통합 | Unity Asset Store

 

'내 에셋에 추가하기'를 누르면 자신의 유니티 계정에 에셋이 추가됩니다. 로그인을 안 하셨다면 로그인해주세요.

 

다음으로, 이 패키지를 사용할 프로젝트를 미리 열어두셨다면, ‘Unity에서 열기’를 클릭하여 프로젝트에서 열 수 있습니다.

 

또는 유니티 에디터 내에서 [Window - Package Manager - Packages: My Asset]에서도 import 할 수 있습니다.

 

import 완료 후, [Asset - Oculus] 에서 에셋들을 확인할 수 있습니다.

UI Interaction

배경 설정 및 오브젝트 배치

UI Interaction을 위해 Main Menu Scene을 만들어 봅시다.

새로운 Scene을 생성하고 이름을 'MainMenu'로 설정한 후, 씬을 열어주세요.

 

기존의 배경은 이런 모습인데, Menu 씬에는 적합하지 않은 것 같으니 바꾸겠습니다.

[Window - Rendering - Lighting - Environment] 에서 Skybox를 바꿀 수 있습니다.

 

적절한 Material을 찾아 적용했습니다. Oculus 패키지에 있던 Skybox인데, 원하는 것을 골라 적용해주세요.

 

하이어라키 창에서 오른쪽 마우스를 눌러 [3D Object - Plane]을 선택해 바닥을 만들어 줍니다.

오브젝트 이름은 'Floor'로 설정하겠습니다.

 

오브젝트에 적절한 Material을 설정할 수 있습니다.

 

Scene에 'OVRPlayerController' Prefab을 추가합니다.

OVRPlayerController는 Oculus 헤드셋을 tracking하고, 플레이어 역할을 합니다.

 

플레이어가 바닥 위에 있을 수 있도록 OVRPlayerController와 Floor의 y값을 조정해야 합니다.

 

UI Canvas 설정

OVRPlayerController의 z값을 조정하여 생성할 UI와 적당한 거리를 유지하도록 합니다.

 

Menu와의 상호작용을 위한 Canvas가 필요합니다.

하이어라키 창에서 오른쪽 마우스를 눌러 [UI - Canvas]을 선택해 Canvas를 추가하고, 이름은 'Menu Canvas'로 설정하겠습니다.

 

이후부터는 VR환경에서 UI와 상호작용하기 위해 꼭 변경해야 하는 Canvas 설정들입니다.

[Canvas - Render Mode]를 World Space로 변경합니다.

 

Canvas의 Width와 Height를 생성할 메뉴 UI 크기에 맞게 조정합니다.

Position과 Scale을 조정하여 Player의 사이즈와 맞도록 합니다.

 

Graphic Raycaster 컴포넌트를 삭제하고, 'OVR Raycaster'을 추가합니다.

 

[Canvas - Event Camera]에 OVRPlayerController의 'CenterEyeAnchor'을 추가합니다.

 

이제 Scene에 'UIHelpers'를 추가합니다.

UIHelpers는 Oculus 패키지에서 제공하는 Prefab으로, UI Interaction에 필요한 기능을 담고 있습니다.

 

UIHelpers에 EventSystem이 있기 때문에, 기존의 EventSystem을 삭제합니다.

 

LaserPointer는 플레이어가 UI를 가리킬 때 표시되는 광선의 역할을 합니다.

LineRenderer을 활성화하고, Material을 추가합니다.

그리고 [Menu Canvas - OVR Raycaster - Pointer]에 LaserPointer를 추가해주세요.

 

또다른 설정을 위해 'LaserPointer' Script를 수정합니다.

LaserBeamBehavior 위에 SerializeField를 추가하여, 유니티 내에서도 이 설정을 변경할 수 있도록 합니다.

    [SerializeField]
    private LaserBeamBehavior _laserBeamBehavior;

 

스크립트 수정이 완료되면, 이렇게 Laser Beam Behavior를 설정할 수 있습니다.

'On When Hit Target'으로 설정하겠습니다.

기존 설정이었던 'On'은 광선이 항상 켜져있는 상태입니다.

On When Hit Target의 경우, 컨트롤러가 타겟을 바라보고 있을 때 광선이 활성화됨을 의미합니다. 

 

'EventSystem'에서 [OVR Input Module - Joy Pad Click Button]을 원하는 버튼으로 선택해주세요.

저는 'Secondary Index Trigger'로 설정하였고, 오른쪽 컨트롤러의 트리거 버튼을 의미합니다.

 

오큘러스 입력과 관련된 정보는 아래를 참고해주세요.

https://developer.oculus.com/documentation/unity/unity-ovrinput/

Map Controllers | Oculus Developers

 

Sphere의 크기를 조정합니다.

이 Sphere는 광선의 끝에 있는 점과 같은 역할을 합니다.

컨트롤러 설정

'LeftHandAnchor'과 'RightHandAnchor'에 'CustomHandLeft'와 'CustomHandRight'를 추가해주세요.

CustomHandLeft와 CustomHandRight는 Oculus 패키지에서 제공하는 손 모델 Prefab입니다.

실행 시 실제 손의 움직임이 반영된 모습을 볼 수 있습니다.

 

CustomHandLeft와CustomHandRight의 [OVR Grabber - Player]에 OVRPlayerController을 추가해주세요.

 

OVRCameraRig의 [OVR Manager - Tracking Origin Target]을 'Floor Level'로 설정해주세요.

 

OVRPlayerContoller의 OVRPlayerController 스크립트에서 Enable Linear Movement와 Enable Rotation의 체크를 풀어줍니다.

Main Menu 씬에서는 플레이어가 움직이지 못하도록 해야 하기 때문입니다.

 

Main Menu 생성

이제 인터랙션할 메뉴를 만들 건데요. 사용하고 있는 UI 디자인이 있다면 그걸로 사용하시면 됩니다.

Menu Canvas에 [우클릭 - UI - Image]를 선택하여 UI를 추가합니다.

메뉴의 배경이 될 이미지부터 만들기 위해, 이름을 'Background'로 설정해주세요.

Width와 Height를 조정하고, [Image - Source Image]에 사용할 이미지를 넣어주세요.

 

[Menu Canvas 우클릭 - UI - Button]을 선택하여 메뉴에서 사용될 Button을 추가해봅시다.

TMP Essentials를 import하지 않았다면, 이런 창이 뜰텐데요.

TextMeshPro를 사용하려면 import 해야합니다.

위의 Background처럼 Button의 이름을 'Start Btn'으로 설정하고, Width, Height, Source Image를 설정해주세요.

 

Text Input에는 'START'라고 입력합니다. Font Size도 조정해주세요.

저는 아래와 같이 설정했고, Scene 창에서는 이런 모습입니다.

 

각각의 버튼은 'START'와 'ABOUT'로 구성됩니다.

Start Btn을 복제해서 About Btn을 만들어주세요.

 

이제 로고를 추가합니다.

앞에서처럼 [UI - Image]를 선택하고 이름을 'Logo'로 설정합니다.

크기와 이미지를 설정합니다.

 

이제 버튼 동작을 위해 스크립트를 Menu Canvas에 생성합니다.

스크립트 이름은 'MenuController'로 설정하겠습니다.

 

Start 버튼을 누르면 Main 씬으로 이동하는 함수를 아래와 같이 작성합니다.

씬 전환을 위해 using UnityEngine.SceneManager;를 추가해주세요.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class MenuController : MonoBehaviour
{
    public void StartBtn()
    {
        SceneManager.LoadScene("MainScene");
    }
}

 

이제 다시 Start 버튼으로 돌아가서, On Click()에서 +를 눌러 항목을 추가한 다음, Menu Canvas 오브젝트를 추가하고, [MenuController - StartBtn()]을 선택합니다.

이렇게 하면 Start 버튼을 눌렀을 때, 위에서 작성한 StartBtn() 함수가 실행되게 됩니다.

 

이제 About 버튼의 기능을 추가해야 합니다.

Section을 나누기 위해 Menu Canvas 아래에 빈 오브젝트를 생성하여 이름을 'Main Section'과 'About Section'으로 설정합니다.  ([Menu Canvas 우클릭 - Create Empty])

앞에서 만들었던 로고와 버튼들을 Main Section 아래로 넣고, 비활성화 상태로 둡니다.

About Section에 Text를 추가하여 이름을 'About Paragraph'로 설정합니다.

Text에는 'This is about paragraph.'를 작성합니다.

Width, Height, Position, Font Size를 조절하고, 텍스트 정렬을 가운데로 맞춥니다.

이제 돌아가기 버튼을 만들어야 합니다.

Main Section의 Start Btn을 복사하여 About Section에 추가하고, 이름을 'Back Btn'으로 수정합니다.

Text에 'BACK'을 작성합니다.

 

On Click()에는 'About Section'을 넣고, [GameObject - SetActive(bool)] 로 설정합니다.

이렇게 하면, 돌아가기 버튼을 눌렀을 때 About Section이 비활성화 됩니다.

이제 Main Section을 활성화 해줘야 겠죠?

On Click()에 +버튼을 눌러 추가한 뒤, 'Main Section'을 넣고, [GameObject - SetActive(bool)]로 설정합니다.

체크 버튼을 눌러 활성화를 표시합니다.

 

Main Section에서 About 버튼의 함수도 설정해주어야합니다.

About Section을 비활성화 상태로 두고, Main Section을 다시 활성화합니다.

위에서와 반대로 [About Btn - On Click()]을 설정합니다.

ABOUT을 눌렀을 때 Main Section이 비활성화되고, About Section이 활성화되도록 합니다.

 

3D Object Interaction

배경 설정 및 오브젝트 배치

새로운 Scene을 생성하고 이름을 'MainScene'로 설정한 후, 씬을 열어주세요.

Build Settings에 지금까지 만든 Scene들을 추가해주어야 씬 전환이 가능합니다.

 

앞에서처럼 MainScene에 Floor, OVRPlayerController, UIHelpers를 배치합니다.

MainManu 씬에서 그대로 복사해와도 됩니다.

그리고 인터랙션을 할 3D Object를 배치합니다.

Cube, Sphere, Capsule을 추가하겠습니다.

새로운 Material을 만들어 각각 Blue, Green, Red로 설정한 후 위에서 만든 Object에 적용합니다.

 

컨트롤러 설정

Main Menu Scene과 다르게 플레이어가 움직일 수 있도록 설정해야 합니다.

OVRPlayerContoller의 OVRPlayerController 스크립트에서 Enable Linear Movement와 Enable Rotation의 체크를 확인해주세요.

 

3D Object와 상호작용할 수 있도록[OVRPlayerController - OVRCameraRig]에 'OVRPhysicsRaycaster' 스크립트를 추가합니다.

[Layer - Add Layer]를 통해 'UICollider' 레이어를 추가하고, [OVR Physics Raycaster - Event Mask]를 UICollider로 지정합니다.

Event Trigger 설정

앞에서 만들었던 세 오브젝트와 Interaction을 할 때 발생하는 이벤트는 다음과 같습니다.

Cube: 색상 변화(Blue → Green)
Sphere: Y축 드래그
Capsule: Y, Z축 드래그

세 3D 오브젝트에 Event Trigger 컴포넌트를 추가합니다.

Cube의 Event는 간단합니다.

'Add New Event Type'을 클릭해 'PointerClick'을 선택합니다.

Cube 오브젝트를 넣고, [MeshRenderer - Material material]을 클릭합니다.
그리고 앞에서 만들었던 Green을 넣습니다.

이렇게 설정하면 Pointer로 Trigger할 때 지정한 색상으로 변경되게 됩니다.

 

이제 드래그 기능을 만들기 위해 'DragUI'라는 스크립트를 생성합니다.

using UnityEngine;

public class DragUI : MonoBehaviour
{
    public Transform pointer;

    [Header("Select To Include In Drag")]
    public bool x;
    public bool y;
    public bool z;

    public void Drag()
    {
        float newX = x ? pointer.position.x : transform.position.x;
        float newY = y ? pointer.position.y : transform.position.y;
        float newZ = z ? pointer.position.z : transform.position.z;
        transform.position = new Vector3(newX, newY, newZ);
    }
}

Drag() 함수는 게임 오브젝트의 position의 x, y, z 값을 새로운 x, y, z값으로 변환합니다.즉, 드래그한 방향으로 오브젝트를 이동하게 합니다.

 

해당 스크립트를 Sphere과 Capsule에 넣어줍니다.

Pointer에는 UIHelpers의 Sphere을 추가합니다. (씬에 배치한 초록색 Sphere과 착각하지 않도록 합니다.)

Select To Include In Drag는, Sphere의 경우 Y를, Capsule의 경우 Y와 Z를 체크합니다.

이제 [Event Trigger - Add New Event Type - Drag]를 클릭합니다.

각각의 오브젝트를 넣고, [DragUI - Drag()]를 선택합니다.

세 오브젝트의 Layer를 UICollider로 지정합니다.

결과

 

실행 오류와 관련한 내용도 아래에 작성해두겠습니다.

1. 카메라가 움직이지 않는 경우, Scene에서 Main Camera 오브젝트를 삭제했는지 확인해주세요.

2. Oculus와 연결이 되지 않는 경우, VR 환경 세팅을 완료했는지 확인해주세요.

Android로 Switch Platform

XR Plug-in Management 설정

Player Setting - Other Settings - Identification - Minimum API Level

---

프로젝트 적용

앞서 설명한 기능들이 프로젝트에서 어떻게 적용되었는지 보여드리겠습니다.

City

City List: 프로그램 시작 시 방문할 도시를 선택합니다.

City: 도시에서 작품을 생성할 위치를 선택합니다.

Exhibit

앞에서 생성한 작품을 전시합니다.

(*각각 트리거 시 발생하는 이벤트 기능은 VR 백엔드 담당 팀원이 구현하였습니다.)

 

 

---

이후 계획

1. 입력을 위한 VR 가상 키보드를 만들려고 합니다.

2. 그동안 기능 구현에 초점을 두어 간단하게만 만들었던 UI의 디자인을 변경해볼까 합니다.

 

이제 졸업 발표까지 얼마 남지 않았네요.

저희 프로젝트 Paint the City에 많은 관심 부탁드립니다. :D

---

참고

이번 포스트의 유니티 프로젝트를 깃허브에 업로드해두었습니다. 참고한 동영상 링크도 같이 첨부합니다.

https://github.com/0eun2/VR-interaction-with-Oculus-Integration

GitHub - 0eun2/VR-interaction-with-Oculus-Integration: Oculus Integration Package | 3D Object 및 UI 상호작용 구현

https://www.youtube.com/@RealaryVR/videos

RealaryVR