WebXR 콘텐츠 만들기 (with Unity 2019)

1. 개요

유니티를 이용하여 WebXR 콘텐츠를 만들어 본다. WebXR 콘텐츠를 웹서버를 이용하여 https로 서비스하고 Oculus Quest2를 통하여 VR모드에서 확인하여 보자. 

 

2. Sample Scene Project Build 하기

 

아래 링크에서 프로젝트를 다운로드를 하고 Unity 2019를 이용하여 프로젝트를 open 한다.

다운로드 & Project Open with Unity 2019.4.37f1(LTS) [참고] Unity 2021은 아직 VR모드를 지원하지 않는다.

https://github.com/MozillaReality/unity-webxr-export

샘플 예제를 open 한다. WebXR/Samples/Desert/WebXR

아래와 같이 WebGL Build Support를 위한 필요한 파일을 설치한다. 클릭하고 현재 열려있는 유니티 프로젝트를 닫고 설치한다.

3. Project Settings 설정 확인하기

Player> XR Setting > Virtual Reality Supported (check)

Player > Other Settings > Configuration > Active Input Handling > Both로 체크

Player > Resolution and Presentation> WebXR Template 체크

Build를 한다.  정상동작을 하는지 https 웹서버를 통하여  접근하도록 하고 Oculus 브라우저에서  테스트 하여보자.

 

 

4.   New Scene 만들기

자신의 새로운 Scene을 만들고 Scene01로 저장한다. 기본 설정된 카메라를 비활성화(또는 삭제)를 하고 WebXRCameraSet prefab을 설치한다. 

바닥 평면을 만들고 구(Sphere)와 박스(box)를 만들어 배치하여 보자. 각각에 Rigidbody 컴포넌트를 붙여주고  Interactable 태그를 붙여준다. 태그는 물체를 grip할 때 체크하기 위함이다. 

 

WebXRCameraSet>HandR의 설정을 확인해 보자. DesertControllerInteraction 스크립트 컴포넌트로 붙여준다.  

유니티에서 빌드를 하고 웹서버(https)에 빌드한  폴더를 업로드 한다. http는 동작하지 않는다. https로 하여야 한다. 

Oculus quest2의 Oculus Browser로 웹서버에 접속하고  VR모드에서  감상해보자.

컨트롤러를 이용하여 Hand의 움직임을 확인하여 본다. 

 

Oculus Controller의 Analog Stick을 이용하여 카메라를 이동 제어하여 보자.

위에서 사용한 WebXRCameraSet prefab은 Trigger버튼과 Grip버튼만 사용할 수 있다. Unity Input의 Horizontal/Vertical을 사용을 하여 보자. Assets>WebXR>Config>XRRightControllerMap.asset 파일을 텍스트 편집기로 열어서

다음과 같이 추가한다.  왼손은 XRLeftControllerMap.asset 파일이다.

샘플 예제의 DesertControllerInteraction 코드를 다음과 같이 추가한다.

public class DesertControllerInteraction : MonoBehaviour
{
    private GameObject mycamera;
    void Awake()
    {
        ... 기존 코드 ...
        mycamera = GameObject.Find("WebXRCameraSet");
    }
    void Update()
    {
        ... 기존 코드 ...
        if (controller)
        {
            Vector3 pos = mycamera.transform.position;
            float x = controller.GetAxis("Horizontal");
            float z = controller.GetAxis("Vertical");
            pos.x = pos.x + x;
            pos.z = pos.z + z;
            mycamera.transform.position = pos;
        }
    }
}