ARCore の Streetscape Geometry API と Rooftop anchors API を使ってみる

1. 始める前に

ARCore は、スマートフォンで拡張現実（AR）エクスペリエンスを構築するための Google のフレームワークです。Geospatial Streetscape Geometry API と Rooftop anchor API は、AR エクスペリエンスでユーザーの周囲にある建物を把握できるようにします。

この Codelab では、お近くのエリアの街並みのジオメトリを視覚化し、その側面を装飾できる AR アプリを作成します。次に、屋上アンカーを使用して周囲の屋上に装飾を追加します。

Codelab アプリの完全なデモ

前提条件

学習内容

  • ARCore Geospatial API を使用できる Google Cloud プロジェクトをセットアップする方法
  • Geospatial API から街並みのジオメトリを取得する方法
  • 街並みのジオメトリから取得した建物や地形を視覚化する方法
  • 取得したポリゴンに関する基本的な計算を行う方法
  • ジオメトリのヒットテストを行う方法
  • 屋上アンカーを使用して建物の上部にコンテンツを取り付ける方法

必要なもの

2. 環境をセットアップする

Kotlin と Android Studio で Geospatial API を使用するには、Google Cloud プロジェクトと、この Codelab 用のスターター プロジェクトが必要です。

Google Cloud プロジェクトをセットアップする

ARCore Geospatial API は Google Cloud に接続し、Google ストリートビューがカバーするエリアで Google の Visual Positioning System（VPS）からのローカライズ情報を提供します。

自分のプロジェクトでこのサーバーを使用する手順は次のとおりです。

  1. Google Cloud でプロジェクトを作成します。Google Cloud プロジェクトを作成する
  2. [プロジェクト名] フィールドに、ARCore Geospatial API project などの適切な名前を入力し、任意の場所を選択します。
  3. [作成] をクリックします。
  4. Google Cloud コンソールのプロジェクト選択ページで [プロジェクトを作成] をクリックします。
  5. 以下のリンクをクリックしてこのプロジェクトの ARCore API を表示し、[有効にする] を選択します。
  6. プロジェクトの API キーを作成します。
    1. [API とサービス] で [認証情報] を選択します。
    2. [認証情報を作成] をクリックし、[API キー] を選択します。
    3. 以降の手順で必要になるため、キーを書き留めておきます。

API キー認証がある Google Cloud プロジェクトを作成できました。これで、サンプル プロジェクトで Geospatial API を使用する準備が整いました。

Android Studio をセットアップする

Geospatial API を使い始めるにあたって、Geospatial API を統合した基本的な ARCore プロジェクトを含むスターター プロジェクトを用意しています。

Android Studio をセットアップする手順は次のとおりです。

  1. Android Studio を開き、次のいずれかを行います。
    • すでにプロジェクトを開いている場合は、バージョン管理から [File] > [New] > [Project from version control] をクリックします。
    • [Welcome to Android Studio] ウィンドウが表示されたら、[Get from VCS] をクリックします。Get from VCS の場所
  2. [Git] を選択し、「https://github.com/google-ar/codelab-streetscape-geometry-rooftop-anchors.git」と入力してプロジェクトをインポートします。

API キーを Android Studio プロジェクトに統合する

Google Cloud の API キーをプロジェクトに関連付ける手順は次のとおりです。

  1. Android Studio で [app] > [src] をクリックし、AndroidManifest.xml をダブルクリックします。
  2. 以下の meta-data エントリを見つけます。
    <meta-data
    android:name="com.google.android.ar.API_KEY"
    android:value="API_KEY" />
  3. API_KEY のプレースホルダを Google Cloud プロジェクトで作成した API キーに置き換えます。com.google.android.ar.API_KEY に格納されている値は、このアプリが Geospatial API を使用することを許可するものです。

プロジェクトを検証する

  • プロジェクトを検証するために、開発用デバイスでアプリを実行します。画面上部にカメラビューと地理空間デバッグ情報が表示されます。また、ボタンやコントロールも表示されますが、機能は割り当てられていません。この Codelab を通じて、プロジェクトでこれらの機能をプログラミングしていきます。

アプリに表示される地理空間情報

3. streetscape-geometry データを視覚化する

Geospatial API がデバイスで動作することを確認したら、Geospatial API から街並みのジオメトリを取得します。

街並みのジオメトリを有効にする

  1. StreetscapeGeometryActivity.kt ファイルを開き、次の行を見つけます。
    // TODO: Enable Streetscape Geometry.
  2. この行の後で、streetscape-geometry モードを有効にします。
    streetscapeGeometryMode = Config.StreetscapeGeometryMode.ENABLED
    Geospatial API と streetscape-geometry モードが有効になっている場合、アプリはユーザーの周辺の streetcape-geometry 情報を受け取ることができます。

街並みのジオメトリを取得する

  1. StreetscapeGeometryActivity.kt ファイルを開き、次の行を見つけます。
    // TODO: Obtain Streetscape Geometry.
  2. この行の後で、すべての Trackable オブジェクトを取得し StreetscapeGeometry でフィルタリングすることで、街並みのジオメトリを取得します。
    val streetscapeGeometry = session.getAllTrackables(StreetscapeGeometry::class.java)
    サンプル プロジェクトの中でこれらのジオメトリを使用してシンプルな視覚化を行います。この視覚化では、建物や地形のポリゴンが異なる色で表示されます。
  3. この次の行に、以下のコードを追加します。
    streetscapeGeometryRenderer.render(render, streetscapeGeometry)
  4. アプリを実行し、お近くのエリアの建物を訪れてみます。
  5. 地理空間のローカライズが完了したら、設定アイコン [Settings] をタップし、streetscape-geometry の視覚化を有効にします。
  6. AR で建物を見てみます。セグメント化された建物にはそれぞれ色が付き、中央のジオメトリの Quality と Type の列挙型が表示されます。

アプリに表示される街並みのジオメトリ

4. streetscape-geometry データを使用してヒットテストを行う

街並みのジオメトリが表示されたら、ヒットテストを使用して建物を装飾します。ヒットテストは仮想ジオメトリと直線の交差を検出します。ヒットテストを使用して、ユーザーがタップしたジオメトリを検出します。

ヒットテストを行う

このセクションでは、ユーザーが建物のジオメトリをタップすると、その建物のファサードに星を配置します。空間内にいるユーザーの視点からのヒットテストでこれを行い、途中でぶつかった AR オブジェクトを登録します。次に、この情報を使用して、ユーザーが建物のポリゴンをタップしたかどうかを確認します。

  1. StreetscapeCodelabRenderer.kt ファイルを開き、次の行を見つけます。
    // TODO: Create an anchor for a star, and add it to the starAnchors object.
  2. この行の後に、次のコードを追加します。
    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
    このコードは、中心座標を使用して街並みのジオメトリから建物を検出します。この結果を使用して装飾を追加します。

タップで星の装飾を追加する

  1. StreetscapeCodelabRenderer.kt ファイルを開き、次の行を見つけます。
    // TODO: Create an anchor for a star, and add it to the starAnchors object.
  2. この行の後に、次のコードを追加します。
    val transformedPose = ObjectPlacementHelper.createStarPose(hit.hitPose)
val anchor = hit.trackable.createAnchor(transformedPose)
starAnchors.add(anchor)
    ObjectPlacementHelper クラスは、ヒットポーズを参照して、星を配置するための適切な場所を決定します。starAnchors オブジェクトは、AR ビューで星をレンダリングするために使用されます。

試してみる

  1. アプリを実行し、お近くのエリアの建物を訪れてみます。
  2. 地理空間のローカライズが完了したら、カメラを建物に向けて画面をタップします。画面中央の建物に星が表示されます。

アプリ内に配置される星

5. rooftop-anchor データを使用する

最後に、屋上アンカーを使用して建物の上部に装飾を追加します。屋上アンカーを使用すると、緯度と経度を使用して建物の上部に AR アンカーを取り付けることができます。このアンカーを使用して、ユーザーの周囲の建物にバルーンを取り付けます。

バルーンモードに動作を追加する

このプロジェクトには 2 つのアセット配置モードがあります。すでに使用したひまわりモードと、バルーンモードです。

バルーンモードの動作をプログラミングする手順は次のとおりです。

  1. StreetscapeCodelabRenderer.kt ファイルを開き、次の行を見つけます。
    // TODO: Create an anchor for a balloon and add it to the balloonAnchors object.
  2. ヒットポーズを使用して、バルーンを配置する最適な場所を作成します。
    val transformedPose = ObjectPlacementHelper.createBalloonPose(hit.hitPose)
  3. transformedPose 変数を地理空間のポーズに変換します。
    val earth = session?.earth ?: return
val geospatialPose = earth.getGeospatialPose(transformedPose)
  4. 変換後の緯度と経度を使用して屋上アンカーを作成します。
    earth.resolveAnchorOnRooftopAsync(
  geospatialPose.latitude, geospatialPose.longitude,
  0.0,
  transformedPose.qx(), transformedPose.qy(), transformedPose.qz(), transformedPose.qw()
) { anchor, state ->
  if (!state.isError) {
    balloonAnchors.add(anchor)
  }
}

試してみる

  1. アプリを実行し、お近くのエリアの建物を訪れてみます。
  2. 地理空間のローカライズが完了したら、バルーンモードに変更して建物をタップします。建物の上部にバルーンが表示されます。

屋上にバルーンを配置する

6. まとめ

お疲れさまでした。お近くのエリアの街並みのジオメトリを視覚化し、その側面を星で装飾できる AR アプリを作成しました。また、屋上アンカーを使用して、周囲の建物の屋上にバルーンを追加しました。

Codelab アプリの完全なデモ

関連情報