안녕하세요. 이번 포스팅에서는 '뷰포리아'라는 AR(증강현실) SDK를 사용하여 AR을 구현해볼텐데요. 단순한 구현은 코드 없이도 가능 합니다!!
뷰포리아는 PTC라는 소프트웨어 회사에서 만든 SDK인데 '이미지 인식'에서는 매우 좋은 SDK라고 생각합니다.
사용하는 에디터는 유니티(Unity)를 사용할 예정입니다.
ㅁ 먼저 유니티를 설치해주셔야 합니다. -> 구글에서 '유니티 허브 다운로드'를 검색하신 후 다운로드 및 프로그램 실행을 해주세요!
그러면 이런 작은 창이 생성되는데 이 창의 우측 상단에 있는 '추가'버튼을 눌러주세요.최신 출시 버전(정식 릴리스) 중에서 아무거나 받아주세요~
ㅁ Unity 에디터 폴더의 경로에 한글이 들어가면 안됩니다!! 한글 경로가 있으면 경로를 변경하시거나 폴더의 이름을 변경해주세요.
유니티 버전을 설치하신 이후에 우측 상단에 위치한 톱니 바퀴를 누르시고 에디터 폴더를 설정해주세요.이제 유니티에서 프로젝트를 생성해봅시다!생성된 기본 프로젝트에요~ 제가 이것 저것 다운 받아놓아서 하단에 있는 폴더들이 조금 많이 있네요!(저처럼 폴더가 많지 않다고 문제 있는 건 아닙니당~)우측 하단에 원래는 'Download'인데 저는 이미 다운로드를 했기 때문에 'Import'로 되어있네요~ / 'Download'를 클릭 -> 'Import' 클릭!
임포트까지 진행하시면 프로젝트에 임포트하라는 작은 팝업창이 뜨는데 임포트 하시면 되구요~ 또, 업데이트 하라는 팝업창도 뜨는데 이것도 업데이트 하시면 됩니다!
이제 구현을 진행하는데 먼저 'Hierarchy'창에 있는 'Main Camera'를 지워줍니다. : 우리는 AR 카메라를 사용할 예정이에요~삭제 후 '+' 버튼을 눌러 AR Camera를 추가하세요~또, Image도 추가해주세요!추가한 Image Target을 보시면 'Image Target Behaviour에 Type이 있습니다.
ㅁ Image Target Behaviour의 Type - Form Database로 변경을 해주시면 '--- EMPTY---'로 나와있어요. 왜냐하면 아직 데이터 베이스를 넣지 않았기 때문입니다.
이제 데이터 베이스를 추가할 건데 데이터 베이스를 추가하기 전에 먼저 '키' 값을 가져오겠습니다.'키' 값은 데이터 베이스라는 집으로 들어가기 위한 열쇠에요! -> 'AR Camera'를 누르시면 'Vuforia Behaviour'가 있는데 'Open Vuforia Engine configuration'을 눌러요!이렇게 창이 변경되는데 'Add License'가 비어있죠? 라이센스 키가 비어있으니 가지러 갑시다~ -> 'Add License' 버튼을 누릅니다.
ㅁ 뷰포리아 사이트로 이동하면 우측 상단에 있는 Log In을 누르신 후 계정을 만드셔야 사용 가능합니다. 일단 가입했다는 가정하에 진행하겠습니다~(네이버나 구글 여러 이메일로 가입하시고 가입하신 이메일에 전송된 이메일 인증을 확인하셔야 사용가능합니다.)
외부 인터넷 창으로 이동하는데, 저는 사용 중이기 때문에 여러 키가 보이네요. 'Get Development Key' 버튼을 누릅니다.
저는 Vuforia Test 라는 이름의 라이센스 키를 생성하겠습니다. 'Confirm'을 눌러주세요.생성한 라이센스를 들어갑니다.생성된 라이센스를 들어가신 후에 생성된 키 값을 복사합니다. (클릭하면 복사돼요~)복사한 키 값은 저기에 추가하세요!
ㅁ 이제 키를 만들었으니 데이터 베이스를 만들텐데요. 좌측 상단에 위치한 'Target Manager' 탭을 들어갑니다.
오른쪽에 있는 Add Database를 눌러주세요.저는 Vuforia_Database라는 이름으로 만들게요.(띄어쓰기가 들어가면 안되는 듯 하여 _(언더바)를 추가하였습니다._편하신대로 적으시면 돼요. 하하하)생성된 이름을 클릭하여 들어갑시다~ 들어가면 상태에서 좌측에 있는 Add Target을 누릅니다.이미지로 테스트할 예정이기 때문에 Single Image - Browser를 클릭하여 가져올 이미지를 선택합니다
파일을 넣으실 때 뭐라구 빨간 글씨가 뜨면 대부분 파일 형식이나 파일이 너무 고퀄리티라서 그런거니 그런 경우 '그림판'을 키신 후 해당 이미지를 열고, '다른 이름으로 저장' - 저장하실 파일 이름 아래에 파일 형식을 'jpeg'로 설정하세요. 그러면 파일의 퀄리티를 떨어뜨릴 수 있습니다.
Width는 1로 설정! : 디테일을 따지자면 가져온 해상도를 계상해서 넣는게 더 좋겠죠~ 근데 1 넣어도 잘 돌아가요~이미지가 추가 됐습니다. 먼저 추가된 이미지의 체크박스를 체크한 후, 우측에 Download Database를 클릭해서 다운로드를 진행합니다.우리는 유니티에서 사용할 예정이니 유니티 - Download를 눌러줍니당좌측 하단에 유니티에서 사용할 수 있는 Unitypackage형식으로 파일이 받아졌죠! 이를 클릭하면 현재 열려있는 유니티 창으로 임포트 하기위해 이동해요~임포트 임포트~!!
임포트중이제 데이터 베이스가 Empty가 아닌 제가 설정한 데이터 베이스 이름인 Vuforia_Database가 생성됐습니다.('Test01'은 제가 테스트 할 때 추가한 것이랍니다~)
이제 키 값과 데이터 베이스도 갖고 왔으니 이제 구현하고 싶은 오브젝트를 고릅니다!
이미지 타겟을 누르신 후 마우스 오른쪽 - 3D Object - Cube를 선택해서 큐브를 생성해봅니다,이미지 타겟의 Default Trackable Event Handler에서 On Target Found()의 '+'를 눌러서 저렇게 빈칸을 만들어요~저 빈칸에 아까 만들었던 큐브의 이름을 잡아 끌고와서 넣습니다! (드래그~)
No Function을 눌러서 GameObject - SetActive를 클릭한 후 체크 박스를 누릅니다.
실제로는 코드인데 저렇게 설정하면 코드의 기능을 사용할 수 있어요~ 원래는 Cube.SetActive(true); 라는 뜻이고 이미지 마커를 발견했을 때 큐브를 On 상태로 바꾸겠다는 겁니다.
이제 휴대폰 빌드를 해야하기 때문에 유니티 에디터 좌측 상단의 Build Settings를 눌러서 빌드 창을 킵니다.먼저 Scenes In Build에 여러 Scene이 있을텐데 그건 모두 삭제해주시고요~(delete 키 누르시면 돼요~)                  그리고 우리는 안드로이드로 빌드할 예정이기 때문에 Android를 누르신 후 우측 하단의 Switch Platform을 누릅니다.이제 아까까지 작업했던 Scene을 올리기 위해 Add Open Scenes를 누릅니다.휴대폰을 연결하셨으면 이와 같이 뜨는데 우측 하단의 Build And Run을 눌러서 빌드를 진행합니다~빌드 중이에요~마커로 사용한 이미지입니다. 프린트를 안해와서 모니터에 켜두었어요~
이미지 인식을 한 후 생성된 큐브!
ㅁ 이렇게 이미지를 인식한 후 원하는 오브젝트를 생성시킬 수 있답니다. 마커는 경계선이 명확한 사진이 좋으며 빛이 반사되는 재질은 이미지 인식이 어려워요~ 흑백이 명확하고 엣지 있는 사진이 잘 된답니다~
추가적으로 생성시킨 책 모델입니다!
ㅁ 아직 일반인들에게 친숙하지 않은 경향이 있지만 AR은 참 재미있는 분야에요~ 현실에 대한 기술의 혼합이랄까! 국내외 대기업과 우리나라의 통신사, 관련 기술을 사용하는 여러 중소기업이 존재하고 있어서 점점 더 발전할 것이라 생각합니다~ 현재도 여러 SDK가 존재하고 많은 기능이 개발 및 진행되고 있답니다. 이 글을 보신 분들도 자신이 상상하는 여러 콘텐츠를 마음껏 구현해보셨으면 좋겠습니다.
추가적으로 궁금하신 사항이 있으시면 댓글을 남겨주세요~ 평일은 어렵지만 주말에는 확인해서 답글을 달겠습니다 ㅎㅎㅎㅎㅎㅎㅎ 다음 포스팅은 구현한 오브젝트에 간단한 애니메이션을 사용해서 움직이도록 할게요! (현재 사내 프로젝트가 조금.. 쪼오금 많이 바빠서 다음 내용은 3월 초나 3월 중순에 올리도록 하겠습니다!) 오늘 카페 노래가 참 좋네요 ㅋㅋㅋ 모두들 코로나 조심하시고 건강하세요!
ㅁ 빌드시 SDK, JDK, NDK 등의 오류가 나시는 분은 아래의 방법을 사용해주세요.
사용하시는 버전의 점,점,점을 누릅니다. 그리고 '모듈 추가'를 눌러주세요.안드로이드 빌드 서포트의 하위 모듈을 체크하셔야 SDk, NDK, JDK 설치가 완료됩니다.API 에러가 뜨시면 여기의 최소 API 레벨을 맞춰주세요.
![[유니티_뷰포리아(Vuforia)] 코드 없이 AR 구현하기!](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEfANp%2FbtqCjdjcMHP%2Fz9MWpJ5GVZLkuQYkRMQ1U0%2Fimg.png)
