Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Augmented Reality
Gamedevelopment

증강현실 응용 프로그램 작성을 위한 Unity의 Vuforia 소개

by
Difficulty:BeginnerLength:MediumLanguages:

Korean (한국어) translation by h1ghqlty. (you can also view the original English article)

What You'll Be Creating

이 튜토리얼에서는 Unity에서 Vuforia SDK를 사용하여 기본 증강 현실 애플리케이션을 구현하는 방법에 대해 설명합니다. 튜토리얼 전체에서 Vuforia와 호환되는 장면을 생성하는 방법과 광선 추적을 포함한 다양한 스크립트를 구현하여 장면 내의 객체와 상호 작용할 수있는 방법을 배우게 됩니다.

개발자 계정 만들기

시작하기 전에 Vuforia 개발자 계정에 등록해야 합니다. Vuforia 개발자 포털로 이동하여 계정을 만드십시오.

계정을 만든 후에는 Vuforia의 Unity 패키지를 다운로드해야 합니다. 다운로드 페이지로 이동하여 Unity의 특정 패키지를 다운로드 하십시오.

이미지 대상 만들기

장치의 카메라가 참조를 인식하고 추적하기 위해서는 이미지 대상이 필요합니다. 대상 이미지의 방향 및 실제 크기는 중첩된 이미지의 동일한 속성에 직접 영향을 줍니다.

모든 이미지를 대상으로 지정할 수 있습니다. 그러나 대상 이미지의 기능은 대상이 얼마나 잘 추적되는지를 효과적으로 결정합니다. 이 자습서에서는 온라인 도구를 사용하여 풍부한 기능의 대상 이미지를 생성합니다. 증강 현실 표식 생성기 온라인 도구를 사용하여 이미지 대상을 생성하고 컴퓨터에 이미지를 저장합니다.

단일성 장면 준비하기

Vuforia 패키지

새 3D 통합 프로젝트를 만든 다음 Vuforia 용으로 다운로드 한 Unity 패키지를 두 번 클릭합니다. 그러면 다음 창이 열립니다. 패키지의 모든 컨텐츠를 선택하려면 모두를 클릭하고 가져오기를 클릭하십시오. 이것은 AR 응용 프로그램에 필요한 모든 도구를 가져옵니다.

Importing Vuforia Package

이미지 타겟

다음 단계는 이미지 대상 파일을 가져 오는 것입니다. 이미지 대상 파일을 얻으려면 Vuforia 개발자 페이지를 사용해야 합니다.

Vuforia 개발자 포털로 이동하여 계정에 로그인하십시오. 개발 탭에서 타켓 관리자를 볼 수 있습니다. 먼저 데이터베이스를 추가해야합니다. 지정된 버튼을 사용하여 데이터베이스를 추가하십시오.

데이터베이스의 이름을 원하는대로 지정하고 유형으로 Device를 선택하십시오.

Creating Database for targets

이제 이 데이터베이스에 대상을 추가할 준비가 되었습니다. Add Target 버튼을 클릭하면 다음 창이 나타납니다. 우리의 경우 유형을 단일 이미지로 선택해야 합니다. 온라인 도구를 사용하여 생성된 이미지 타겟을 선택하십시오. 파일을 업로드하는데 문제가 있으면 .jpg 파일 형식으로 변환하고 다시 업로드 해보십시오.

너비는 중요한 매개 변수입니다. 이것은 최종적으로 종이에 인쇄할 목표 이미지의 실제 크기와 일치해야 합니다. 너비를 40으로 설정했습니다. 장면의 단위와 일치하므로 단위가 없습니다.

Adding target image

대상을 데이터베이스에 추가하면 Vuforia가 대상을 평가합니다. 우리가 사용한 대상 이미지 생성기를 사용하면 기능이 높기 때문에 5개의 별을 얻습니다. 즉, Vuforia가 이 대상을 쉽게 인식하고 추적할 수 있습니다.

이제 이 데이터베이스를 다운로드해야합니다. 이렇게 하려면 데이터베이스 다운로드 버튼을 누르고 Unity 에디터를 개발 플랫폼으로 선택하십시오.

Downloading database

데이터베이스를 다운로드 했으면 더블 클릭하여 모든 컨텐츠를 우리가 작업중인 Unity 장면으로 가져옵니다.

ARCamera 오브젝트

우리는 Vuforia의 ARCamera 객체를 장면에 추가하는 것으로 시작합니다. 이렇게하려면 Assets > Vuforia > Prefabs 디렉토리를 따르고 장면으로 드래그 앤 드롭하여 ARCamera 객체를 추가하면 됩니다.

ARCamera directory

ARCamera 객체를 선택하고 Inspector 탭 아래에 App License Key 섹션이 표시됩니다. 이 라이센스 키는 Vuforia 개발자 포털에서 가져옵니다.

개발자 포털의 Vuforia 계정에 로그인하고 개발 탭에서 라이센스 관리자 섹션을 찾으십시오. 라이센스 키 추가 버튼을 클릭하십시오. 다음 페이지에서 프로젝트 유형으로 개발을 선택하고 프로젝트의 응용 프로그램 이름을 정의하십시오. 이 이름은 중요하지 않으며 나중에 원할 경우 변경할 수 있습니다.

Generating the License Key

다음을 클릭하고 다음 페이지에서 라이센스 키를 확인하십시오.

방금 작성한 라이센스를 선택하십시오. ARCamera 객체에 복사하여 붙여 넣기해야 하는 라이센스 키가 나타납니다. 이 라이센스를 복사한 다음 ARCamera 설정의 App License Key 섹션에 붙여 넣으십시오.

Revealing License Key
Copy and Paste License Key

데이터베이스 로드 동작에서 ARDEo 데이터베이스 로드 옵션을 선택하십시오. 확인한 후에 활성화라는 다른 옵션이 바로 아래에 나타납니다. 이 옵션을 선택하십시오.

ARdemo 데이터베이스 로드 옵션의 ARdemo 부분은 데이터베이스를 명명한 방법에 따라 다릅니다.

Loading Database

이미지 타겟 오브젝트

장면에서 두 번째로 필요한 것은 이미지 타겟 객체입니다.

Assets > Vuforia > Prefabs 디렉토리 아래에 "ImageTarget" 개체도 있습니다. 이 개체를 장면에 추가하고 옵션을 표시하려면 이 개체를 선택하십시오.

Image Target Behavior 섹션에서 Database 옵션을 볼 수 있습니다. 드롭다운 메뉴에서 데이터베이스를 선택하고 "Image Target" 옵션의 드롭다운 메뉴에서 이미지 대상 객체에 지정할 특정 이미지 대상을 선택하십시오. 하나의 데이터베이스에 대해 여러 이미지 대상이있는 경우 여기에 모두 표시됩니다.

폭 및 높이 매개 변수는 Vuforia의 개발자 포털에서 이미지 대상을 만들 때 할당한 값에 따라 자동으로 설정됩니다.

Image target behaviour settings

그래픽 향상

다음 단계는 그래픽을 만들어 이미지 타겟에 연결하는 것입니다. GameObject를 만들거나 자신의 3D 모델을 Unity에 가져와서 사용할 수 있습니다. 이 튜토리얼에서는 간단한 3D 큐브 오브젝트를 사용하려고 합니다.

다음 그림과 같이 큐브 개체를 장면에 추가합니다.

Adding a cube object

Scale 옵션의 x, y 및 z 매개 변수를 Transform에서 40으로 설정하여 생성한 이미지 타겟의 크기와 일치시킵니다.

개발자 포털에서 이미지 타겟을 생성할 때 이미지 타겟에 다른 너비 값을 설정하면 이미지 타겟의 전체 크기와 일치시키기 위해 선택한 값을 사용하십시오.

Scaling the cube

AR 응용 프로그램을 작동시키는 마지막 단계는 큐브 개체를 이미지 대상의 자식으로 설정하는 것입니다. 이렇게하려면 큐브 개체를 드래그하여 계층 구조 메뉴 아래의 imageTarget 개체에 놓기만 하면됩니다.

장면의 최종 상태는 다음과 같아야합니다.

Final state of the scene

이제 응용 프로그램을 실행하려면 재생 버튼을 누르십시오. 웹캠이 사용됩니다. Vuforia가 웹캠을 통해 이를 감지할 수 있도록 대상 이미지를 인쇄하거나 휴대 전화에서 열어보십시오. 나는 후자를 선택했고 내 휴대폰에서 대상 이미지를 열었습니다.

다음은 웹캠보기의 실제 스크린 샷입니다. 큐브 오브젝트가 3D 오브젝트와 대상 이미지 모두의 스케일링 인수 값과 일치 했으므로 큐브 오브젝트가 전체 대상 이미지를 포함한다는 것을 알 수 있습니다.

Initial test of augmentation

상호 작용 스크립트

지금까지 우리는 목표 이미지를 인식하고 추적하고 지정된 3D 그래픽을 표시하는 기본 AR 응용 프로그램을 개발했습니다. 그러나 완벽한 AR 애플리케이션의 경우 객체와 상호 작용하여 현실을 보강할 수 있어야 합니다.

이를 위해서는 모바일 장치의 경우 클릭한 위치 또는 터치한 위치를 감지 할 수 있어야 합니다. 레이 트레이서를 구현하여 이를 수행 할 것입니다.

먼저 Assets 아래에 "scripts"라는 폴더를 만들어 모든 것을 정리 하도록 합니다. 스크립트 파일을 이 폴더에 저장합니다. 그런 다음 이 폴더에 C# 스크립트 파일을 만듭니다. 이름을 "rayTracer"로 지정하십시오. 이름 지정은 다음 코드가 이 특정 파일 이름과 일치해야 하기 때문에 중요합니다. 스크립트 파일에 다른 이름을 사용하려면 제공된 코드도 적절하게 변경해야 합니다.

Creating a script file

레이 트레이서 스크립트

복사하여 "rayTracer"라는 이름의 C# Script 파일에 다음 코드를 붙여 넣습니다.

이 스크립트는 터치 스크린이 있는 모바일 장치에 응용 프로그램을 배포한 경우 유니티 편집기에서 작업하고 입력을 터치하는 경우 두 마우스 클릭을 모두 감지합니다.

rayTracer 스크립트를 만들었으면 장면의 객체 중 하나에 객체를 할당하여 활성화해야 합니다. Inspector 탭 아래의 Add Component 버튼을 사용하여 ARCamera 객체를 선택하고 rayTracer 스크립트를 컴포넌트로 추가했습니다.

Assigning rayTracer script

오브젝트 메테리얼

이제 큐브 오브젝트에 메테리얼을 지정하고 큐브와 상호 작용할 때 메테리얼의 색상을 변경하려고합니다.

Assets에서 메테리얼를 작성하고 원하는대로 이름을 지정하십시오.

Creating material

큐브 개체 위에 드래그 앤 드롭하여이 메테리얼을 지정하십시오.

상호 작용 스크립트

스크립트 폴더 아래에 새 C# 스크립트를 만들고 "nteraction"이라고 이름을 지정합니다.

다음 C# 코드를 "interaction"스크립트 파일에 복사한 다음이 스크립트 파일을 "rayTracer"스크립트 파일에서 했던 것처럼 큐브 개체에 구성 요소로 추가하십시오. 그러나 이번에는 큐브 개체의 구성 요소여야 합니다. 이는 큐브 개체와만 상호 작용할 수 있도록 하기 위해 중요합니다.

이 "interaction"스크립트에서 우리는 큐브 오브젝트의 메테리얼을 "mat"라고 부릅니다.

defaultColorselectedColor라는 두 개의 다른 재질의 객체를 만들었습니다. defaultColor는 RGBA 매개 변수가 나타내는대로 (255, 255, 255, 255) 흰색으로 선택됩니다.

다음 행에 의해 큐브 오브젝트의 메테리얼 색을 defaultColor로 초기화합니다.

mat.color = defaultColor;

우리는 네 가지 다른 주에 대해 네 가지 다른 기능을 가지고 있습니다 :

  • touchBegan()은 객체를 터치한 순간 호출됩니다.
  • touchEnded()는 손가락을 뗄 때 호출됩니다.
  • touchStay()는 객체를 터치한 직후에 호출됩니다.이 함수는 touchBegan()을 따릅니다. 따라서 이러한 함수에서 재질에 다른 색상을 지정하면 touchStay() 함수에서 지정된 색상이 보이지 않습니다. 이는 터치가 인식되는 바로 첫 순간이기 때문입니다.
  • 위에 설명 된대로 touchEnded() 함수를 호출하는 손가락을 떼는 대신 손가락을 큐브 객체의 표면 밖으로 드래그하면 touchExit()가 호출됩니다.

우리 코드에서 큐브 객체를 만지면 selectedColor 객체가 큐브 객체의 메테리얼이고 색상인 mat.color에 할당됩니다.

touchStay() 함수 내에서 selectedColor를 지정하면 큐브 객체에 손가락을 올려 놓으면 큐브 객체의 색상이 selectedColor와 동일하게 유지됩니다. 손가락을 떼거나 큐브 객체 밖으로 드래그하면 우리가 취한 조치에 따라 touchEnded() 또는 touchExit() 함수를 호출하여 재질의 색상 매개 변수에 defaultColor를 할당합니다.

이제 프로젝트를 실행하고 대상 이미지가 인식되고 큐브 개체가 나타나면 큐브 개체를 클릭하십시오. 클릭을 해제하거나 큐브 개체의 표면 밖으로 이동할 때 다시 빨간색과 흰색으로 바뀌어야합니다.

Final result

네 가지 다른 작업에 대해 서로 다른 색상을 실험해 철저히 이해할 수 있습니다.

결론

이 튜토리얼에서는 Unity 용 Vuforia SDK와 개발자 포털을 소개하고 대상 이미지와 적절한 라이센스 키를 생성하는 방법을 살펴 보았습니다.

그 위에 우리는 확장된 그래픽과 상호 작용할 수 있도록 사용자 정의 스크립트 파일을 생성했습니다. 이 튜토리얼은 Unity와 함께 Vuforia를 사용하고 자신 만의 AR 어플리케이션을 생성할 수 있게 해주는 소개일 뿐입니다.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.