AR Quick Look, meet Object Capture

Highlight

Object Capture API 让任何人都能用 iPhone 拍摄的照片生成 USDZ 模型，配合 Reality Composer 添加交互行为后，通过 AR Quick Look 在 App 或网页中展示，全程无需 3D 建模经验。

核心内容

以前做 3D 展示有多麻烦

想在 App 或网站里展示一个产品的 3D 模型，以前只有一条路：找 3D 建模师，用 Maya 或 Blender 手工建模。这些软件价格昂贵，学习曲线陡峭，一个小团队很难负担得起。建好的模型还要导出成 USDZ 格式，再嵌入到 App 或网页中。整个过程专业门槛高、周期长、成本高。

Object Capture + AR Quick Look 的新路径

WWDC2021 推出的 Object Capture API 改变了这个局面。你只需要用 iPhone 或 iPad 拍摄一个实物对象的多角度照片，然后在 Mac 上运行 Object Capture，就能自动生成高质量的 USDZ 文件。（01:38）

这个 USDZ 文件可以直接在 AR Quick Look 中查看。AR Quick Look 是 iOS 系统内置的 AR 查看器，Safari、信息、文件等系统应用都已经支持。你的 App 或网站只需要几行代码就能集成同样的体验。（00:18）

如果需要给模型添加交互行为，可以用 Reality Composer。比如点击模型切换不同款式、播放音频解说、触发动画等。（02:01）

演示：多肉植物电商场景

演示展示了一个完整的电商场景。卖家有一盆手工陶罐和多肉植物，想让买家在下单前预览不同植物搭配的效果。（02:21）

流程如下：

拍摄陶罐的各角度照片，用 Object Capture 生成 USDZ
分别拍摄三种多肉植物，各生成一个 USDZ
在 Reality Composer 中把陶罐作为底座，三种植物叠放在上面
添加交互行为：点击当前植物切换到下一个，循环展示
导出为单个 USDZ 文件，在 AR Quick Look 中查看

买家打开 AR Quick Look 后，可以把虚拟植物放在自己的桌面上，点击切换不同品种，找到最搭配的那一款。（02:43）

详细内容

Object Capture 导出设置的选择

Object Capture 提供三种细节设置，需要在视觉质量和文件大小之间做权衡。（04:56）

设置	文件大小	适用场景
Reduced	最小	网页分发、多模型组合场景
Medium	中等	复杂对象、本地存储的 App
High	最大	最高质量需求

关键点：

无论选哪种设置，Object Capture 使用相同的底层重建算法，区别只在于网格简化和纹理降采样的程度
推荐先导出 Reduced 和 Medium 两种设置，对比视觉效果后再决定
Reduced 适合大多数场景，尤其是网页分发和组合多个模型的场景
Medium 适合复杂对象（需要拍摄数百张照片重建）或模型已预装在设备上的 App
不要在同一个场景中组合多个 Medium 设置的模型，文件会过大
务必在多种 iOS 硬件上测试兼容性和性能

拍摄质量建议

Object Capture 的输出质量取决于输入照片的质量。（07:21）

照片必须清晰，避免运动模糊
相邻照片之间至少 70% 的重叠区域
让物体充满画面
在中性背景下拍摄，减少重建噪声

在 App 中集成 AR Quick Look

App 中集成 AR Quick Look 只需要实现 QLPreviewControllerDataSource 协议。（08:02）

import QuickLook
import ARKit

func presentARQuickLook() {
    let previewController = QLPreviewController()
    previewController.dataSource = self
    present(previewController, animated: true)
}

// MARK: QLPreviewControllerDataSource
func previewController(
    _ controller: QLPreviewController,
    previewItemAt index: Int
) -> QLPreviewItem {
    let previewItem = ARQuickLookPreviewItem(fileAt: fileURL)
    return previewItem
}

关键点：

QLPreviewController 是 Quick Look 框架提供的标准预览控制器
ARQuickLookPreviewItem 专门用于 AR 内容，接收本地文件 URL
实现 QLPreviewControllerDataSource 协议，告诉系统要预览什么内容
系统会自动识别 USDZ 文件并启用 AR 模式

禁用内容缩放：

默认情况下，用户在 AR 模式中可以通过捏合手势缩放模型。如果希望模型始终显示真实比例，可以禁用缩放。（08:37）

let previewItem = ARQuickLookPreviewItem(fileAt: fileURL)
previewItem.allowsContentScaling = false

关键点：

allowsContentScaling 控制用户是否可以在 AR 模式中缩放模型
设置为 false 时，模型始终以真实比例放置到环境中
适合展示真实尺寸的产品，如家具、鞋子等

在网页中集成 AR Quick Look

网页中集成 AR Quick Look 只需要一个带 rel="ar" 属性的链接。（08:54）

<a rel="ar" href="https://example.com/model.usdz">
    <img src="thumbnail.jpg" alt="3D Model">
</a>

关键点：

rel="ar" 属性会在缩略图上添加 AR 徽章图标，提示用户点击后可查看 AR 效果
USDZ 文件必须通过 HTTPS 提供
链接指向 USDZ 文件的 URL

禁用网页端的缩放：

<a rel="ar" href="https://example.com/model.usdz#allowsContentScaling=0">
    <img src="thumbnail.jpg" alt="3D Model">
</a>

关键点：

通过 URL fragment #allowsContentScaling=0 禁用缩放
网页端同样支持 Apple Pay 和自定义操作按钮，可以直接在 AR 预览中完成购买流程

实际应用场景

电商。AR Quick Look 最常见的应用场景。用户可以把鞋子、相框、家具等产品放在自己的空间里预览。GOAT 应用团队用 Object Capture 创建了 Fragment Design x Air Jordan 3 的 3D 模型，用户可以在购买前 360 度查看细节。（10:23）

博物馆。历史文物通常保存在保护罩中，难以从各个角度观察。用 Object Capture 扫描文物后，观众可以在自己的设备上查看详细的虚拟复制品。大都会艺术博物馆用这种方式展示了 Zemi 雕像，还添加了语音解说。（11:10）

教育。传统的图表和视频是 2D 的，有时难以传达 3D 概念。AR 让教学真正进入三维空间。Qlone 应用让孩子可以扫描自己喜欢的玩具或艺术作品，生成 3D 模型后在 AR 中展示和分享。（12:04）

核心启发

做什么：为手工/独立品牌搭建 3D 商品展示
- 为什么值得做：Object Capture 让没有 3D 建模经验的商家也能创建产品模型，AR Quick Look 让用户在购买前预览实物效果，降低退货率
- 怎么开始：用 iPhone 拍摄产品照片，在 Mac 上运行 PhotogrammetrySession 生成 USDZ，上传到服务器后通过网页链接或 App 集成展示
做什么：创建可交互的产品配置器
- 为什么值得做：Reality Composer 支持点击触发隐藏/显示行为，可以让用户在同一场景中切换不同颜色、款式或配件
- 怎么开始：为每个变体创建独立的 USDZ，在 Reality Composer 中组合到一个场景，添加 Tap Trigger + Hide/Show Action 的交互链
做什么：为博物馆或展览制作 AR 导览
- 为什么值得做：Object Capture 可以精确还原文物细节，配合音频解说让远程参观也有沉浸感
- 怎么开始：扫描展品生成 USDZ，用 Reality Composer 添加音频行为，通过网页嵌入或 App 提供给访客
做什么：开发儿童 3D 扫描创作工具
- 为什么值得做：Qlone 的示例证明孩子也能独立完成扫描和创作，这类工具有很大的教育价值
- 怎么开始：在 App 中集成 PhotogrammetrySession，提供拍照引导界面，扫描完成后自动跳转到 Reality Composer 添加交互
做什么：在电商网页中集成 AR + Apple Pay 一键购买
- 为什么值得做：AR Quick Look 网页版支持 Apple Pay 和自定义操作按钮，用户看完 AR 预览可以直接付款，缩短购买路径
- 怎么开始：在网页中嵌入 rel="ar" 链接，参考 Apple 文档配置 Apple Pay 按钮或自定义 Preorder 按钮

关联 Session

Capture and scan real-world objects with Object Capture — 学习如何使用 Object Capture API 从照片创建 3D 模型
Create 3D workflows with USD — USD 工作流和工具链介绍
Dive into RealityKit 2 — RealityKit 2 的新功能
Shop online with AR Quick Look — 在网页中集成 AR Quick Look 和 Apple Pay

Highlight

核心内容

以前做 3D 展示有多麻烦

Object Capture + AR Quick Look 的新路径

演示：多肉植物电商场景

详细内容

Object Capture 导出设置的选择

拍摄质量建议

在 App 中集成 AR Quick Look

在网页中集成 AR Quick Look

实际应用场景

核心启发

关联 Session

评论