39-深入了解 AR Quick Look

ARKit系列文章目录
2019年WWDC的《 Session 612 - Advances in AR Quick Look 》主要内容速览:

AR Quick Look 回顾与新特性简介
与 Reality Composer 的集成
视觉效果改善，预览体验增强
Web 集成与自定义

AR Quick Look 回顾与新特性简介

iOS 12 中的特性

方便地在真实世界中展示 3D 物体。
真实感模型渲染。
可以在 iOS 版的 web 和 app 中体验。更多信息参考Integrating Apps and Content with AR Quick Look

iOS 13 新特性

与 Reality Composer 的集成：支持预览 Reality 文件
视觉效果改善：视觉效果更真实
预览体验增强：预览操作更流畅，更方便
Web 集成与自定义：与 Safari 网页的集成
AR Quick Look 中自定义调用动作：Apple Pay 等

今年的 AR 预览已经可以在下面所有的 App 中使用：Safari、短信、 Apple News、文件、邮件、备忘录

与 Reality Composer 的集成

今年，我们不仅可以从 3D 建模软件直接导出 USDZ 文件进行 AR 预览，还可以将多个 USDZ 文件再次导入 Reality Composer 软件进行组合并添加动画音效等，然后再导出.reality文件进行 AR 预览。

场景解析

Reality 文件中结构如下：下面请看详解：

锚点

AR Quick Look 目前支持 4 种锚点：水平、垂直、面部、图片锚点水平与垂直锚点

在日常生活中很常见
物体会被放置在第一个检测到的平面上
只需拖拽，3D 内容会在水平和垂直锚点间移动
旋转手势可用于水平和垂直锚点
适用于 usdz 和 Reality 文件

比如，下面这个虚拟相框，可以在水平桌面和垂直的墙壁之间转换

脸部锚点

自动打开前置相机
自动使用 ARKit 提供的人脸遮挡几何体
手势会被禁用（不能旋转和缩放）
以创作的物理尺寸呈现（内容创建时指定的真实大小）
同时支持多张脸
在所有支持前置 TrueDepth 相机的设备上都可用（不支持的设备上，将会显示为水平锚点进行预览）

如果有多个面部锚点，或者有多种锚点，则会回落到水平锚点上，将 3D 物体在水平面上呈现，如下图右边 iPad 中显示：

译注：这里让人感到疑惑：前面说了支持多张脸，后面又说预览时文件有多个面部锚点会回落到水平面，所以，具体要等正式版发布后再进行测试。推测意思是说：如果文件中有一个面部锚点（比如一个面具），镜头中出现了多张人脸，会把每张脸都戴上同样的面具；如果文件中有两个面部锚点（一个面具和一个眼镜），由于不知道要给哪张人脸戴上面具还是眼镜，只好不显示，全部放在水平面上展示。

图片锚点

锚定于真实世界的图片
优先放置内容
当锚定后，可操纵图片来影响 3D 物体
以创作的物理尺寸呈现

行为

能让你的内容活起来
由触发器和动作组成
在 Reality Composer 的行为面板中定义

Reality 文件

综上所述，Reality 文件支持包含同类型文件，即一个 Reality 文件中包含另一个 Reality 文件。支持多个场景，支持任意数量的 3D 物体，支持水平、垂直、面部、图片锚点，支持行为，支持音频。

Reality 文件与 USDZ 文件可互相协作，如果你想把以前创建的 USDZ 文件添加一些交互动画，可以将其导入 Reality Composer 中，添加动作后再导出为 Reality 文件。

Demo 演示

视觉效果改善

实时动态阴影
让动画更加逼真
默认使用投影阴影(projective shadow)
在 A12 及更新设备上可用光线追踪阴影
光线追踪可有更柔和的阴影和精细的接触点
不要将阴影烘焙成模型的一部分更多信息参考Ray Tracing with Metal。下面为投影阴影和光线追踪阴影效果对比
相机噪点
相机噪点是数码相机系统固有的
将纹理噪点添加到可视内容以匹配相机噪点
使用 ARKit 提供的噪点纹理
在所有支持 ARKit 的设备上都可用
带有色调映射的 HDR
环境影响场景的亮度
缓解看起来"过曝"的颜色
使用16位精度 HDR
使用了色调映射曲线
适用于A10X及更高版本
人体遮挡
以前虚拟内容是在人身之前呈现的
当人体处于虚拟内容之前时，仍能保持真实感
使用ARKit提供的分割数据
适用于A12及更高版本详情可参考Introducing ARKit 3
景深
相机在任意时间时只能聚焦于一段距离
渲染时考虑物体的距离
将 3D 内容模糊与相机的焦距匹配起来
适用于A12X设备
运动模糊
模拟快速移动造成的影响
使用了人工模糊
取决于设备运动情况和曝光参数
适用于A12X设备

全部特性的支持平台如下：

预览体验增强

启动后直接进入 AR

为了做到一启动就直接快速进入 AR 场景，所做的改进有：

尽可能快地将虚拟内容放置在世界中
改进场景理解
使用机器学习进行平面检测
安全地在单独的沙盒过程中运行比如下面的 Demo，就是这么快：

使用嵌套 usdz 的多模型

包含 usdz 文件的元数据和库
可用于相关联物体的集合
按照高度，升序排列
在世界坐标系上独立移动

动画播放

用户可以控制动画播放
包含动画进度条，进行精细调整
可从不同角度回顾，重新播放当动画时长大于等于 10 秒时，下方会显示进度条；小于 10 秒则不断循环播放动画

对于 Reality 文件来说，显示时会触发 Scene Start 触发器，可以播放相应的动画和音乐

悬浮手势

双指在物体上，向上扫，触发悬浮手势

视频录制

可录制与真实世界交互的视频
视频自动保存到相册

macOS 的预览查看器

支持预览 usdz 和 Reality 文件
支持缩略图生成
基于 RealityKit 构建
能在iOS和macOS之间保持一致体验

Web 集成与自定义

支持在 Safari 中展示 3D 模型
根据 HTML 语法标记启动 AR Quick Look
指定 MIME 类型以提供 AR 内容
可在网页上看到带有 AR 徽章的缩略图
无缝体验

预览 usdz 和 Reality 文件

第一步，页面添加 HTML 标记。需要注意的是：a标签内部，必须包含一个 imgage或者picture元素，这个图片将会被用做缩略图

html 复制代码

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

第二步，服务器配置 MIME type

bash 复制代码

AddType model/vnd.usdz+zip .usdz

bash 复制代码

AddType model/vnd.reality .reality

直接加载内容

除了从网络下载内容之外，还可以从本地加载资源，比如从一个 base64 编码的字符串中读取 3D 物体并进行 AR 预览

Data URI

html 复制代码

<a rel="ar" href="data:model/vnd.usdz+zip;base64,<base64 encoded string>" download="asset.usdz">
<img src="asset-thumbnail.jpg"> 
</a>


<a rel="ar" href="data:model/vnd.reality;base64,<base64 encoded string>" download="asset.usdz">
<img src="asset-thumbnail.jpg"> 
</a>

Blob URL Blob URL 一般不是手动生成的，一般是通过拖拽上传或 URL 下载得到的。它无需 base64 编码，相比 Data URI 效率更高。

html 复制代码

<a rel="ar" href="blob:<generated URL string>" download="asset.usdz"> <img src="asset-thumbnail.jpg">
</a>

自定义 AR Quick Look 体验

禁用内容缩放

AR 预览时，缩放功能非常有用，可以让你以不同角度、不同尺寸查看虚拟物体。但是有些物体并不适用缩放，比如家具，它们是有固定的真实大小的，必须要以真实尺寸查看是否适合自己家庭环境。如下所示，双指缩放不能真正改变大小：对于这类的 3D 内容，就需要禁用缩放。下面讲如何在 web 和 app 中禁用内容缩放：

自定义 Web API

在 Web 预览中，是直接通过 URL 中的参数 Fragment identifier 来设置的：直接添加参数，以#键分隔开

ruby 复制代码

https://developer.apple.com/arkit/gallery/toy_biplane.usdz#allowsContentScaling=0

共享产品链接

另一个可自定义的参数是共享产品链接。比如，我们分享了 3D 物体给别人，其他人看到这个东西后，却不知道它是从哪里来的，如何购买，多少钱。。。。所以最佳策略是共享产品描述页：

了解有关 usdz 文件所在源网页的更多信息
非常适合链接到产品说明页面
允许对usdz内容进行最新说明
Safari会自动提供规范网页网址

在 iOS 13 上，当用户分享 3D 模型时，AR Quick Look 将会自动分享 3D 物体所在的网页 URL。比如，在 Safari 中点击"分享"按钮后，就会出现源网页的链接；在 Apple News 中也是如此：

AR Quick Look 与 iOS app 的整合

易于集成以查看AR内容
带来一致且熟悉的预览体验
可以是内嵌或全屏演示
使用Quick Look框架

自定义iOS API

代码如下：

swift 复制代码

// MARK: - QLPreviewControllerDataSource
func previewController(_ controller: QLPreviewController, previewItemAt index: Int) -> QLPreviewItem {
 // Return the file URL to the .usdz file
 let fileUrl = Bundle.main.url(forResource: "toy_robot_vintage", withExtension: "usdz")!
 let previewItem = ARQuickLookPreviewItem(fileAt: fileURL)
 previewItem.canonicalWebPageURL = URL(string: "https://developer.apple.com/arkit/
gallery/")
 previewItem.allowsContentScaling = false
 return previewItem
}