Unity VR앱과 안드로이드 앱을 integration하는 앱을 만들어 봅니다. 또 안드로이드의 BLE 장치 제어를 Unity에서 하는 내용을 다룹니다.
https://cdn-images-1.medium.com/max/1600/1*UKw493IUbk3nkyErUtxkPg.png
출처: https://medium.com/@narendrapal39/android-add-support-library-for-unity-205b45ca243d
이전글 - [[Unity VR과 Android BLE] #5 Reticle 표시 및 응시 처리](https://steemit.com/kr/@etainclub/unity-vr-android-ble-5-reticle)
---
이번에는 VR의 꽃 360도 비디오를 플레이하는 걸 구현해보겠습니다. 이것도 거의 코딩 없이 드래그 앤 드랍으로 됩니다.
## Button2
Button1에서 했던 작업을 Button2에도 해줍니다. 먼저 VRButton.cs 스크립트 파일을 열어서 아래 내용을 추가합니다. 아무런 기능은 없고 단순히 클릭했을 때 로그를 남기는 코드입니다.
```
생략
// when the button2 is clicked
public void OnClickButton2()
{
Debug.Log("onClickButton2");
}
```
그다음 Button1때와 마찬가지로 Button2에 VRButton.cs 스크립트를 추가하고 Normal Color, Highlight Color 필드를 Button1과 같은 색깔로 설정합니다. Image 필드는 Hierarchy 뷰의 Button2 밑에 있는 Image를 드래그 앤 드랍합니다.
Button2에 OVR Gaze Event Trigger를 추가하고, On Enter 이벤트에 VRButton.cs의 OnGazeEnter함수를, On Exit 이벤트에 OnGazeExit함수를 연결합니다. 그런 다음 Add New Event Type을 클릭하여 Event Trigger를 추가한 후, Pointer Click 이벤트를 추가합니다. 그런 다음 VRButton의 OnClickButton2함수와 연결시켜 줍니다.
이렇게 하면 아래와 같은 화면이 됩니다. 보다 상세한 방법은 이전글의 Button1을 참고하세요.
## 360도 비디오 재생
Unity에서 360도 비디오를 재생하는 방법은 2가지 있습니다. 하나는 Sphere 모델을 생성하고 그 안쪽 면에 동영상을 재상해고 카메를 Sphere 중앙에 위치시키는 방법입니다. Unity 2018 버전에서는 이보다 더 간단한 방법을 사용할 수 있습니다. 그 방법은 Skybox의 Panoramic Shader를 이용하는 것입니다. 여기서는 두 번째 방법으로 해보겠습니다.
먼저 용어 몇가지를 짚고 넘어 가겠습니다.
- Texture: 3D 모델의 표면에 입힐 이미지를 말합니다. 마치 마네킹이란 3D 모델에 다양한 옷을 입히는 것처럼요.
- Material: 3D 모델의 표면에 이미지를 입힐 때 그냥 입힐 수가 없고, 반드시 Material이란 것이 필요합니다. Material은 Texture를 어떤 방식으로 입힐지, 재질은 어떻게 할지 등의 속성을 설정합니다.
- Shader: Material에 적용한 Texture를 렌더링할 때 표면의 재질감을 표현하는 방식을 결정합니다.
아래 그림처럼 Shader, Texture, Material가 종합적으로 사용되어 모델의 이미지가 입혀집니다.
https://docs.unity3d.com/uploads/Main/material_diagram.png
Skybox의 Panoramic Shader를 이용하여 360도 비디오를 재생하기 위해서는 3단계가 필요합니다. Unity의 Video Player에서 영상을 재생하고 이것을 Render Texture로 바꾼 후 Skybox Material에 연결합니다. 여기서 Render Texture 컴포넌트는 주로 카메라가 투사하는 영상을 실시간으로 Texture로 변경해 특정 Mesh에 표시할 때 사용합니다.
보다 자세한 내용은 아래 사이트를 참고하세요.
https://docs.unity3d.com/Manual/VideoPanoramic.html
그럼 재생할 동영상을 다운로드 한 후 각각의 컴포넌트를 만들어 보겠습니다.
## 360도 동영상 다운로드
적당한 360도 동영상 다운로드를 합니다. 구글에서 검색하면 됩니다.
https://www.mettle.com/360vr-master-series-free-360-downloads-page/
저는 이 동영상을 사용하겠습니다. 다운로드할 때 동영상 해상도를 선택할 수 있는데, 저는 UHD 4K를 선택했습니다. 테스트 용도니깐 가벼우면서 적당히 화질이 좋은 걸로 선택했습니다.
Project 뷰에 Assets 밑에 Video란 폴더를 만들고 다운로드한 파일을 드래그 앤 드랍합니다.
Unity에서 Video 파일을 선택하고 오른쪽 하단에 영상을 재생하는 창이 있는데, 재생해 보세요. 간혹 재생이 안되는 동영상이 있을 수 있습니다. 그런 동영상은 사용할 수가 없습니다.
## Render Texture 생성
Texture는 3D 모델에 입힐 이미지라고 했습니다. 먼저 아래와 같이 Project 뷰의 Assets 밑에 Images라는 폴더 밑에 Textures라는 폴더를 만들고, Render Texture를 생성합니다.
> 설정: Textures 폴더에서 오른쪽 클릭 -> Create -> Render Texture
> Render Texture의 Inspector 뷰에서 동영상 Width, Height 설정
> Depth Buffer를 No Depth Buffer 선택
> Render Texture의 이름을 Texture_4096_2048로 변경
## Material 생성
다음으로 Texture를 어떻게 입힐지 속성을 나타내는 Material을 만듭니다. 아래와 같이 Project 뷰 Assets -> Images -> Materials 폴더 생성합니다.
> 설정: Materials 폴더에서 오른쪽 클릭 -> Create -> Material
> 이름을 Material_4096_2048로 변경
> Inspector 뷰 상단의 Shader를 Skybox -> Panoramic 선택
> Inspector 뷰의 Spherical (HDR)에 Texture_4096_2048을 드래그 앤 드랍
## Video Player 생성
Hierachy 뷰에서 Button2를 선택하고 Inspector 뷰에서 Video Player를 추가합니다.
> 설정: Inspector 뷰 Add Component -> Video Player 추가
> Video Clip 필드에 다운로드한 비디오 파일을 드래그 앤 드랍
> Play on Awake 필드 uncheck
> Target Texture 필드에 Texture_4096_2048 파일 드래그 앤 드랍
지금까지의 작업 과정을 보면 360도 동영상을 재생하기 위해서 위에서 설명했듯이, Video Player에서 360도 비디오를 재생하기 위해서 Texture로 변형하고, 이 Texture를 다시 Material에 연결시켰습니다. Shader는 Unity에서 제공하는 Skybox Panoramic을 사용했구요. 이제 동영상 재생을 위한 모든 준비가 거의 끝났습니다.
Material 파일을 Scene 뷰에 적용합니다. 간단히 Material_4096_2048을 Scene 뷰로 드래그 앤 드랍합니다. 이렇게 하면 아래 그림과 같이 LIghting 세팅의 Environment가 적용한 Material로 설정됩니다. Scene 뷰의 색깔이 까맣게 변합니다.
> 설정: Windows -> Rendering -> Lighting Settings
> [주의] Scene 뷰에 생성한 Material을 적용하지 않으면, 즉 Lighting Settings의 Environment에 Material이 적용 되어 있지 않으면 동영상 재생이 안됩니다. 그리고 Texture의 사이즈는 반드시 실제 동영상의 사이즈와 일치해야만 합니다.
## VRButton 스크립트 업데이트
여기까지 드래그 앤 드랍으로 360도 동영상 재생하는 부분을 만들어 봤습니다. 이제 마지막 피스로 VRButton 스크립트를 아래와 같이 수정합니다.
```
생략
using UnityEngine.Video;
// video plaer
public VideoPlayer VideoPlayer;
// Use this for initialization
void Start () {
VideoPlayer = GetComponent<VideoPlayer>();
}
생략
// when the button2 is clicked
public void OnClickButton2()
{
Debug.Log("onClickButton2");
VideoPlayer.Play();
}
}
```
## 동영상 재생
Play를 해봅니다. 그런 후 Reticle을 조정하여 Button2를 클릭해봅니다. 마우스로 Scene 뷰를 선택한 후 Spacebar를 누릅니다.
동영상이 재생이 됩니다! 그런데 뭔가 좀 이상해 보입니다. 하지만 실제 안드로이드 폰에서 재생하면 잘됩니다. 안드로이드 폰으로 빌드를 한 번 해보겠습니다.
> 설정: File -> Build and Run
이 작업이 꽤 시간이 걸립니다. 그래서 최대한 폰에서 확인하기 보다는 Game 뷰에서 확인하는 것이 좋습니다. VR 앱이 아니라면 다음과 같은 앱을 깔면 Unity에서 Play하면 바로 폰에 결과가 표시됩니다.
링크: https://play.google.com/store/apps/details?id=com.unity3d.genericremote&hl=en
앱을 설치한 후에 아래와 같이 Unity에서 Remote 기능을 설정하면 됩니다.
> 설정: Edit -> Project Settings -> Editor -> Device 필드에서 Any Android Device 선택
## Button1 이미지 문제
어랏,, 언제 그랬는지 Button1의 이미지가 표시되지 않고 있습니다.
그런데 왜 표시가 안되는지 모르겠습니다. Unity 초보인 제가 자주 경험했던 것중 하나입니다. 뭔가 바꾸지 않은 거 같은데 이미지가 표시안되는 일이 벌어졌습니다. 왜 그런지 모른채요.
찾아냈습니다! 왜 그런지 모르겠지만, Button2의 위치가 틀어져 있었습니다. 즉 Button2가 표시되는 지점이 중심이 아니라 약간 위쪽에 자리 잡혀 있고, 마진 설정이 되어 있었습니다. 그래서 Button2의 위치를 표시되는 부분과 일치시키고, 마진을 없애니깐 그제서야 Button1의 이미지가 나타났습니다. 그런데 작게 표시되어서 봤더니 마진 설정이 틀어져 있었습니다. 아래와 같이 다시 복구하니 짜잔하고 나타나네요~
왜 이런 문제가 발생하는지 모르겠습니다. 드래그 앤 드랍의 단점인 거 같습니다. 코드라면 코드 분석을 하면 될텐데 말이죠.
---
`오늘의 실습: 자신이 보고 싶은 360도 동영상을 폰에 넣고 VR로 감상해 보세요.`