关于此 Codelab
1. 准备工作
ARCore 是 Google 推出的一个框架,用于在智能手机上打造增强现实 (AR) 体验。Geospatial Streetscape Geometry API 和 Rooftop Anchors API 有助于在 AR 体验中了解用户身边的建筑物。
在此 Codelab 中,您将构建一个 AR 应用,该应用直观呈现您所在区域的街景几何图形并支持您对几何图形边缘进行装饰。然后,您需要使用屋顶锚点为周围屋顶的顶部添加装饰。
前提条件
- 具备 AR 的基础知识
- 具备 ARCore Geospatial API 的基础知识
学习内容
- 如何设置可以使用 ARCore Geospatial API 的 Google Cloud 项目。
- 如何从 Geospatial API 获取街景几何图形。
- 如何直观呈现从街景几何图形中获取的建筑物和地形。
- 如何对获取的多边形执行基本计算。
- 如何在几何图形上执行点击测试。
- 如何使用屋顶锚点将内容附加到建筑物顶部。
所需条件
- 支持的 ARCore Android 设备,已经使用 USB 线连接到开发机器并配置了 USB 调试功能。
- Android 开发设备上安装了面向 AR 的 Google Play 服务 1.37 或更高版本。
- 安装并配置了用于构建 Android 应用的 Android Studio。
2. 设置您的环境
如需搭配使用 Geospatial API 与 Kotlin 和 Android Studio,您需要拥有 Google Cloud 项目和我们的初始项目。
设置 Google Cloud 项目
将 ARCore Geospatial API 关联到 Google Cloud,从而在 Google 街景覆盖的区域提供来自 Google 视觉定位系统 (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. 直观呈现街景几何图形数据
在确认 Geospatial API 可以在您的设备上正常运行之后,即可从 Geospatial API 获取街景几何图形。
启用街景几何图形
- 在
StreetscapeGeometryActivity.kt
文件中,找到以下行:// TODO: Enable Streetscape Geometry.
- 在此行之后,启用街景几何图形模式:
在启用 Geospatial API 和街景几何图形模式之后,您的应用可以接收用户周围的街景几何图形信息。streetscapeGeometryMode = Config.StreetscapeGeometryMode.ENABLED
获取街景几何图形
- 在
StreetscapeGeometryActivity.kt
文件中,找到以下行:// TODO: Obtain Streetscape Geometry.
- 在此行之后,通过获取所有
Trackable
对象并按照StreetscapeGeometry
进行过滤来获取街景几何图形: 您需要在示例项目中提供的简单可视化中使用这些几何图形。此可视化以不同的颜色来显示每个建筑物或地形多边形。val streetscapeGeometry = session.getAllTrackables(StreetscapeGeometry::class.java)
- 在下一行中,添加以下代码:
streetscapeGeometryRenderer.render(render, streetscapeGeometry)
- 运行您的应用并访问您所在区域的一个建筑物。
- 完成 Geospatial 本地化之后,点按
Settings,然后启用街景几何图形可视化。
- 在 AR 中查看建筑物。每个细分的建筑物都有自己的颜色,并且会显示最中心的几何图形的
Quality
和Type
枚举。
4. 使用街景几何图形数据执行点击测试
现在您已经可以看到街景几何图形,那么可以使用点击测试来装饰建筑物。点击测试能够找到虚拟几何图形和光线的交汇处。您可以使用点击测试来找到用户点按的几何图形。
执行点击测试
在此部分中,当用户点按建筑物的几何图形时,您需要将一颗星放置在建筑物的 Facade 上。您从世界中用户的角度通过一次点击测试来完成此目标,并注册它在延伸出去时遇到的 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)
}
}
试试看
- 运行您的应用并访问您所在区域的一个建筑物。
- 完成地理空间本地化之后,更改为气球模式并点按一个建筑物。您会看到一个气球出现在建筑物的顶部上方。