본문 바로가기
개인자율탐구과제

[ Unity VR ] 04. 텔레포트 구현 ( Interaction Ray )

by 조종빈 2023. 5. 16.

안녕하세요. 이번 시간에는 텔레포트를 구현해보겠습니다.

VR을 하다보면 생각보다 많이 이용하게 되는 것이 텔레포트인데요, 몇몇 콘텐츠에서는 몰입을 위해 이 기능을 넣지 않기도 하지만 높은 곳을 올라갈 때와 같이 단순 걷는것으로 이동하기 힘든 상황에서 이용될 때가 많습니다.

오늘은 Teleport AreaTeleport Anchor을 이용한 텔레포트를 구현하는 방법에 대해 알아보고, 필요할 때 언제든 사용할 수 있도록 Interaction Ray ( 상호작용 광선 ) 의 모습도 텔레포트에 맞게 수정해보도록 하겠습니다.


우선 VR을 조금이라도 해보신 분들이라면, VR 컨트롤러와 버튼이 어떻게 상호작용하는지 바로 아실 텐데요, 

VR에서는 Ray 즉, 광선을 이용하여 인터페이스와 상호작용합니다. 

Interaction Ray / 출처 : Unreal Engine VR

보이시는 것과 같이 컨트롤러에서 광선이 뻗어나와 상호작용하고자 하는 물체를 자유롭게 다룰 수 있습니다.

이 광선을 기반으로 하여 거의 모든 인터페이스 및 오브젝트와의 상호작용이 진행된다고 보시면 됩니다.

그럼 바로 적용 시작해보겠습니다.


우선 가장 먼저 Ray Interactor를 추가해 주어야 하는데요, 하이라키의 XR Origin - Camera Offset을 우클릭하시고 

XR 탭에서 Ray Interactor ( Action - based ) 를 선택해 줍ㄹ니다.

저는 오른손에 텔레포트 기능을 할당할 것이므로 이름을 Right Teleportation Ray라고 지어주었습니다. 

Right Teleportation Ray

이 Ray Interactor 안에서는 각각의 상호작용에 따른 키 할당 및 광선의 스타일 지정을 해줄 수 있습니다.

이제 Ray Interactor 안에서 각각의 상호작용에 따른 키 할당을 해주어야 하는데요, Unity에서는 기본값으로 오른쪽, 왼쪽 컨트롤러의 액션 할당을 제공합니다.

Right Teleportation Ray ( 제 기준입니다 ) 를 탭하면 인스펙터 창에 XR Controller라는 창이 뜨는데요, 여기에 액션을 할당해줄 수 있습니다. 

물음표 옆에 조정 버튼을 누른 뒤 " XRI Default Right Controller "를 선택해주세요. 

자동으로 모든 해당하는 액션이 할당된 것을 보실 수 있습니다.

이제 게임을 실행시켜서 오른손에서 광선이 잘 나오는지 확인해보겠습니다.

 

Ray

오른손에서 광선이 잘 나오는 모습을 확인할 수 있으나, 아직은 어떠한 상호작용 기능도 넣지 않아서 아무런 반응이 없습니다.

이제 텔레포트 기능을 본격적으로 적용해보도록 하겠습니다.


1. Teleport Area

Teleport Area는 말 그대로 텔레포트 가능한 지역입니다. 그 지역 ( 바닥, plane ) 전체를 텔레포트 구간으로 지정할 수 있으며, 지정한 공간 위에서는 어디로든 텔레포트가 가능합니다. 

먼저 다른 움직임들과 동일하게, XR Origin에 Teleportation Provider 컴포넌트를 추가해주어야 합니다.

텔레포트 할때도 Locomotion System에 대해 참조가 필요하기 때문이죠.

따라서 XR Origin에 Add Component - Teleportation Provider 추가해줍니다.

또 System에 Locomotion System을 넣어줍니다.

텔레포트 공간을 만들기 위해 Plane을 하나 더 생성하고 Teleportation Area 컴포넌트를 넣어보겠습니다.

이렇게 바닥을 만들고 Teleportation Area 컴포넌트를 집어넣어 주었습니다. Coliders 탭에 위에 있는 Mesh Colider을 끌어다 놓아주고 실행시켜 보겠습니다.

 

Teleportation Area

보이시는 것처럼 Teleport Area에 Ray Interactor가 닿으면 어디든 텔레포트를 할 수 있습니다.


2. Teleport Anchor 

Teleport Anchor는 텔레포트가 가능한 오브젝트를 지정하는 것입니다. 특정 오브젝트에 Teleportation Anchor를 지정해놓으면 그 오브젝트에 광선이 닿을 때 텔레포트 할 수 있습니다. 

또 다른 Plane을 생성하고 오브젝트에 Teleportation Anchor를 지정해보도록 하겠습니다.

Teleport Area를 지정할 때와 동일하게 진행해주시면 됩니다.

그럼 이제 잘 작동하는지 확인해보겠습니다.

 

Teleportation Anchor

보이시는 것처럼 바닥에는 텔레포트 효과가 적용되지 않지만, 파란색 실린더 오브젝트에 앵커를 달아놓으면 그 오브젝트의 위치로 텔레포트 할 수 있게 됩니다.


이렇게 해서 두 가지 텔레포트 방식을 알아보고 적용해보았습니다. 

이렇게 직접 움직이니 무언가를 만들고 있다는 게 실감이 납니다.


( 선택 ) Ray의 형태를 바꾸어보자 

보통 Teleportation Ray의 형태는 저희가 방금 사용했던 직선 광선의 형태가 아닌, 포물선의 형태로써 착지할 곳을 표시해주는 형태의 광선처럼 생겼습니다.

Teleportation Ray / 출처 : A - frame

저희의 광선도 이러한 형태로 바꾸어주도록 하겠습니다.

먼저 하이라키 창에서 XR Origin - Camera Offset - Right Teleportation Ray( 자신이 생성한 광선 ) 탭에 들어가줍니다.

그 후 인스펙터 창의 XR Ray Interactor에서 Line Type를 Bezier curve ( 베지어 곡선 ) 으로 설정해줍니다.

베지어 곡선은 2개 이상의 변수로 정의되는 매개변수 곡선입니다. 

게임을 실행시키면 오른손을 자동으로 추적하며 Bezier curve로 정상적으로 변경된 것을 확인할 수 있습니다.

bezier curve

곡선을 원하는 모양으로 만들기 위해 다음과 같이 수치를 조정하겠습니다.

End Point Distance 5
End Point Height -7
Control Point Distance 3
Control Point Height -0.3

모양이 잘 변한 것을 확인할 수 있습니다. 

이제 도착 지점을 나타내주는 원 ( 실린더 ) 를 추가할 것입니다.

하이라키에서 실린더를 하나 생성해 Right Teleportation Ray의 자식 오브젝트로 넣어줍니다.

가장 먼저 실린더의 콜라이더를 제거해 주세요 ( 물리적 충돌이 일어나면 안됨 ) 그리고 나서 

실린더의 크기와 두께, 색을 알맞게 조절해주시고, 다 끝나셨다면 Right Teleportation Ray 안의 " XR Interactor Line Visual " 컴포넌트의 Reticle 변수 안에 오브젝트를 넣어주세요.

이제 잘 작동하는지 확인해보겠습니다.

보이시는 것처럼 Teleportation Area에 들어가거나 Anchor에 광선이 닿으면 도착지점을 미리 볼 수 있습니다. 

곡선의 각도와 색깔을 조금 더 조정하면 모두들 자신이 원하는 광선의 모양을 만들 수 있습니다.

이렇게 해서 오늘은 텔레포트에 대해 알아보고 적용해보는 시간을 가졌습니다.

감사합니다.