在 Apple 的新 AR 平台上轻松构建令人印象深刻的兴趣点 AR 体验

Mirador 可以轻松地在 Apple 的新 AR 平台 RealityKit 之上构建令人印象深刻的兴趣点 AR 体验。

Mirador 由Andrew Hart构建，他是 AR 导航的先驱，并为 Apple 的第一个 AR 平台 ARKit 构建了最大的开源项目。安德鲁现在是Hyper的创始人，将同样的技术带到零售店。

什么是美丽都

有很多用例可以在 AR 中突出显示天际线上的兴趣点：旅游应用程序、山脉、城市观景点、观景台等。我经常收到使用我的第一个图书馆的人发来的消息，询问“我该怎么做这？在此过程中仍然存在一些技术挑战。”

这就是问题所在：RealityKit 和一般的 AR 是位置不可知的。它在 xyz 中跟踪设备运动，就像视频游戏一样，但不包含 GPS 或真实世界位置的概念。

除了这一挑战之外，手机中的 GPS 和指南针也非常糟糕——每个人都知道在繁忙的街道上走错方向的经历，因为你的手机不知道你在哪里或你面对的方向。想象一下，试图在 AR 中突出显示兴趣点，而位置偏离 10m，设备航向偏离 90º。

Mirador 解决了这一切。它使用视觉锚点来了解设备位置，然后负责在正确的位置显示 AR 元素。

怎么运行的

Mirador 使用开发人员提供的视觉锚点来了解用户的位置。在大多数视点上，都有信息板或其他可用作视觉锚点的地标。它建立在 RealityKit 现有的 ImageAnchor 系统之上，用于识别 2D 图像。

然后库负责在正确的位置显示兴趣点，这也是由开发人员提供的。还加入了一些额外的功能，使其成为绝佳的空间体验。

使用 Swift 包管理器安装

• 文件 > Swift 包 > 添加包依赖
• 添加https://github.com/HyperARCo/Mirador.git

设置

分为三个步骤：

1. 设置兴趣点 (POI) – 您可以在代码中或使用 JSON 执行此操作
2. 提供锚图像
3. 运行 MiradorView

使用代码设置兴趣点

您可以使用一些样板代码设置 Mirador 体验：

import Mirador

//Setup the anchor
let anchorLocation = Location(coordinate: Coordinate(latitude: 51.47787836, longitude: -0.00084588), altitude: 46)
let locationAnchor = LocationAnchor(name: "greenwich", physicalWidth: 0.5, location: anchorLocation, bearing: Float(-30).degreesToRadians, orientation: .horizontal)

//Setup a few points of interest
let canaryWharfCoordinate = Coordinate(latitude: 51.50493780, longitude: -0.01948017)
let canaryWharfLocation = Location(coordinate: canaryWharfCoordinate, altitude: 50)
let canaryWharfPOI = PointOfInterest(name: "Canary Wharf", location: canaryWharfLocation)
locationAnchor.pointsOfInterest.append(canaryWharfPOI)

let o2Coordinate = Coordinate(latitude: 51.50296112, longitude: 0.00321850)
let o2Location = Location(coordinate: o2Coordinate, altitude: 50)
let o2POI = PointOfInterest(name: "O2 Arena", location: o2Location)
locationAnchor.pointsOfInterest.append(o2POI)

let miradorView = MiradorView(locationAnchor: locationAnchor)
miradorView.run()

使用 JSON 设置兴趣点

一旦您有多个兴趣点，将所有这些都写出来可能会很麻烦。Mirador 还支持从 JSON 文件设置整个体验。以下是获得相同体验所需的 JSON 文件：

{
    "anchor": {
        "name": "greenwich",
        "physical_width": 0.5,
        "coordinate": [-0.00084588, 51.47787836], //[long, lat]
        "altitude": 46.0,
        "bearing_degrees": -30,
        "orientation": "vertical" //"vertical" or "horizontal"
    },
    "points_of_interest": [
        {
            "name": "Canary Wharf",
            "coordinate": [-0.01948017, 51.50493780],
            "altitude": 235
        },
        {
            "name": "O2 Arena",
            "coordinate": [0.00321850, 51.50296112],
            "altitude": 52
        }
    },
    "version": "1.0"
}

您可以像这样使用此 JSON：

if let path = Bundle.main.path(forResource: “greenwich”, ofType: “.json”) {
    let anchor = LocationAnchor.anchorFromFile(atPath: path)

    let miradorView = MiradorView(locationAnchor: locationAnchor)
    miradorView.run()
}

提供锚图像

将锚点的清晰图像添加到您的资产中，并使用在 LocationAnchor.name 中指定的相同名称。

尝试正面拍摄图像，没有任何阴影或刺眼的反射。将图像转换为完美的透视效果不起作用——在我的测试中，RealityKit 无法识别倾斜的图像。设计成锚点的图像（例如二维码）效果最好，也可以被视为一个很好的营销机会，例如推广应用程序的图像，同时也是锚点。

最终设置步骤

如果您使用的是 SwiftUI，则可以采用几乎相同的方式进行实例化，但使用MiradorViewContainer(locationAnchor: locationAnchor).

miradorView.run()当体验启动或带回前台时，以及miradorView.pause()应用程序在后台时调用。

最后，添加NSCameraUsageDescription到您的 info.plist，并附上访问相机的说明。

确保在您的设备上运行 – RealityKit 需要摄像头并且不能在模拟器中运行。

自定义元素

所有兴趣点都带有标准的开箱即用外观，但您可能想要对其进行自定义。

显示图像

您可以使用以下方式在 AR 空间中显示您自己的图像addPOIImage()：

let cityCoordinate = Coordinate(latitude:51.51438463, longitude: -0.08024839)
let cityLocation = Location(coordinate: cityCoordinate, altitude: 200)
let image = UIImage(named: "skyline")!

miradorView.addPOIImage(location: cityLocation, image: image)

这支持透明度，所以如果您的图像是 PNG 就可以了。显示的 AR 实体将具有 ScreenScale 和 FaceCamera 属性：

• ScreenScale：实体缩放以始终显示其设计的大小。如果您的图像是 300×300，它将以 300×300 点显示在屏幕上。
• FaceCamera：实体始终面向相机。

通常情况下，RealityKit 内容可能会显得暗淡，但我们已经开发了许多高级渲染技术，因此图像支持透明度、阴影并且它们以正确的颜色渲染。setupRealityKitPlane()如果您有兴趣了解它是如何工作的，请深入研究源代码。

（非常感谢MaxxFrazer的大部分工作。是的，我借用了排名第一的 RealityKit 开发人员来帮助我构建它。）

如果您想显示自己的 UI，可以使用 SwiftUI ImageRendererAPI 将其转换为图像。查看addPOILabel()Mirador 中的函数以获取一些示例代码。

Entity您还可以添加具有相同 ScreenScale 和 FaceCamera 功能的RealityKit ：

addPOIEntity(location: Location, entity: Entity)

或者你可以添加一个没有 ScreenScale 或 FaceCamera 的 RealityKit 实体，但仍然锚定到一个位置：

addLocationEntity(location: Location, entity: Entity)

在家测试应用程序

这些体验旨在用于标志性的观点，但在开发应用程序时整天都在现场是不切实际的。以下是改进开发过程的一些建议：

• 您可以在家中通过将锚定图像加载到计算机屏幕上，然后使用您的应用程序对其进行扫描来运行体验。这将让您快速测试您的 AR 元素是否正确显示，是否有足够/太多等。
• 您可以使用 Reality Composer 应用程序录制 RealityKit 会话，包括视频源和 AR 运动数据。
  • 创建一个新会话，点击右上角的三个点 > 开发者 > 记录 AR 会话。
  • 录制会话，就好像您可以看到 AR 元素并正在演示最终应用程序一样。确保指向起点附近的锚点。您不需要启用右下角的位置记录，我们不使用它。
  • 点击共享、保存到文件。该文件将非常大，超过 100MB。回到计算机前，AirDrop 这个文件。根据我的经验，如果您将视频保存到相机胶卷，它会以相同的质量保存但会删除嵌入的数据，如果您尝试在 WhatsApp 或其他应用程序上发送它，它会将它压缩得更小。因此请确保保存到文件，或直接通过 AirDrop 发送以阻止文件被压缩。
  • 在 Xcode 中，插入并选中您的手机，转到编辑方案...运行 > 选项 > ARKit，并启用重播数据，然后选择文件。注意：除非您选择了手机，否则不会出现此选项。
  • 当您运行该应用程序时，它会播放视频会话，并且应该会识别您的锚图像。
  • 注意：根据我的经验，在 LiDAR 设备上重新编码的会话似乎只能在其他 LiDAR 设备上播放，对于非 LiDAR 设备也是如此。

示例项目

示例项目提供了一个直接的实现，它在格林威治本初子午线（世界的中心！）工作。它演示了两种使用该库的方式——从代码、一些手动元素或从 JSON。

注意：在这两种情况下，greenwich示例项目中的锚点都设置为水平。vertical如果要在屏幕上显示它，您可以将其更改为。如果您在格林威治并亲自尝试，它会水平放置在地面上。

已知的问题

• 锚点可见的每一帧，RealityKit 都会更新其位置。有时图像只能在帧的边缘看到，所以 RealityKit 对其位置的更新不是那么精确，但没有办法知道哪些是好的锚点更新。您可以想象锚定内容在每次更新锚点位置时都会抖动。所以我对这些位置更新实施了卡尔曼滤波器，它基本上对数据进行了平均并且应该到达正确的航向。

下一步

这是 v1。有无数的机会可以让 Mirador 走得更远。随意分叉，并提交带有改进和新功能的 PR。

信用

Mirador 由Andrew Hart建造。我收到的一个常见的后续问题是“这太棒了——它可以与零售店整合吗？” 这就是我创办Hyper的目的。Mirador 对于兴趣点应用程序是免费的、开源的。Hyper 是我们完整的零售室内空间平台（室内地图、精确定位、AR 导航等）

非常感谢RealityKit 之王MaxxFrazer，他帮助解决了许多渲染问题。

执照

Mirador 在 MIT 许可下可用。

GitHub

查看 Github