Project Tango로 가상 고양이를 현실로 데려오기
2016년 6월 20일 월요일
게시자: Jason Guo, 개발자 프로그램 엔지니어, Project Tango
Project Tango는 증강 현실(AR) 환경에 생명을 불어넣어 줍니다. Project Tango 앱을 사용하면 실용적인 것에서부터 기발하고 엉뚱한 것에 이르기까지 어떤 가상 물체라도, 새 거실용 가구에서부터 실물 크기의 공룡까지 실제 세계에 배치할 수 있습니다.
지난달에 이미 AR에서 빠르고 쉽게 간단한 태양계를 만드는 방법을 보여드렸었지요. 그렇지만, 더 고급스러운 수준의 기술을 받아들일 준비가 되신 분들을 위해, 아래의 튜토리얼에서 가상의 물체를 실제 세계의 물체와 연계하기 위해 Project Tango의 Depth API를 사용하는 방법을 설명해 드리겠습니다. 또한, 어떤 환경에서 평면인 표면을 찾기 위해 Tango Support Library 함수를 사용하는 방법도 보여드리겠습니다.
그런데 이 새 튜토리얼 프로젝트는 어떤 것이냐고요? 저희는 고양이들이 인터넷을 지배하고 있다고 판단했기 때문에, 가상 고양이를 AR에 배치하기로 했습니다! 개발자 환경은 단순하게 디자인했습니다. 즉, 사용자가 화면 위를 탭하면 앱이 실제 세계의 기하학적 조건을 바탕으로 가상 고양이를 만들어 냅니다. 그런 다음, Depth Camera 를 사용해서 사용자가 탭한 표면을 찾아내고, 고양이를 올바른 3D 위치에 등록(배치)합니다.
1단계: 새 Unity 프로젝트를 만들어 Tango SDK 패키지를 프로젝트로 가져옵니다.
2단계: 새 장면을 만듭니다. 새 장면을 만드는 방법을 모르시면 태양계 튜토리얼을 복습해 보세요. 태양계 프로젝트에서와 마찬가지로, 장면에서 Tango Manager와 Tango AR 카메라를 사용하고 기본 Main Camera gameobject를 제거합니다. 이 단계를 마치면 다음과 같이 장면 계층 구조가 구성됩니다.
3단계: 일단 빌드하고 실행하여 애플리케이션이 Tango의 카메라로부터 동영상 피드를 표시하는지 확인합니다.
4단계: Tango Manager gameobject에서 Depth 확인란을 선택합니다.
5단계: TangoPrefab 폴더에서 Tango Point Cloud prefab을 Scene으로 끌어다 놓습니다.
Tango Point Cloud에는 바닥 찾기, pointcloud를 Unity 글로벌 공간으로 변형하기, 디버그 포인트 렌더링하기 등의 유용한 함수들이 많이 포함되어 있습니다. 이 튜토리얼에서는 FindPlane 함수를 사용해서 터치 이벤트를 기반으로 평면을 찾을 것입니다.
6단계: 장면에 UI Controller gameobject를 만듭니다. Hierarchy 탭 아래서 "Create" 버튼을 클릭한 다음 "Create Empty"를 클릭합니다. 이 UI Controller가 (다음 단계에서 만들게 될) UIController.cs 스크립트를 실행하기 위한 호스트 gameobject가 됩니다.
7단계: Inspector 창에서 “UIController gameobject”를 클릭한 다음, "Add Component"를 클릭하여 KittyUIController.cs라는 이름의 C# 스크립트를 추가합니다. 이 KittyUIController.cs가 터치 이벤트를 처리하고, FindPlane 함수를 호출하고, 아기고양이를 장면에 배치합니다.
8단계: KittyUIController.cs 파일을 두 번 클릭하여 스크립트를 아래의 코드로 대체합니다.
10단계: 애플리케이션을 다시 컴파일하여 실행합니다. 화면을 탭하여 아기고양이들을 여기저기 배치할 수 있어야 합니다! 고양이와 AR의 마술이 결합하는 방법을 설명한 이 튜토리얼이 유익했기를 바랍니다. 이 블로그를 계속 주목해 주세요. 앞으로 더 많은 AR 업데이트와 튜토리얼을 소개할 예정입니다!
Project Tango는 증강 현실(AR) 환경에 생명을 불어넣어 줍니다. Project Tango 앱을 사용하면 실용적인 것에서부터 기발하고 엉뚱한 것에 이르기까지 어떤 가상 물체라도, 새 거실용 가구에서부터 실물 크기의 공룡까지 실제 세계에 배치할 수 있습니다.
지난달에 이미 AR에서 빠르고 쉽게 간단한 태양계를 만드는 방법을 보여드렸었지요. 그렇지만, 더 고급스러운 수준의 기술을 받아들일 준비가 되신 분들을 위해, 아래의 튜토리얼에서 가상의 물체를 실제 세계의 물체와 연계하기 위해 Project Tango의 Depth API를 사용하는 방법을 설명해 드리겠습니다. 또한, 어떤 환경에서 평면인 표면을 찾기 위해 Tango Support Library 함수를 사용하는 방법도 보여드리겠습니다.
그런데 이 새 튜토리얼 프로젝트는 어떤 것이냐고요? 저희는 고양이들이 인터넷을 지배하고 있다고 판단했기 때문에, 가상 고양이를 AR에 배치하기로 했습니다! 개발자 환경은 단순하게 디자인했습니다. 즉, 사용자가 화면 위를 탭하면 앱이 실제 세계의 기하학적 조건을 바탕으로 가상 고양이를 만들어 냅니다. 그런 다음, Depth Camera 를 사용해서 사용자가 탭한 표면을 찾아내고, 고양이를 올바른 3D 위치에 등록(배치)합니다.
고양이를 데려오세요!
시작하기 전에 먼저 Project Tango Unity SDK를 다운로드해야 합니다. 그러면 아래 단계에 따라 자신의 고양이를 만들 수 있습니다.1단계: 새 Unity 프로젝트를 만들어 Tango SDK 패키지를 프로젝트로 가져옵니다.
2단계: 새 장면을 만듭니다. 새 장면을 만드는 방법을 모르시면 태양계 튜토리얼을 복습해 보세요. 태양계 프로젝트에서와 마찬가지로, 장면에서 Tango Manager와 Tango AR 카메라를 사용하고 기본 Main Camera gameobject를 제거합니다. 이 단계를 마치면 다음과 같이 장면 계층 구조가 구성됩니다.
3단계: 일단 빌드하고 실행하여 애플리케이션이 Tango의 카메라로부터 동영상 피드를 표시하는지 확인합니다.
4단계: Tango Manager gameobject에서 Depth 확인란을 선택합니다.
5단계: TangoPrefab 폴더에서 Tango Point Cloud prefab을 Scene으로 끌어다 놓습니다.
Tango Point Cloud에는 바닥 찾기, pointcloud를 Unity 글로벌 공간으로 변형하기, 디버그 포인트 렌더링하기 등의 유용한 함수들이 많이 포함되어 있습니다. 이 튜토리얼에서는 FindPlane 함수를 사용해서 터치 이벤트를 기반으로 평면을 찾을 것입니다.
6단계: 장면에 UI Controller gameobject를 만듭니다. Hierarchy 탭 아래서 "Create" 버튼을 클릭한 다음 "Create Empty"를 클릭합니다. 이 UI Controller가 (다음 단계에서 만들게 될) UIController.cs 스크립트를 실행하기 위한 호스트 gameobject가 됩니다.
7단계: Inspector 창에서 “UIController gameobject”를 클릭한 다음, "Add Component"를 클릭하여 KittyUIController.cs라는 이름의 C# 스크립트를 추가합니다. 이 KittyUIController.cs가 터치 이벤트를 처리하고, FindPlane 함수를 호출하고, 아기고양이를 장면에 배치합니다.
8단계: KittyUIController.cs 파일을 두 번 클릭하여 스크립트를 아래의 코드로 대체합니다.
using UnityEngine;
using System.Collections;
public class KittyUIController : MonoBehaviour
{
public GameObject m_kitten;
private TangoPointCloud m_pointCloud;
void Start()
{
m_pointCloud = FindObjectOfType();
}
void Update ()
{
if (Input.touchCount == 1)
{
// Trigger place kitten function when single touch ended.
Touch t = Input.GetTouch(0);
if (t.phase == TouchPhase.Ended)
{
PlaceKitten(t.position);
}
}
}
void PlaceKitten(Vector2 touchPosition)
{
// Find the plane.
Camera cam = Camera.main;
Vector3 planeCenter;
Plane plane;
if (!m_pointCloud.FindPlane(cam, touchPosition, out planeCenter, out plane))
{
Debug.Log("cannot find plane.");
return;
}
// Place kitten on the surface, and make it always face the camera.
if (Vector3.Angle(plane.normal, Vector3.up) < 30.0f)
{
Vector3 up = plane.normal;
Vector3 right = Vector3.Cross(plane.normal, cam.transform.forward).normalized;
Vector3 forward = Vector3.Cross(right, plane.normal).normalized;
Instantiate(m_kitten, planeCenter, Quaternion.LookRotation(forward, up));
}
else
{
Debug.Log("surface is too steep for kitten to stand on.");
}
}
}
코드 보충 설명
다음은 위의 코드에 대한 몇 가지 참고 사항입니다.-
m_kitten은 Kitten gameobject에 대한 참조입니다(다음 단계에서 모델을 추가할 것임). -
m_pointCloud는 Tango Point Cloud gameobject의TangoPointCloud스크립트에 대한 참조입니다.FindPlane메서드를 호출하기 위해 이 참조가 필요합니다. -
Start()함수에서 m_pointcloud 참조를 할당합니다. - 한 번의 터치가 끝났을 때
Update()함수에서 터치 횟수와 그 상태를 확인합니다. - 고양이를 3D 공간에 배치하기 위해
PlaceKitten(Vector2 touchPosition)함수를 불러옵니다. 이 함수는 메인 카메라(이 경우에는 AR 카메라)의 위치를 쿼리한 다음, 카메라의 위치와 터치 위치에 근거하여FindPlane함수를 호출합니다.FindPlane은 터치 지점에서 추정 평면을 반환한 다음, 그 평면이 너무 가파르지 않다면 고양이를 평면에 배치합니다. 참고로,FindPlane함수는 Tango Support Library에서 제공됩니다. TangoSDK/TangoSupport/Scripts/TangoSupport.cs에서 모든 기능들을 확인할 수 있습니다.
KittyUIController의 Kitten으로 끌어다 놓을 수 있는 Kitty prefab이 있을 것입니다.10단계: 애플리케이션을 다시 컴파일하여 실행합니다. 화면을 탭하여 아기고양이들을 여기저기 배치할 수 있어야 합니다! 고양이와 AR의 마술이 결합하는 방법을 설명한 이 튜토리얼이 유익했기를 바랍니다. 이 블로그를 계속 주목해 주세요. 앞으로 더 많은 AR 업데이트와 튜토리얼을 소개할 예정입니다!