Unity, Vuforia 설치 + AR 구현 w/ 티모시 샬라메

Paint the City

VRain 팀이 제안하는 도시재생 모델로

1. 도시 재생이 필요한 지역을 3d모델의 형태로 구현하여 사용자들에게 제공을 하여 해당 사용자들이 vr로 도시에 그림을 그리고 원하는 에셋을 삽입한다.

2. 다른 사용자들의 작품을 보며 피드백을 하고 지자체와 사용자를 연결하여 모델을 구체화한다.

3. 기존에는 유니티 에셋 스토어에서 도시 배경을 구입해서 사용하려고 계획했으나, 실제 도시를 배경으로 작품을 전시하는 것이 목적이었기 때문에 (서울 지역으로 범위를 제한하여) 직접 도시 모델링을 진행하고 도시의 범위를 넓혀 다른 나라 등의 도시 모델링에도 이 방법을 적용한다.

이에 필요한 해당 지역 3D모델 제공, 작품 생성, VR과 AR을 통한 작품 적용 및 관람에서 본인은 AR 개발 파트를 맡았다. 보다 구체적으로는 오큘러스 기기를 이용한 VR과 AR 작품 전시 본인과 타인의 작품을 시뮬레이션하고 즉각적인 피드백 및 수정이 가능하다. 오큘러스 퀘스트로 작품 생성 후 전시된 작품을 바로 확인할 수 있을 뿐만 아니라, 3D 페인팅 프로그램과 연동한 AR 어플리케이션을 통해 해당 장소에 직접 방문하여 작품을 확인할 수 있다. 작품을 생성한 해당 위치의 이미지를 타겟으로 설정하여 그 위치에서 카메라를 인식하면 작품이 보이도록 구현한다. 부가 기능으로 해당 도시 직접 방문 시에 제공되는 미션과 보상도 지급하고자 한다. ‘포켓몬 고’ 게임과 같이 해당 위치에 사용자가 도달하면 작품 QR코드가 발급되고 이를 통해 AR시뮬레이션을 돌릴 수 있다. 이때 본인 작품과 더불어 지역 소개 및 주변 맛집과 핫플레이스 등 홍보도 같이 제공되며 시뮬레이션 미션을 완수 시 랜덤하게 지역 화폐 등 리워드가 지급된다.

Unity 와 Vuforia 를 이용해 구현할 AR 기술

1. 마커 기반 추적

AR 또는 MR에서 마커는 애플리케이션에 등록된 이미지 또는 오브젝트로, 애플리케이션에서 정보 트리거 역할을 한다. AR 또는 MR 애플리케이션 실행 중에 기기의 카메라에 이런 마커가 실세계에서 인식되면 카메라 뷰에 가상 콘텐츠가 마커의 월드 위치에 위에 표시된다. 마커 기반 추적에는 QR 코드, 물리적 반사 마커, 이미지 타겟, 2D 태그 등 다양한 마커 타입이 사용될 수 있다. 게임 애플리케이션에서 가장 간단하고 가장 일반적인 마커 타입은 이미지 타겟이다.

-이미지 타겟

애플리케이션에서 수동으로 등록해야 하고, 가상 콘텐츠를 표시하는 트리거 역할을 하는 이미지다. 이미지 타겟으로는 윤곽선이 복잡하면서 독특한 모양이 포함된 이미지를 사용해야 한다. 이러한 이미지를 사용하면 이미지 인식 및 추적 알고리즘이 이미지를 더 쉽게 인식할 수 있다.

2. 무마커 추적

무마커 추적을 사용하는 애플리케이션은 위치 기반 또는 포지션 기반 증강 현실 또는 혼합 현실인 경우가 많다. 이 형태의 추적에서는 GPS, 가속 센서, 자이로스코프 등과 같은 기술과 더 복잡한 이미지 프로세싱 알고리즘에 의존하여 가상 오브젝트나 정보를 환경에 배치한다. 그후 VR 하드웨어와 소프트웨어는 이런 오브젝트를 특정 실세계 위치 또는 오브젝트에 고정되거나 연결된 것처럼 처리한다.

프로그램 설치 및 실행 과정

1.Unity 및 Unity Hub 프로그램 설치

1 https://unity3d.com/kr/get-unity/download 에서 Unity 선택 및 다운로드

Download Unity!

Unity is the ultimate game development platform. Use Unity to build high-quality 3D and 2D games, deploy them across mobile, desktop, VR/AR, consoles or the Web, and connect with loyal and enthusiastic players and customers.

unity3d.com

2 Indiviual > Personal > Get started >Download for Windows > 다운로드 > Unity_v2017.x.ulf 설치 파일 실행 ( 전부 동의 후 마침)

3 전 페이지로 돌아가 https://unity3d.com/kr/get-unity/download 에서 Unity Hub 다운로드

4 다운로드 > UnityHubSetup.exe 설치 파일 실행 (전부 동의 후 마침)

2. Unity 무료 라이센스 받기

1 UnityHub > 좌측 상단 원형 프로필 > 라이선스 관리

2 추가 클릭 (현재 라이선스를 받은 상태라 활성화 되어 있지만 라이선스가 만료 된 후나 처음 받는 사용자는 비어있다.)

3 무료 Personal 라이선스 받기 > 동의하고 Personal 라이선스 받기

3. Unity 엔진 설치

1 UnityHub > 설치 >에디터 설치

2 본인의 사용 목적에 맞는 버전을 찾아 설치 (가장 최신 버전인 2022.1.23f1 버전 설치 완료)

-엔진은 하나만 사용하기 (다운로드 시간도 오래 걸리고 다른 버전의 엔진으로 바꾸려면 프로젝트를 일일이 변경해줘야 함. 오류 발생, 최신 버전은 튕김 현상 있을 수 있으므로 초보자들에게 권하지 않음)

4. Vuforia 설치

1 https://developer.vuforia.com/downloads/sdk 에서 SDK > Add Vuforia Engine to a Unity Project or upgrade to the latest version

2 https://developer.vuforia.com/downloads/samples 에서 Samples > Download from Unity Asset Store

3 https://developer.vuforia.com/user/register 에서 Developer로 등록

4 https://developer.vuforia.com/targetmanager/licenseManager/licenseListing 에서 Develop > License Manager >Get Basic > License Name* arproject1 입력 > Vuforia Developer Agreement 체크 > Confirm 을 통해 License Key를 획득

(해당 라이센스 키는 뒤에 Unity 실행 후 적용)

5. Unity + Vuforia 실행

1 Unity > 프로젝트 > 새프로젝트

2 모든 템플릿 > 3D > 프로젝트 이름: arproject1 으로 입력 >프로젝트 생성

3 (Ar camera가 필요하므로) main camera > delete

4 (Hierarchy 밑의) + > Vuforia Engine > AR Camera

5 Play 버튼 > 노트북 카메라 활성화

6 (좌측 상단의 )AR Camera > (우측 메뉴바의) Inspector >Open Vuforia Engine configuration

7 Camera Device 에서 본인이 원하는 카메라로 연결 (현재 LG gram 노트북으로 작업 중이므로 LG Camera로 연결함)

8 브라우저를 열어 vuforia에 로그인 > license manager 에서 해당하는 프로젝트 이름(arproject1)을 넣어 라이선스를 획득 (4. 4와 연결) > Vuforia Developer Agreement 체크 > Confirm

9 arporject1 > 회색 칸 안에 있는 라이선스 키를 전체 copy

10 Unity > Inspector > App License Key에 paste

6. Unity + 마커 기반 AR 실행

1 Vuforia 페이지로 돌아가 Target Manage > Add Database

2 Database Name* 에 arproject1을 기입> Type : Device > Create

3 arproject1 > (AR의 target 이 될 사진을 설정하기 위해) Add Target

4 AR을 생성하는 조건이 되는 Target 사진으로 티모시 샬라메 이미지를 ar 티모시로 저장

(이때 이미지 파일은 png 또는 jpg 형식이어야 하며 2MB를 초과해서는 안된다.)

-Paint the city 에서는 현장에서 제공하는 QR코드와 벽화의 사진이 Target Image가 된다. 이를 인식하면 본인의 작품이 AR로 나오고 미션 및 보상도 제공된다. (12에서 이어서)

5 Browser 탐색 > ar 티모시.jpg > 넓이 (Width), 이름 (Name) 설정 > Add

넓이는 5, 이름은 ar1으로 설정했다.

6 ar1 체크 > Download Datavase(1) > Unity_Editor > Download

7 브라우저 다운로드 내역 > arproject1.unitypackage > 파일 열기 > unity에서 Import Unity Pacakge 창 생성 > All > Import

Unity 의 하단 Project-Assets-Resources에서 해당 아이콘이 생성됨

8 (우측 상단) + > Vuforia Engine >Image Target

9 (Image Target 이 생성됨) Inspector > Type > From Database

10 (Type을 From Image에서 From Database로 변경하는 순간 2개의 옵션이 추가됨) Database >arproject1, Image Target > ar1

아까 설정한 티모시 샬라메 사진이 나온다.

좌측 메뉴판에서 Scale을 통해 Target 크기 조정, Transform Tool을 통해 Target 회전

ARCamera를 클릭하여 Move Tool에 따른 변화된 시점으로 target을 관찰

11 (우측 상단) + > 3D Object > Cube

12 (4과정과 유사) Assets-Cube 겉면에 입힐 이미지를 저장 후 가져오기 > 큐브에 drag

13 Cube를 Image Target의 하위로 드래그

결과

play 모드로 전환 후 노트북 카메라에 Target Image인 티모시 사진을 비추었더니 AR Cube가 생성

7. Unity + 무마커 GPS 기반 AR 실행

(현재 사이트 업데이트중으로 오류 발생, 보완 예정)

1 Unity > 새 프로젝트 > Arproject1 > 3D> 프로젝트 이름 : arproject2 >프로젝트 생성

2 <5.4~10>과 동일하게 Vuforia Engine의 라이선스를 등록 (이때 앞의 단계와 달리 Name을 arproject2로 설정)

Edit > Project Settings > (새로운 창의 왼쪽 메뉴바) Player

이때 구버전에서는 Other Settings 밑에 XR Settings > Vuforia Augmented Reality Supported 로 실행을 했으나 현재의 버전에서는 찾을 수 없다.

Unity > Community 에서 동일 문제를 겪는 사람들이 다수 있었고 Vuforia Engine Package for Unity 를 통해 자동으로 구현된다는 답변을 받았다.

Editor script를 통해 Vuforia Engine Package를 Unity에 추가하는 방법은 다음과 같다.

Assets > (우클릭) Import Package > Custom Package

4.1 과정에서 https://developer.vuforia.com/downloads/sdk를 통해 다운 받은 add-vuforia-package-10-11-3 > 열기

Import Unity Package 팝업 > All > Import

3 원하는 지도상의 위치에 띄울 대상을 6.11~12을 참고하여 생성하고 Asset 에 저장

4 Play > Cube > Inspector > Transform 의 Position , Rotation , Scale 값 설정

AR Camera 로 비춰지는 화면에 Cube 의 모양과 위치, 회전도가 바뀐다.

5 (왼쪽 바에서 우클릭) UI > Text-TextMeshpro

6 (팝업) Import TMP Essentials > Import TMP Examples & Extras

7 Inspector > Text (TMP)자리에 distanceTxt 입력 > Tag : Add Tag ... > + > New Tag Name : distanceText > Save

8 Tag : distance Text

9 Inspector > Text Input : Distance = 0 > Alignment 가운데 정렬 (위아래 2번째로 체크) > Overflow : Overflow

10 Color > HDR > 흰색에 가깝게 선택 > x

11 (Assets에서 우클릭) Create > Folder : Scripts > Resources folder에 드래그하여 하위 항목으로 이동

12 (Scripts에서 우클릭) Create > C# Script

13 지도위에 띄울 AR인 cubeVuforia.cs로 이름 변경 > Visual Studio로 열기

14 http://www.wirebeings.com/markerless-gps-ar.html 에서 코드 copy > 해당 위치의 #c 에 paste

필요한 코드 부분은 아래와 같다.

private float originalLatitude;
  private float originalLongitude;
  private float currentLongitude;
  private float currentLatitude;

  private GameObject distanceTextObject;
  private double distance;

  private bool setOriginalValues = true;

  private Vector3 targetPosition;
  private Vector3 originalPosition;

  private float speed = .1f;

  IEnumerator GetCoordinates()
  {
    //while true so this function keeps running once started.
    while (true) {
      // check if user has location service enabled
      if (!Input.location.isEnabledByUser)
        yield break;

      // Start service before querying location
      Input.location.Start (1f,.1f);

      // Wait until service initializes
      int maxWait = 20;
      while (Input.location.status == LocationServiceStatus.Initializing && maxWait > 0) {
        yield return new WaitForSeconds (1);
        maxWait--;
      }

      // Service didn't initialize in 20 seconds
      if (maxWait < 1) {
        print ("Timed out");
        yield break;
      }

      // Connection has failed
      if (Input.location.status == LocationServiceStatus.Failed) {
        print ("Unable to determine device location");
        yield break;
      } else {
        // Access granted and location value could be retrieved
        print ("Location: " + Input.location.lastData.latitude + " " + Input.location.lastData.longitude + " " + Input.location.lastData.altitude + " " + Input.location.lastData.horizontalAccuracy + " " + Input.location.lastData.timestamp);

        //if original value has not yet been set save coordinates of player on app start
        if (setOriginalValues) {
          originalLatitude = Input.location.lastData.latitude;
          originalLongitude = Input.location.lastData.longitude;
          setOriginalValues = false;
        }

        //overwrite current lat and lon everytime
        currentLatitude = Input.location.lastData.latitude;
        currentLongitude = Input.location.lastData.longitude;

        //calculate the distance between where the player was when the app started and where they are now.
        Calc (originalLatitude, originalLongitude, currentLatitude, currentLongitude);

      }
      Input.location.Stop();
    }
  }

  //calculates distance between two sets of coordinates, taking into account the curvature of the earth.
  public void Calc(float lat1, float lon1, float lat2, float lon2)
  {

    var R = 6378.137; // Radius of earth in KM
    var dLat = lat2 * Mathf.PI / 180 - lat1 * Mathf.PI / 180;
    var dLon = lon2 * Mathf.PI / 180 - lon1 * Mathf.PI / 180;
    float a = Mathf.Sin(dLat / 2) * Mathf.Sin(dLat / 2) +
      Mathf.Cos(lat1 * Mathf.PI / 180) * Mathf.Cos(lat2 * Mathf.PI / 180) *
      Mathf.Sin(dLon / 2) * Mathf.Sin(dLon / 2);
    var c = 2 * Mathf.Atan2(Mathf.Sqrt(a), Mathf.Sqrt(1 - a));
    distance = R * c;
    distance = distance * 1000f; // meters
    //set the distance text on the canvas
    distanceTextObject.GetComponent<Text> ().text = "Distance: " + distance;
    //convert distance from double to float
    float distanceFloat = (float)distance;
    //set the target position of the ufo, this is where we lerp to in the update function
    targetPosition = originalPosition - new Vector3 (0, 0, distanceFloat * 12);
    //distance was multiplied by 12 so I didn't have to walk that far to get the UFO to show up closer

  }

  void Start(){
    //get distance text reference
    distanceTextObject = GameObject.FindGameObjectWithTag ("distanceText");
    //start GetCoordinate() function 
    StartCoroutine ("GetCoordinates");
    //initialize target and original position
    targetPosition = transform.position;
    originalPosition = transform.position;

  }

  void Update(){
    //linearly interpolate from current position to target position
    transform.position = Vector3.Lerp(transform.position, targetPosition, speed);
    //rotate by 1 degree about the y axis every frame
    transform.eulerAngles += new Vector3 (0, 1f, 0);

  }

로 바꾸고 진행한다.

6의 마커 기반 ar은 잘 실행되지만 7의 무마커 ar은 현재 사이트 업데이트로 오류가 발생하는데 수정 예정이다.

프로젝트와의 연관성

Unity를 통해 Target Image를 여러개 설정하고 각각에 맞는 AR을 생성 할 수 있음을 확인했다. Paint the city에서는 각 구역별로 벽화 및 해당 장소에서 제공하는 QR코드를 Target 이미지로 설정하여 본인 작품 관람뿐만 아니라 그 구역 전방 300m 내의 지도와 추천 맛집등을 AR로 사용자에게 제공할 예정이다. Asset store를 통해 타인이 만든 Asset도 import하여 target image 위에 생성 할 수 있을을 확인했고 이를 이용해 다른 사용자들의 3D 페인팅 결과물도 AR로 간편히 확인할 수 있다. 이에 Unity를 이용해 보다 정교한 AR 모델링을 사용자에게 제공할 예정이다.

(좌) 본인이 대림 벽화거리에 그려진 bille eilish 그림 앞에서 찍은 사진 (우) 영국 밴드 bastille 이 벽화거리앞에서 찍은 사진

프로젝트의 주요 목표는 낙후된 도시의 시민들의 요구가 적극적으로 반영된 차별화된 도시 모델을 통한 지역 경제 활성화이다. 1차 발표때 받은 피드백에서 "사용자들의 1회성 방문에서 그칠 우려가 있다.", "방문객 A가 해당 지역을 여러 번 반복하는 것과 방문객 A,B,C가 1번씩 방문하는 것 중 어디에 초점을 맞출 것이냐"라는 내용이 있었다. 이에 우리팀은 팬덤의 입소문과 인증샷 활성화를 통한 초기 방문객 유치를 통해 여러 명의 사용자들의 여러 번의 현장 방문으로 이어질 수 있게 기획을 변경하였다. 일반적인 벽화와 달리 AR은 본인과 여러사람들의 작품을 동시에 관람가능 할 수 있고 수시로 업데이트 된다는 점을 이용한 것이다.

왜 티모시 샬라메 사진으로 AR 시뮬레이션을 돌렸나?

대림역 부근의 쓰레기 무단 투기 지역에 영등포구의 '탁트인 골목 만들기' 사업의 일환으로 벽화거리가 조성한 사례가 있다. 특히 대림창고에서는 한두달 단위로 유명인사 그래피티로 바꾸며 (우영우, 손흥민 등) 이를 중심으로 카페거리가 조성되고 "인증샷 성지"가 된 바있다. 본인 또한 직접 방문하여 billie eilish 그림 앞에서 사진을 찍고 해당 건물에 들어가서 식사를 한 바 있다. 서울시민들뿐만 아니라 타지역, 외국 유명 인사들까지 sns에 인증샷을 올리고 그 팬들도 해당 장소에서 동일한 포즈로 인증샷을 찍고 같은 곳에서 식사를 하는 일종의 "성지순례"로 이어졌다. 그 효과는 연예인들의 지하철 광고, 생일 카페 인증샷과 그 팬덤들의 방문에서도 확인 할 수 있다. Paint the city는 지역의 일정부분의 실제 벽화작업은 공개 공모 형식을 통한 인기투표의 형태로 작품을 선정하는 방법으로 진행하여 여러 팬덤들의 적극적인 온라인, 오프라인 참여를 유도할 것이다. 이에 본인이 가장 좋아하는 티모시 샬라메 사진을 예시로 시뮬레이션을 돌렸다.

추가로 가상 현실에만 존재하여 AR로만 확인 가능한 해당 지역의 랜드 마크 및 현장에서의 target image를 인식하거나 gps 기반으로 제공되는 인생네컷/인스타 필터를 통해 추가 방문객을 유치한다.