AR Quick Look, meet Object Capture
Augmented Reality 进阶 18m

AR Quick Look 遇见 Object Capture

AR Quick Look, meet Object Capture

2021年6月10日

在 Apple 官方观看视频

一句话判断

Object Capture 生成的 3D 模型和 AR Quick Look 的无缝对接才是这个故事最完整的部分 —— 从拍摄到上线 AR 预览，中间只需要一个 USDZ 文件，电商和零售行业应该立刻关注。

这场 Session 讲了什么

这集是 Object Capture 和 AR Quick Look 的”桥接”讲解。前半部分回顾了 Object Capture 的基本工作流（iOS 拍摄 -> Mac 重建），后半部分重点讲解如何把重建出来的 USDZ 模型直接用于 AR Quick Look 预览。

Session 展示了一个电商场景的完整流程：拍一双鞋子 -> 生成 3D 模型 -> 放到网站/Safari -> 用户在 AR Quick Look 中预览鞋子放在真实环境中的效果。整个过程不需要任何 3D 建模专业知识。

还讨论了 AR Quick Look 的新的定制能力：自定义 Scale（缩放）、自定义 AR Banner（顶部横幅）、以及如何通过 webAr 参数控制分享和预览行为。

值得深挖的点

Object Capture 输出到 AR Quick Look 的优化管道。直接从 Object Capture 高质量输出的 USDZ 文件可能有几十 MB（含高精度纹理），直接用在 Web 上体验很差。Session 推荐的管道是：Object Capture high output -> 用 Reality Converter 或 usdcat 优化（降采样纹理、简化网格）-> 生成轻量 USDZ -> 部署到 Web。这个过程可以脚本化，但苹果目前没有提供一键工具。

AR Quick Look 的 Web 集成细节。在网页中嵌入 AR 预览只需要一个 <a> 标签指向 USDZ 文件，加上 rel="ar" 属性。iOS Safari 会自动识别并提供 AR 预览选项。新增的参数包括 allowsContentScaling=0（禁止用户缩放模型）和 canonicalWebPageURL（指定返回页面）。这些参数让电商场景的 AR 体验更可控。

代码片段

网页中嵌入 AR Quick Look 预览：

<!-- 基础 AR Quick Look 链接 -->
<a rel="ar" href="https://example.com/models/shoe.usdz">
    <img src="shoe_thumbnail.jpg" alt="在 AR 中预览鞋子">
</a>

<!-- 带自定义参数的 AR 预览 -->
<a rel="ar"
   href="https://example.com/models/shoe.usdz#allowsContentScaling=0&canonicalWebPageURL=https://example.com/shoe-page">
    <img src="shoe_thumbnail.jpg" alt="在 AR 中预览鞋子">
</a>

SwiftUI 中使用 AR Quick Look：

import SwiftUI
import QuickLook

struct ARQuickLookView: UIViewControllerRepresentable {
    let modelURL: URL

    func makeUIViewController(context: Context) -> QLPreviewController {
        let controller = QLPreviewController()
        controller.dataSource = ARPreviewDataSource(url: modelURL)
        return controller
    }

    func updateUIViewController(_ uiViewController: QLPreviewController, context: Context) {}
}

class ARPreviewDataSource: NSObject, QLPreviewControllerDataSource {
    let url: URL
    init(url: URL) { self.url = url }

    func numberOfPreviewItems(in controller: QLPreviewController) -> Int { 1 }

    func previewController(_ controller: QLPreviewController,
                           previewItemAt index: Int) -> QLPreviewItem {
        return url as QLPreviewItem
    }
}

批量优化 Object Capture 输出：

# 批量处理：降低纹理分辨率，简化网格
for file in *.usdz; do
    # 使用 usdcat 重新打包并压缩
    usdcat "$file" -o "optimized_${file}"
    # 验证输出文件
    usdchecker "optimized_${file}"
done

最佳实践

  1. 电商场景用 preview 质量起步。Object Capture 的 preview 输出足够 AR Quick Look 展示，文件小、生成快。如果对细节有要求再用 medium 或 high。
  2. USDZ 文件必须启用 HTTPS。AR Quick Look 在 Safari 中要求模型 URL 使用 HTTPS，否则直接拒绝加载。
  3. 给 AR Quick Look 预览提供 2D 备选方案。不是所有用户都在 iOS 设备上访问，Android 和桌面端需要一个传统的 3D 查看器或至少一组多角度照片。

还有什么值得关注

  • AR Quick Look 新增了对自定义 AR Banner 的支持，可以显示品牌信息和购买按钮。
  • USDZ 文件内可以嵌入元数据（作者、版权、创建日期），用 usdcat 查看。
  • Object Capture 和 Mac 端的 Photogrammetry 框架在 macOS 12 Monterey 上可用。
WWDC 2021