在 iOS 版 Safari 中查看增强现实资产

iOS 12 上的 Safari 支持查看 3D 模型，并允许您在增强现实 (AR) 中看到它们。支持的资产使用皮克斯 (Pixar) 开发的 Universal Scene Description 格式，或 USDZ。

苹果公司创建了一个示例画廊供您试用。本文将告诉您如何编写 Web 内容来引用 USDZ 文件，以便您的用户可以体验 AR。

提供 USDZ 内容

为了让 Safari 识别 AR 内容，它必须通过 HTTP 以适当的 MIME 类型提供。Safari 正在寻找 model/vnd.usdz+zip。

由于这是一种新格式，您的 Web 服务器可能不了解 USDZ。您可能需要配置它以提供适当的标头。对于 Apache，配置将如下所示

AddType model/vnd.usdz+zip usdz # All files ending in .usdz served as USD.

有关如何设置 Content-Type 标头的信息，请参阅您的 Web 服务器文档或 Web 应用程序框架文档。

链接到 USDZ

一旦内容以正确的 MIME 类型提供，您就可以以正常方式链接到 USDZ 内容。

<a href="heart-tapback.usdz">iMessage Heart Tap-back</a>

这是一个这样的链接：iMessage 心形轻触反馈

轻触该链接后，iOS 上的 Safari 将导航到一个页面，显示 3D 资产的静态缩略图。再次轻触缩略图将打开实时视图，用户可以在其中平移和缩放，并切换到 AR 模式。USDZ 中嵌入的任何动画都将在实时视图中播放。用户可以退出该视图，然后使用返回按钮返回到上一页。

通过这种方式，链接到 USDZ 文件就像链接到其他文件一样。

USDZ 的原位查看

离开页面以获取 AR 体验可能会中断您的交互。有一种更好的方法来显示 AR 内容，即以 Safari 预先知道如何处理链接的方式标记链接元素。

通过将 rel="ar" 添加到您的 a（链接/锚点）元素，Safari 在轻触时不会导航。相反，它会直接跳转到实时 3D 视图，并在退出时返回您的页面。

Safari 会在这些链接的右上角装饰一个 3D 立方体徽章，以向用户显示存在 AR 体验。您可能已经在前面提到的画廊中注意到了这种体验。
链接还有一些额外的要求。我们已经提到了 rel 属性。链接还必须包含一个 单一子元素，该子元素是 img 或 picture 元素。例如

<a rel="ar" href="model.usdz">
    <img src="model-preview.jpg">
</a>

显然，您可以在锚点内部使用任何您喜欢的图像。

功能检测

要检测 AR 支持，您可以使用以下 JavaScript

const a = document.createElement("a");
if (a.relList.supports("ar")) {
  // AR is available.
}

除了 Safari 之外，AR 集成在 SFSafariViewController 客户端中也可用。我们还收到了将其添加到 WKWebView 的请求。

有关 iOS 和 AR 的更多信息可以在 WWDC 2018 第 603 场讲座 – 将应用程序和内容与 AR Quick Look 集成中找到。与 Safari 相关的部分大约从 16 分钟开始。该讲座的其他部分讨论了创建 USDZ 文件。苹果 AR 框架的通用文档可在开发者网站上获取。