この Codelab について
1. 始める前に
ARCore は、スマートフォンで拡張現実（AR）エクスペリエンスを構築するための Google のフレームワークです。Geospatial Streetscape Geometry API と Rooftop anchor API は、AR エクスペリエンスでユーザーの周囲にある建物を把握できるようにします。
この Codelab では、お近くのエリアの街並みのジオメトリを視覚化し、その側面を装飾できる AR アプリを作成します。次に、屋上アンカーを使用して周囲の屋上に装飾を追加します。
前提条件
- AR に関する基本的な知識
- ARCore Geospatial API に関する基本的な知識
学習内容
- ARCore Geospatial API を使用できる Google Cloud プロジェクトをセットアップする方法
- Geospatial API から街並みのジオメトリを取得する方法
- 街並みのジオメトリから取得した建物や地形を視覚化する方法
- 取得したポリゴンに関する基本的な計算を行う方法
- ジオメトリのヒットテストを行う方法
- 屋上アンカーを使用して建物の上部にコンテンツを取り付ける方法
必要なもの
- ARCore 対応の Android デバイス（開発マシンと USB ケーブルで接続され、USB デバッグが設定されていること）
- Android 開発用デバイスに Google Play 開発者サービス（AR） 1.37 以上がインストールされていること
- Android Studio がインストールされ、Android アプリをビルドできるように構成されていること
2. 環境をセットアップする
Kotlin と Android Studio で Geospatial API を使用するには、Google Cloud プロジェクトと、この Codelab 用のスターター プロジェクトが必要です。
Google Cloud プロジェクトをセットアップする
ARCore Geospatial API は Google Cloud に接続し、Google ストリートビューがカバーするエリアで Google の Visual Positioning System（VPS）からのローカライズ情報を提供します。
自分のプロジェクトでこのサーバーを使用する手順は次のとおりです。
- Google Cloud でプロジェクトを作成します。
- [プロジェクト名] フィールドに、
ARCore Geospatial API projectなどの適切な名前を入力し、任意の場所を選択します。 - [作成] をクリックします。
- Google Cloud コンソールのプロジェクト選択ページで [プロジェクトを作成] をクリックします。
- 以下のリンクをクリックしてこのプロジェクトの ARCore API を表示し、[有効にする] を選択します。
- プロジェクトの API キーを作成します。
- [API とサービス] で [認証情報] を選択します。
- [認証情報を作成] をクリックし、[API キー] を選択します。
- 以降の手順で必要になるため、キーを書き留めておきます。
API キー認証がある Google Cloud プロジェクトを作成できました。これで、サンプル プロジェクトで Geospatial API を使用する準備が整いました。
Android Studio をセットアップする
Geospatial API を使い始めるにあたって、Geospatial API を統合した基本的な ARCore プロジェクトを含むスターター プロジェクトを用意しています。
Android Studio をセットアップする手順は次のとおりです。
- Android Studio を開き、次のいずれかを行います。
- すでにプロジェクトを開いている場合は、バージョン管理から [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 Studio プロジェクトに統合する
Google Cloud の API キーをプロジェクトに関連付ける手順は次のとおりです。
- Android Studio で [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. streetscape-geometry データを視覚化する
Geospatial API がデバイスで動作することを確認したら、Geospatial API から街並みのジオメトリを取得します。
街並みのジオメトリを有効にする
StreetscapeGeometryActivity.ktファイルを開き、次の行を見つけます。// TODO: Enable Streetscape Geometry.- この行の後で、streetscape-geometry モードを有効にします。
streetscapeGeometryMode = Config.StreetscapeGeometryMode.ENABLED
街並みのジオメトリを取得する
StreetscapeGeometryActivity.ktファイルを開き、次の行を見つけます。// TODO: Obtain Streetscape Geometry.- この行の後で、すべての
Trackableオブジェクトを取得しStreetscapeGeometryでフィルタリングすることで、街並みのジオメトリを取得します。val streetscapeGeometry = session.getAllTrackables(StreetscapeGeometry::class.java) - この次の行に、以下のコードを追加します。
streetscapeGeometryRenderer.render(render, streetscapeGeometry) - アプリを実行し、お近くのエリアの建物を訪れてみます。
- 地理空間のローカライズが完了したら、
[Settings] をタップし、streetscape-geometry の視覚化を有効にします。 - AR で建物を見てみます。セグメント化された建物にはそれぞれ色が付き、中央のジオメトリの
QualityとTypeの列挙型が表示されます。
4. streetscape-geometry データを使用してヒットテストを行う
街並みのジオメトリが表示されたら、ヒットテストを使用して建物を装飾します。ヒットテストは仮想ジオメトリと直線の交差を検出します。ヒットテストを使用して、ユーザーがタップしたジオメトリを検出します。
ヒットテストを行う
このセクションでは、ユーザーが建物のジオメトリをタップすると、その建物のファサードに星を配置します。空間内にいるユーザーの視点からのヒットテストでこれを行い、途中でぶつかった 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. rooftop-anchor データを使用する
最後に、屋上アンカーを使用して建物の上部に装飾を追加します。屋上アンカーを使用すると、緯度と経度を使用して建物の上部に AR アンカーを取り付けることができます。このアンカーを使用して、ユーザーの周囲の建物にバルーンを取り付けます。
バルーンモードに動作を追加する
このプロジェクトには 2 つのアセット配置モードがあります。すでに使用したひまわりモードと、バルーンモードです。
バルーンモードの動作をプログラミングする手順は次のとおりです。
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 アプリを作成しました。また、屋上アンカーを使用して、周囲の建物の屋上にバルーンを追加しました。