03. 증강현실 명함 만들기

명함을 인식해서 날아다니는 드론을 증강하여 나타내주는 AR 앱 만들기

 

1. 준비하기

1.1 AR 타깃(증강 대상 물체) 

마커, 이미지, 객체, spatial map과 같은 타깃 기술들 중 어느 것을 사용할 것인지 결정해 야 한다. 적당한 이미지와 같은 실제 타깃을 선택하고 준비해야 합니다. 

명함이나 사업과 관련이 있는 어떤 이미지를 타깃으로 사용

                                 샘플명함다운로드

PurpleFinchCard.jpg

0.27MB

1.2 그래픽 Asset

실시간 장면을 증강하는 데 사용될 적당한 컴퓨터 그래픽 asset을 선택하고 준비해야 합니다. 

드론 3D 모델 사용

2. 프로젝트 설정하기

2.1 Vuforia 환경 설정하기

자세한 내용은 '02. Vuforia로 첫번째 AR 애플리케이션 구축의 3. Vuforia 환경 설정하기' 설명을 참조합니다.

 

① Unity를 열어 새로운 3D 프로젝트를 생성학고 프로젝트명은 BusinessCard라는 합니다. 
② Vuforia Engine SDK패키지를 Import합니다.  Unity 메인 메뉴에서 Window/Asset Store메뉴를 선택하여 에셋 스토어에

   접 속하여 Vuforia Engine을 찾아 다운로드하고, Import Unity Package 창이 나타나면 import 버튼을 클릭하여

   유니티내에 임포트합니다.
③ Vuforia 개발을 위한 라이센스를 생성한 프로젝트에 추가해야 합니다.

    Unity의 Project 창에서 Assets/Resources 폴더에 있는 VuforiaConguration 를 선택하고  inspector 창에서

    [Add Licence]버튼을 클릭하면 Vuforia engine developer potal 웹 페이지로 이동하여 License Manager

    웹 페이지에서 생성한 앱 이름 Vuforia를 클릭하면 Vuforia 라이센스 키가 나타납니다. 
④ 이 라이센스 키를 복사한 후 Unity로 돌아와서 VuforiaConfiguration의 Inspector 패널에서 App License Key의

   입력창에 복사한 라이센스 키를 붙여넣기 합니다. 

⑤ VuforiaConfiguration의 Inspector 패널에서 PlayMode Type속성이 Webcam으로 선택되어 있는지 확인합니다.

 

2.2 장면(Scene)에 AR Camera 추가하기

자세한 내용은 '02. Vuforia로 첫번째 AR 애플리케이션 구축의 3. 첫번째 AR 애플리케이션 만들기' 설명을 참조합니다.

 

① Hierarchy 패널에서, Main Camera를 삭제힙니다(선택한 후, Delete 키를 누르거나 우클릭 후 Delete를 선택). 
② GameObject/VuforiaEngine/AR Camera를 선택합니다.

③ Hierachy 패널에서 씬 하위에 AR Camera가 추가됩니다.

④ 메인 메뉴에서 File | Save As 를 선택하고 BusinessCard 이름을 입력한 후, Assets 폴더에 저장합니다.  

⑤ File | Save Project를 통해 프로젝트 또 한번 저장합니다.

 

3. 이미지 타깃 추가하기

3.1 ImageTarget 추가하기

① GameObject/VuforiaEngine/Image Target을 선택합니다.
② Hierachy 패널에서 Image Target을 선택하고 Inspector 패널을 본다. Image Target Behavior 컴포넌트 아래의

    Type을 From Database로 선택합니다.

③ Inspector의 Image Target Behavior 컴포넌트에서 Image Target 속성에서 Add Target 버튼을 클릭하여 

    Vuforia engine developer portal 웹 페이지로 이동합니다. 

④ Vuforia engine developer portal 웹 페이지에 Target Manager 항목이 선택되어 보입니다.

3.2 타깃 데이터베이스 생성하기

① 오른쪽 상단에 Add Database 버튼을 클릭하여 데이터베이스 이름을 BusinessCard로 입력하고 Type은 Device를 선택하고 Create 버튼을 클릭합니다. 

   - Device Type : 이미지를 앱과 함께 장치에 저장할 때 

② Target Manager 항목에서 BusinessCard에서 비어있는 타깃들의 목록을 확인할 수 있습니다.

    그리고 BusinessCard를 선택합니다.

③ 이미지 타깃을 추가하기 위해 Add Target을 클립합니다.

④ 나타나는 Add Target 창에서 Type은 Image를 선택하고, File은 Browse 버튼을 클릭해 업로드할

    이미지 파일을 선택합니다.  Width는 이미지의 실세계에서의 너비를 미터법으로 이미지 크기가 3.5인치인 경우

    0.09미터로 입력하고 Add버튼을 클릭합니다.

참고) Vuforia에서 요구하는 이미지는 .jpg나 .png 파일이어야 하며, 24비트(RGB)나 8비트(흑백)이어야 합니다.

.png 파일은 RGBA이고 알파 채널을 가지고 있으며 이런 파일 은 업로드하려고 하면 거부당할 것입니다.

.jpg 파일에는 알파 채널이 없으며, RGB 혹은 흑백이어야 합니다.

Vuforia에서 이미지 파일의 최대 크기는 2.25 MB이다.

⑤ Add 버튼을 클릭하면 타깃 이미지가 업로드된 것을 확인할 수 있습니다.

3.3. 데이터베이스 다운로드받기

① Target Manager 탭바에 데이터베이스이름 BusunessCard 선택하여 해당 웹페이지로 이동한 후  Download Database(All)버튼을 누릅니다. 

② Download Database창에서 Unity Editor를 선택하고 Download 버튼을 클릭하여 BusinessCard.unitypackage 파일을 다운로드 받습니다.

 

참고) 다운로드 파일의 저장 위치: 내PC/다운로드/BusinessCard.unitypackage

 

3.4 데이터베이스를 Unity로 Import하기

① 메인 메뉴에서 Assets | Import Package | Custom Package…선택하여  다운받은 BusinessCard.unitypackage 파일을 임포트합니다.

② 하이러키창에서 ImageTarget을 선택하고 인스펙터 창에서 Image Target Behaviour 컴포넌트의 Database 속성은 BusinessCard로, Image Target 속성은 PurpleFinchCard로 설정합니다. 

③ 하이러키 창에서 ImageTarget을 더블클릭하여 씬 창에서 이미지를 확인합니다. 

3.5 활성화하기
① Project 탭바에 Resources/VuforiaConfiguration 파일을 선택합니다. 
②  Inspector에서 Database 컴포넌트에 BusinessCard(또는 데이터베이스에 정한 이름)가 설정되어 있는 것을 확인할 수 있습니다

③ Inspector에서 Device Tracker 컴포넌트에  Track Device Pose의 체크박스를 선택합니다.

Track Device Pose를 선택하면 Extended tracking을 활성화하기 위해서 입니다. 즉, 사용자가 환경 내에서 움직이고 돌아다니더라도 tracking이 멈추지 않습니다. 

④ 하이러키 창에서 ImageTarget 선택하고 Inspector창에서 Static으로 설정합니다. Inspector의 오른쪽 위 에 있는 Static 체크박스에  체크합니다.

4. 객체 추가하기

① SimpleDrone.unitypackage 파일을 다운로드 받습니다.

                                   SimpleDrone.unitypackage 파일

SimpleDrone.unitypackage

0.20MB

② 메인 메뉴에서 Assets | Import Package | Custom Package를 선택하고 SimpleDrone.unitypackage 파일을 찾은 후

   Import를 선택합니다. 

이렇게 하면 다음의 스크린 샷처럼 여러분의 Assets /SimpleDrone 폴더 내에  Animation, Materials, Mesh, Prefabs와 같은 하위 폴더를 생성할 것입니다.

③ Prefab 폴더에서 SimpleDrone 프리팹을 선택하고 Hierarchy 창에 Image Target의 자식으로 추가합니다.

 

④ SimpleDrone을 선택하고, Scale를 조정합니다. 메인 툴바에서 Scale Tool을 선택한 후 마우스를 드래 그해서 모델의 크기를 줄입니다(또는 모델의 Scale을 (0.1, 0.1, 0.1)로 (Position Y = 0.06)로 설정해도 됩니다.)

 

5. 빌드하고 실행하기

①  메인 메뉴에서 File | Save As로 장면(Scene)을 저장하고 File | Save Project로 프로젝트를 반드시 저장합니다.
② 메인 메뉴에서 File | Build Settings를 선택하여 Build Settings 창의  Scenes In Build 항목에서  Add Open Scenes

   버튼을 클릭하여 현재 장면 BusinessCard가 유일한 장면으로 등록합니다.
③ Android를 선택하고 Switch Platform을 눌러서 Android가 타깃 플랫폼으로 변경합니다.  
④ Player Settings로 가서 (Build Settings 내의 Player Settings, 또는 메인 메뉴의 Edit | Project Settings | Player)

   오른쪽의 안드로이드를 위한 설정을 찾습니다.  
⑤ Other Settings 하위에 있는 Package Name은 유일한 식별자여야 하며, com.Company.ProductName의 형태로

    com.PurpleFinch.BusinessCard로 설정합니다. 
⑥ Minimum API Level로는 Android 8.0 'Oreo' (API Level 26 또는 Vuforia에서 현 재 가장 최소인 버전)을

   선택합니다. 
⑦ Project Setting 창을 닫고 Build Setting 창으로 돌아와서 안드로이드 폰을 컴퓨어와 연결한 후 Build And Run 버튼을

   클릭하여 실행결과를 확인합니다.

6. 드론 애니메이션하기

6.1 날개 회전 애니메이션 살펴보기

① Hierarchy에서 SimpleDrone을 선택하고 Inspector(또는 프로젝트의 Assets/SimpleDrone/Prefab 폴더에 있는 프리팹)

   를 보면 Animator Controller 컴포넌트의 이름이 RotorSpin인 것을 볼 수 있습니다.

② RotorSpin 컨트롤러를 더블클릭하면 Animator 창이 열립니다. 

③ RotorSpin 상태를 클릭하면, Inspector에서 Motion 파라미터가 어떤 애니메이션에 매핑 되어 있는지 확인할 수 있습

   니다. 

④ Motion 파라미터를 클릭하면, Project 창이 애니메이션이 위치한 곳으로 이동되고 RotorSpin 애니메이션이

    QuadDrone  자식인 것을 확인할 수 있습니다.

⑤ QuadDrone을 선택하면 Inspector의 Import Settings에서 Animation 탭에 다음과 같은 애니메이션 파라미터를 확인할 수 있습니다.

RotorSpin 애니메이션 클립 자체를 보고 싶다면:
① RotorSpin 애니메이션 파일을 선택합니다. 
② 그 후 Animation 창을 엽니다

 

6.2 Idle 애니메이션 추가하기
① Hierarchy에서 Empty Object(메인메뉴의 GameObject|Create Empty 선택)를 ImageTarget 하위에 생성하고 이름을

    FlyingDrone이라고 합니다.
② SimpleDrone을 FlyingDrone의 자식이 되도록 이동시킵니다. 

③ FlyingDrone을 선택한 후, Inspector 패널에서 Add Component버튼을 클릭하여 Animator를 추가합니다.

④ 메인 메뉴에서 Window | Animation 선택하여 Animation 탭을 엽니다.

⑤ Create 버튼을 클릭합니다. 
⑥ 파일 대화창이 열리면 SimpleDrone/Animation 폴더에 Idle이라고 저장합니다.

⑦ Animation 탭에서 Add Property를 클릭합니다.
⑧ 다음의 스크린 샷 처럼 Transform에서 Position을 선택합니다(Position +표시선택).

⑨ 마우스 스크롤을 사용해 Dropsheet 타임라인을 축소하고, Animation 창처럼 0초와 2초로 프레임을 설정합니다.

⑩ 애니메이션이 반복되지 않게 하기 위해 Project 탭의 Assets/SimpleDrone/Animation폴더에 있는 Idle 애니메이션을 선택하고, Inspector 패널에   Loop Time의 체크를 해제합니다.

6.3 비행 애니메이션 추가하기

① FlyingDrone을 선택한 후, Animation 창 왼쪽 상단에 현재 클립의 이름인 Idle를 선택한 후 Create New Clip…을 선택합니다.

② 애니메이션의 이름을 Fly로 합니다. 
③ Animation 창의 왼쪽 상단의 빨강 원을 눌러서 recording을 시작합니다.

④ 타임라인을 0 프레임에 위치시킵니다.
⑤ Hierarchy에서 FlyingDrone을 선택하고 Inspector에서 Position이 (0, 0, 0)인지 확인합니다.

 

[드론이 날아올라 1초 안에 원하는 높이에 도달하기]
① 빨강 타임라인을 1초 표시에다가 설정합니다.
② Scene view에서 이동하는 객체에 붙어 빨간색, 녹색, 파란색의 축을 보여주는 Move Tool 툴바를 선택합니다. 
③ Y 위치를 원하는 비행 높이로 이동시킵니다.

[드론이 작은 원을 그리며 비행하기]
① 장면(Scene) 창의 우측 상단의 기즈모의 Y-cone을 클릭합니다.  

② 타임라인을 축소해 추가로 5초 정도가 보이게 합니다.  
③ 빨강 타임라인을 2초로 설정하고 드론을 x축을 따라 이동시켜 왼쪽 가장자리의 중앙에 위치시킵니다. 
④ 빨강 타임라인을 4초로 설정하고 드론을 아래쪽 가장자리의 중앙으로 이동시킵니다.
⑤ 빨강 타임라인을 6초로 설정하고 드론을 오른쪽 가장자리의 중앙으로 이동시킵니다.
⑥ 빨강 타임라인을  8초로 설정하고 드론을 위쪽 가장자리의 중앙으로 이동시킵니다.  
⑦ 빨강 타임라인을 9초로 설정하고 드론을 명함의 중앙으로 이동시킵니다.  
⑧ 빨강 타임라인을 10초로 설정하고 Inspector에서 위치를 다시 (0, 0, 0)으로 설정합니다.

[애니메이션 확인해 보기]

① Recording을 멈추기 위해 빨간색 원인 Record 버튼을 다시 누릅니다.  
② Scene view를 조정해서 원근감을 갖게 하고 시야각을 변경합니다(예를 들어, Alt + 좌클릭). 
③ 그 후 preview에서 play 버튼을 눌러 애니메이션을 미리 살펴봅니다.

  (더 많은 키프레임을 추가해서 고칠 수도 있지만, Animation 창의 왼쪽 하단에 Curves view를 선택하고

  curve를 사용하여 부드럽게 변경할 수 있습니다.)
④ 애니메이션이 반복되지 않는 것을 확인하기 위해, Project 탭의 Assets 내에 Fly 애니메이션을 선택하고, Loop Time의

   체크가 해제되어 있는지 확인합니다.

 

6.4 Animator Controller에서 클립들 연결하기
① Hierarchy에서 FlyingDrone을 선택하고, Animator 컴포넌트 내의 FlyingDrone Animator Controller를 더블클릭합니다. Controller에는 이제 두 애니메이션(Idle, Fly) 상태가 나오며, 기본 진입 상태는 Idle임을 확인할 수 있습니다. 
② Idle 상태를 우클릭한 후, Make Transition을 선택하고 Fly 상태 위로 드래그합니다. Transition line을 클릭하면 transition을 미리 볼 수 있습니다. 
③ Fly 상태를 우클릭하고, Make Transition을 선택한 후, Idle 위로 다시 드래그합니다.

6.5 재생, 빌드, 실행하기
장면(Scene)을 저장하고 프로젝트를 저장합니다.  스마트폰  또는 Play를 누른 후 웹캠으로 명함을 비추어 봅니다.