ARCore에서 Streetscape Geometry 및 Rooftop anchors API 시작하기

48분 남음

이 Codelab 정보

최종 업데이트: 4월 20, 2023

작성자: 데릭 브리디

1. 시작하기 전에

ARCore는 스마트폰에서 증강 현실(AR) 환경을 빌드하기 위한 Google의 프레임워크입니다. Geospatial Streetscape Geometry 및 Rooftop anchor API는 AR 환경에서 사용자 주변의 건물을 파악하는 데 도움이 됩니다.

이 Codelab에서는 현재 지역의 거리 풍경 형태를 시각화하고 측면을 장식할 수 있는 AR 앱을 빌드합니다. 그런 다음 루프톱 앵커를 사용하여 주변 루프톱 맨 위에 장식을 추가합니다.

Codelab 앱의 전체 데모

사전 요건

AR 관련 기본 지식
ARCore Geospatial API 관련 기본 지식

학습할 내용

ARCore Geospatial API를 사용할 수 있는 Google Cloud 프로젝트를 설정하는 방법
Geospatial API에서 거리 풍경 형태를 가져오는 방법
거리 풍경 형태에서 가져온 건물과 지형을 시각화하는 방법
획득한 다각형에서 기본적인 계산을 수행하는 방법
형태에 대해 Hit Test를 수행하는 방법
루프톱 앵커를 사용하여 건물 맨 위에 콘텐츠를 연결하는 방법

필요한 항목

USB 케이블로 개발 머신에 연결되고 USB 디버깅을 통해 구성된 ARCore가 지원되는 Android 기기
Android 개발 기기에 설치된 Google Play AR 서비스 1.37 이상
Android 앱을 빌드하기 위해 설치, 구성된 Android 스튜디오

2. 환경 설정

Kotlin 및 Android 스튜디오에서 Geospatial API를 사용하려면 Google Cloud 프로젝트와 시작 프로젝트가 필요합니다.

Google Cloud 프로젝트 설정

ARCore Geospatial API는 Google Cloud와 연결되어 Google 스트리트 뷰가 적용되는 영역에서 Google VPS(Visual Positioning System)의 현지화 정보를 제공합니다.

프로젝트에서 이 서버를 사용하려면 다음 단계를 따르세요.

Google Cloud에서 프로젝트를 만듭니다.
프로젝트 이름 필드에 적절한 이름(예: ARCore Geospatial API project)을 입력하고 위치를 선택합니다.
만들기를 클릭합니다.
프로젝트 선택기 페이지의 Google Cloud 콘솔에서 프로젝트 만들기를 클릭합니다.
다음 링크를 클릭하여 이 프로젝트에 대한 ARCore API를 확인하고 사용 설정을 클릭합니다.
프로젝트에 대한 API 키를 만듭니다.
1. API 및 서비스에서 사용자 인증 정보를 선택합니다.
2. 사용자 인증 정보 만들기를 클릭한 후 API 키를 선택합니다.
3. 나중에 필요하므로 이 키를 기록해 둡니다.

API 키 승인으로 Google Cloud 프로젝트를 만들었고 샘플 프로젝트에서 Geospatial API를 사용할 준비가 되었습니다.

Android 스튜디오 설정

Geospatial API를 시작할 수 있도록 Geospatial API와 통합된 ARCore 프로젝트의 기본사항이 포함된 시작 프로젝트가 제공됩니다.

Android 스튜디오를 설정하려면 다음 단계를 따르세요

Android 스튜디오를 열고 다음 중 하나를 실행합니다.
- 프로젝트가 이미 열려 있다면 File > New > Project from version control을 클릭합니다.
- Welcome to Android Studio 창이 표시되면 Get from VCS를 클릭합니다.
Git을 선택하고 https://github.com/google-ar/codelab-streetscape-geometry-rooftop-anchors.git을 입력하여 프로젝트를 가져옵니다.

API 키를 Android 스튜디오 프로젝트에 통합

Google Cloud의 API 키를 프로젝트와 연결하려면 다음 단계를 따르세요.

Android 스튜디오에서 app > src를 클릭하고 AndroidManifest.xml을 더블클릭합니다.

다음 meta-data 항목을 찾습니다.

<meta-data
    android:name="com.google.android.ar.API_KEY"
    android:value="API_KEY" />

API_KEY 자리표시자를 Google Cloud 프로젝트에서 만든 API 키로 바꿉니다. com.google.android.ar.API_KEY에 저장된 값이 이 앱에서 Geospatial API를 사용하도록 승인합니다.

프로젝트 확인

개발 기기에서 앱을 실행하여 프로젝트를 확인합니다. 화면 상단에 카메라 뷰와 지리 공간적 디버그 정보가 표시됩니다. 또한 기능이 없는 것처럼 보이는 버튼과 컨트롤도 표시됩니다. 이 Codelab 전체에서 이 기능을 프로젝트에 프로그래밍합니다.

지리 공간 정보가 앱에 표시됩니다.

3. 거리 풍경 형태 데이터 시각화

Geospatial API가 기기에서 작동하는지 확인한 후 Geospatial API에서 거리 풍경 형태를 가져옵니다.

거리 풍경 형태 사용 설정

StreetscapeGeometryActivity.kt 파일에서 다음 행을 찾습니다.
```
// TODO: Enable Streetscape Geometry.
```
이 행 다음에서 거리 풍경 형태 모드를 사용 설정합니다.
```
streetscapeGeometryMode = Config.StreetscapeGeometryMode.ENABLED
```
Geospatial API와 거리 풍경 형태 모드가 사용 설정되면 앱은 사용자 주변의 거리 풍경 형태에 대한 정보를 수신할 수 있습니다.

거리 풍경 형태 가져오기

StreetscapeGeometryActivity.kt 파일에서 다음 행을 찾습니다.
```
// TODO: Obtain Streetscape Geometry.
```
이 행 다음에서 모든 Trackable 객체를 가져오고 StreetscapeGeometry로 필터링하여 거리 풍경 형태를 가져옵니다.
```
val streetscapeGeometry = session.getAllTrackables(StreetscapeGeometry::class.java)
```
샘플 프로젝트로 제공되는 간단한 시각화에서 이러한 형태를 사용합니다. 이 시각화는 각 건물 또는 지형을 나타내는 다각형을 각기 다른 색상으로 표시합니다.

다음 행에 아래 코드를 추가합니다.

streetscapeGeometryRenderer.render(render, streetscapeGeometry)

앱을 실행하고 현재 지역의 건물을 방문합니다.
지리 공간적 현지화가 완료되면 Settings를 탭하고 거리 풍경 형태 시각화를 사용 설정합니다.
AR에서 건물을 바라봅니다. 분할된 건물은 각각 고유한 색상으로 되어 있으며 정중앙에 있는 형태의 Quality 및 Type enum이 표시됩니다.

거리 풍경 형태가 앱에 표시됩니다.

4. 거리 풍경 형태 데이터로 Hit Test 실행

이제 거리 풍경 형태를 볼 수 있으므로 Hit Test를 사용하여 건물을 장식할 수 있습니다. Hit Test는 가상의 형태와 광선 간의 교차점을 찾습니다. Hit Test를 사용하여 사용자가 탭하는 형태를 찾습니다.

Hit Test 실행

이 섹션에서는 사용자가 건물을 나타나는 형태를 탭할 때 건물의 퍼사드에 별표를 배치합니다. 이 세계의 사용자 관점에서 Hit Test를 수행하고 진행하면서 마주치는 AR 객체를 등록합니다. 그런 다음 이 정보를 사용하여 사용자가 건물 다각형을 탭했는지 여부를 확인합니다.

StreetscapeCodelabRenderer.kt 파일에서 다음 행을 찾습니다.

// TODO: Create an anchor for a star, and add it to the starAnchors object.

이 행 다음에 아래 코드를 추가합니다.

val centerHits = frame.hitTest(centerCoords[0], centerCoords[1])
val hit = centerHits.firstOrNull {
  val trackable = it.trackable
  trackable is StreetscapeGeometry && trackable.type == StreetscapeGeometry.Type.BUILDING
} ?: return

이 코드는 중심 좌표를 사용하여 건물을 나타내는 거리 풍경 형태를 찾습니다. 이 결과를 사용하여 장식을 추가합니다.

탭할 때 별표 장식 추가

StreetscapeCodelabRenderer.kt 파일에서 다음 행을 찾습니다.

// TODO: Create an anchor for a star, and add it to the starAnchors object.

이 행 다음에 아래 코드를 추가합니다.
```
val transformedPose = ObjectPlacementHelper.createStarPose(hit.hitPose)
val anchor = hit.trackable.createAnchor(transformedPose)
starAnchors.add(anchor)
```
ObjectPlacementHelper 클래스는 히트 포즈를 보고 별표를 배치할 적절한 위치를 결정합니다. starAnchors 객체는 AR 뷰에서 별표를 렌더링하는 데 사용됩니다.

직접 해 보기

앱을 실행하고 현재 지역의 건물을 방문합니다.
지리 공간적 현지화가 완료되면 카메라가 건물을 향하게 하고 화면을 탭합니다. 화면 중앙의 건물에 별표가 나타나는 것을 볼 수 있습니다.

별표가 앱에 배치됩니다.

5. 루프톱 앵커 데이터 사용

마지막으로 루프톱 앵커를 사용하여 건물 맨 위에 장식을 추가합니다. 루프톱 앵커로 위도와 경도로 이루어진 건물 맨 위에 AR 앵커를 연결할 수 있습니다. 이러한 앵커를 사용하여 사용자 주변의 건물에 풍선을 연결합니다.

풍선 모드에 동작 추가

프로젝트에는 풍선 모드와 이미 사용해 본 해바라기 모드라는 두 가지 애셋 배치 모드가 있습니다.

풍선 모드에 대한 동작을 프로그래밍하려면 다음 단계를 따르세요.

StreetscapeCodelabRenderer.kt 파일에서 다음 행을 찾습니다.

// TODO: Create an anchor for a balloon and add it to the balloonAnchors object.

히트 포즈를 사용하여 풍선을 배치하기 좋은 위치를 만듭니다.
```
val transformedPose = ObjectPlacementHelper.createBalloonPose(hit.hitPose)
```

transformedPose 변수를 지리 공간적 포즈로 변환합니다.

val earth = session?.earth ?: return
val geospatialPose = earth.getGeospatialPose(transformedPose)

변환된 위도와 경도로 이루어진 루프톱 앵커를 만듭니다.

earth.resolveAnchorOnRooftopAsync(
  geospatialPose.latitude, geospatialPose.longitude,
  0.0,
  transformedPose.qx(), transformedPose.qy(), transformedPose.qz(), transformedPose.qw()
) { anchor, state ->
  if (!state.isError) {
    balloonAnchors.add(anchor)
  }
}

직접 해 보기

앱을 실행하고 현재 지역의 건물을 방문합니다.
지리 공간적 현지화가 완료되면 풍선 모드로 변경하고 건물을 탭합니다. 건물 맨 위에 풍선이 나타나는 것을 확인할 수 있습니다.

루프톱에 풍선 배치

6. 결론

축하합니다. 주변 지역의 거리 풍경 형태를 시각화하고 별표로 측면을 장식할 수 있는 AR 앱을 빌드했습니다. 또한 루프톱 앵커를 사용하여 주변 루프톱 맨 위에 풍선을 추가했습니다.

Codelab 앱의 전체 데모

자세히 알아보기

뒤로

오류 신고