打造引人入胜的空间照片和视频使用体验

打造引人入胜的空间照片和视频使用体验

了解如何在 App 中采用空间照片和视频。探索不同类型的立体媒体，并了解如何通过 iPhone 15 Pro 使用你的 iOS App 拍摄空间视频。探索检测和呈现空间媒体的各种方式，包括 visionOS 中全新的 QuickLook Preview Application API。你还将深入了解用于打造空间照片或视频体验的元数据和立体声概念。

章节
- 0:00 - Introduction
- 1:07 - Types of stereoscopic experiences
- 4:13 - Tour of the new APIs
- 13:14 - Deep dive into spatial media formats
资源
相关视频

WWDC24
WWDC23
- 为空间体验交付视频内容
下载

大家好我叫 Vedant 是一名 Apple Vision Pro 工程师在这个讲座中我将向大家介绍如何利用空间照片和空间视频来打造引人入胜的内容距离我们发布空间照片和视频功能已经过去一年了空间照片和视频是一种全新媒体形式开辟了视觉叙事的全新维度广大用户使用这项功能重温温馨的家庭时光分享世界各地的动人故事带我们上天入海各种精彩内容让我们惊叹不已
而现在借助机器学习技术任何照片都可以转换为空间照片让用户能够以全新方式重温美好回忆
今天我将介绍如何在你自己的 App 中添加空间媒体体验！首先我们来看看可用的立体视频体验类型以了解空间体验的特别之处然后我们介绍所有全新空间媒体 API 以及它们能够实现的功能最后我们将面向想要创建自定空间媒体的高级用户对空间媒体格式进行深入探讨我们首先了解一下立体视频的不同类型立体视觉是针对 Vision Pro 增强视频效果的绝佳方式而 Apple 提供了多种支持立体视觉的格式首先是 3D 视频比如“Apple TV”和“Disney+” App 中提供的 3D 影片这些视频会渲染到平面屏幕上但由于内容是立体的具有景深效果视频中的动作可以在屏幕上呈现出凹凸立体感
然后是可以用 Vision Pro 和 iPhone 15 Pro 拍摄的空间视频空间视频通过窗口渲染窗口边缘周围会微微发光还会提供自定播放控件这样可以增强纵深感并能缓解会导致观看者感到不适的一些常见问题作为一种“傻瓜相机”拍摄格式空间视频的效果很棒用户可以使用 iPhone 等设备拍出观看体验舒适又引人入胜的内容而无需精通 3D 影片的拍摄规则还有适用于高端专业内容的 Apple Immersive 视频这类视频在拍摄时采用 180 度 8K 分辨率附加空间音频现在在 visionOS 2.0 中这类视频还可以提供预览展示和空间视频一样预览演示通过尺寸较小的浮动窗口进行渲染这样一来观看者就可以观看立体的视频同时仍然能够与其他 App 交互
所有这些体验看起来都很棒但在完全沉浸模式下它们才真正大放异彩完全沉浸模式能让其他 App 退到背景让视频内容占据焦点这几类视频都有各自的方式能以完全沉浸模式显示 3D 视频会停靠在环境中而屏幕会向后移动并放大这是我最喜欢的观影方式对于 2D 和 3D 影片都是如此
要了解如何为你的 App 添加停靠效果请观看标题为 “在自定 App 环境中提升视频播放效果和沉浸感”的视频
空间视频可以展开进入沉浸式展示根据对象的实际大小来进行内容的缩放边框的边缘会消失内容无缝融入到现实世界中让人感觉就像置身于内容之中而不仅仅是在观看内容
空间视频能让观看者完全沉浸其中只需轻点右上角的 Immersive 按钮即可
还可以通过底部的退出按钮收起全沉浸式显示
从而回到窗口式展示这种显示方式支持在共享空间中使用其他 App 进行多任务处理
对于 Apple Immersive 视频视频将展开进入原生体验视频画面会围绕观看者来显示并完全停用透视让观看者置身于操作内这为专业创意叙事开辟了全新可能能够以可实现的最高保真度带给观看者身临其境的体验
3D 视频、空间视频和 Apple Immersive 视频共同构成了一个丰富多彩的立体内容生态系统其中每一类视频所适合的场景各不相同而 visionOS 提供的立体媒体体验除了上述视频之外还有空间照片这类媒体使用的传送门和沉浸式展示与空间视频相同开发者还可以使用 API、AVFoundation 和 RealityKit 打造自定视频体验此外立体视觉给照片和视频带来的提升也同样适用于实时 3D 内容也能产生令人惊叹的效果交互式内容的立体效果尤其惊艳如需详细了解如何实现这样的效果请观看视频 “将 iOS 或 iPadOS 游戏移植到 visionOS”
现在我们知道了什么是空间媒体接下来看看如何在 App 中添加它们在这一部分中我们将介绍 API 的三个新领域空间视频录制、空间媒体文件的检测和载入以及在 visionOS 上内容展示方式的不同选项通过这一部分你会注意到空间媒体没有新的框架这是因为空间媒体的框架已经完全整合到大家已经熟悉并喜爱的现有 Apple 框架中包括 AVFoundation、PhotoKit、 QuickLook、WebKit 等只需编写几行代码就可以在 App 中添加空间媒体所采用的方法和其他各类媒体相同首先我们来了解一下空间视频的录制方式
在 iPhone 15 Pro 上我们将广角和超广角摄像头并排放置而不是呈对角放置通过这项变化来支持录制空间视频这意味着当用户横向握持手机时两个摄像头位于同一条水平基准线上与人眼的方向相同这样一来用户使用“相机”App 就能拍摄空间视频现在我们将公开这个 API 让任何 App 都能录制空间视频我们来看看具体操作我们将编写一些代码来录制普通的 2D 视频然后针对空间媒体进行扩展
我们将借助 AVCapture 使用以下数据流首先需要一个 DeviceInput 来表示来自相机等 CaptureDevice 的输入然后需要一个 MovieFileOutput 来管理输出并将输出写入磁盘输入和输出通过 AVCapture Connection 连接还有一个 AVCaptureSession 负责协调这些组件之间的数据流
接下来编写相应的代码首先创建 AVCaptureSession 然后创建 AVCaptureDevice 并暂时将它设为默认的 systemPreferredCamera
然后在会话中添加一个输入
在会话中添加一个输出
提交配置然后开始运行如果你以前使用过 Camera Capture API 那么你应该会觉得这个流程看起来非常熟悉如果你还没使用过这个 API 建议访问 developer.apple.com 查看 AVCam 示例代码项目
接下来我们扩展这段代码来录制空间视频我们只需要做三件事更改 AVCaptureDevice 选择一种支持的视频格式并在输出上启用空间视频录制首先更改 AVCaptureDevice 我们将使用 builtInDualWideCamera 因为空间视频需要广角和超广角摄像头同时进行流处理
接下来选择一种支持空间视频的视频格式遍历 videoDevice 中的格式检查 isSpatialVideoCaptureSupported 是否为 true 如果找到这项为 true 的格式就将它设为 videoDevice 上的 activeFormat 我们需要确保恰当地锁定和解锁 videoDevice 接下来添加一些错误处理方法如果没有找到任何符合条件的空间格式就会返回 false
最后我们来检查是否支持空间视频拍摄如果支持就将 isSpatialVideoCaptureEnabled 设为 true 请注意这种方法仅适用于 iPhone 15 Pro 而且 isSpatialVideoCaptureSupported 在其他设备上会返回 false 在这种情况下你需要恰当地处理错误
这样就可以了！只需完成这三处小改动就可以开始录制空间视频了！所有复杂的同步、摄像头校准、编码和元数据写入都通过抽象处理得以省略你可以直接在磁盘上获得来自 movieFileOutput 的完整空间视频文件就是这么简单而除此之外我们还可以添加两项功能来进一步提高录制质量经过改进的视频防抖功能和出色的预览功能让我们来看看该如何实现
为了实现最佳防抖效果将 preferredVideoStabilizationMode 设为 cinematicExtendedEnhanced 这样就能延长预查窗口期并在画面中裁剪更多区域从而让视频变得更加流畅我们都希望拍出流畅的视频但在使用 visionOS 时尤其重要因为设置的虚拟屏幕尺寸也许远大于其他设备
可以使用 AVCaptureVideoPreviewLayer API 获取预览视频流这种方法与其他视频格式的处理方法相同但是由于 iPhone 的显示屏采用了单眼成像技术因此无法提供空间视频预览所以无论设备方向如何预览都会始终显示广角摄像头拍摄的画面
请务必注意用于拍摄空间视频的两个摄像头即广角和超广角摄像头实际上是不同类型的摄像头！广角摄像头是 iPhone 上常规摄影表现最出色的摄像头而超广角镜头经过优化能够以非常广阔的视角进行拍摄也能进行特写对焦两个摄像头收集光线的能力以及最小焦距各不相同拍摄空间视频时在大多数情况下这些差异不太明显这要归功于我们用来修正空间视频的计算摄影技术但是在弱光条件下拍摄空间视频时每个摄像头的噪点水平可能会有所不同导致用户在 Vision Pro 中观看时感到不适同样如果拍摄主体与摄像头之间的距离小于最小焦距可能会导致失焦从而让观看者感到不适由于 iPhone 预览采用单眼成像因此你可能要等到稍后在 Vision Pro 上观看视频时才会注意到这些问题而到那时你试图捕捉的那个时刻可能已经过去了重新录制为时已晚为了解决这个问题我们在 AVCaptureDevice 上创建了新的 spatialCaptureDiscomfortReasons 变量你可以通过键值观察来观察 App 中的这个变量并在检测到 .subjectTooClose 或 .notEnoughLight 条件时渲染相应的引导性 UI
看这里 iPhone“相机”App 会在我距离拍摄对象太近时显示警告信息并在我向后移动后关闭警告信息我们建议你在 App 中显示一些类似的引导性 UI 现在我们已经录制了一段空间视频接下来看看如何播放第一步是空间素材的检测和载入这一步可以通过几种不同的方法实现包括 PhotosPicker、PhotoKit 和 AVAssetPlaybackAssistant
PhotosPicker API 会展示一个视图来帮助用户从照片图库中选择素材它现在支持筛选空间素材在匹配的参数中指定 .spatialMedia 它就可以对用户的图库进行筛选仅显示空间照片和空间视频
如果你不需要用户进行输入则可以使用 PhotoKit 以编程方式获取用户照片图库中的所有空间素材在构建 fetch 谓词时只需将 spatialMedia 设置为 PHAssetMediaSubtype
还可以将 fetch 请求修改成仅返回空间照片或是仅返回空间视频
对于视频也可以使用 AVAssetPlaybackAssistant 可以查询它的 playbackConfigurationOptions 来确认本地空间素材如果你的 App 需要从照片图库之外的来源载入视频这个选项就会非常适合你
现在我们可以载入空间内容了我们来展示一下同样这一步也可以通过几个不同的选项来实现
QuickLook 框架中的 PreviewApplication API 支持照片和视频 Javascript 中的 Element FullScreen API 支持从网页载入空间照片 AVKit 中的 AVPlayerViewController 支持空间视频
QuickLook 是在 visionOS 上快速打开文件的系统标配方式借助新的 PreviewApplication API 现在可以在你自己的 App 中生成 QuickLook 场景来托管你自己的内容它同时支持空间照片和空间视频并且和“照片”App 一样采用全空间展示有关 PreviewApplication API 的更多信息请观看视频 “‘快速查看’新功能在空间计算中的应用”
然后是 JavaScript 中的 Element FullScreen API 它支持在“Safari 浏览器”中从网页打开空间照片和 PreviewApplication 一样照片会在新场景中打开并附带有全空间展示如需进一步了解 FullScreen API 请观看视频 “针对空间网页进行优化” 最后还有 AVPlayerViewController 这是我们的跨平台 API 用于播放各种类型的视频内容同时支持 2D 和 3D 视频所以如果你需要以一致的展示样式同时显示两种类型的内容这个选项就非常适合你它还支持空间视频的 HTTP Live Streaming
有几点要牢记使用 AVPlayerViewController 播放空间视频时视频只有在全屏模式下才会以 3D 形式显示在嵌入展示中会显示 2D 形式要让内容全屏显示最简单的方法是调整 AVPlayerViewController 的大小以匹配 WindowScene 的边框
请注意即使在全屏模式下 AVPlayerViewController 也会使用 3D 视频展示而不是空间视频展示由于空间视频构建在 MVHEVC 之上因此它们也可以用作 3D 视频 AVPlayerViewController 就是这样处理它们的如果 App 需要全空间展示请改为使用 PreviewApplication
最后在设计 App 时请尽量减少直接放置在视频顶部的 UI 元素数量整洁的 UI 有助于让观看者专注于内容并最大限度降低发生景深冲突的风险现在我们已经了解了记录、检测、载入和展示空间媒体的多种方法作为一名 App 开发者你只需使用我们刚刚介绍的 API 就能开始在你的 App 中使用空间媒体
但对于想要创作自定空间媒体的用户我们来深入了解一下这方面的知识
从文件格式层面来说空间视频是一种具有额外空间元数据的立体 MV-HEVC 视频
空间照片是一种立体 HEIC 包含了位于一个 Stereo Group 的两个图像以及一些空间元数据要了解如何读取和写入这些文件可以访问 developer.apple.com 查看两个示例代码项目和一篇文章接下来我们深入了解一下两种文件格式都常用的空间元数据空间元数据包含了以下几项信息有投影这一项定义了现实场景中的对象与图像像素值之间的关系空间照片和视频始终使用直线投影然后还有基准线和视角这几项描述了拍摄空间素材的摄像头的物理属性还有视差调整这一项控制着窗口式展示中的 3D 效果此外还有一些关于应该如何创建左侧和右侧图像的准则由于这些图像特征以像素形式储存在图像中因此它们不是显式元数据栏位而且在进行空间文件检查确认时也不会强制执行这些特征但是了解这些特征仍然很重要有助于采用正确的方法来实现最佳观看体验
理想的图像特征包括左侧和右侧图像应该经过立体校正与光轴对齐并且不存在垂直视差新的技术术语可真不少为了更好地理解它们我们来看一个示例
这是蜂鸟 Howie 我们将会以它为对象拍摄空间照片为了拍摄它我使用两个水平对齐的摄像头来拍摄立体像对
两个摄像头同步拍摄各拍摄一张照片构成立体像对的左侧图像和右侧图像这两个摄像头都是针孔摄像头因此通过直线投影成像这意味着现实世界中的直线在图像中也会显示为直线
第一个元数据栏位是基准线有时称为轴间距离它定义了两个摄像头中心之间的水平距离设置基准线的最佳距离取决于具体用例设置 64 毫米左右的值可生成最接近人类视觉的图像因为我们双眼的间距往往就是这么大不过较小的值有时效果很棒尤其是在拍摄特写场景时而非常大的基准线用于拍出远处物体的景深比如在立体风景摄影中选择比较宽的基准线代价就是由于夸大景深而导致“微缩效应” 在这个示例中我将一直使用 64 毫米的基线
下一项元数据是视角这是每个摄像头拍摄范围的水平角单位是度一般来说视角值越高沉浸感就越强因为可以看到更完整的场景但是对于固定传感器来说视角越大就意味着会有越多内容分布在相同数量的像素上因此角分辨率也就越低此外由于通过直线投影成像因此当视角大于 90 度时角采样密度会变得效率低下尤其是在边缘因此建议最好不要采用大于 90 度的视角在这个示例中我要使用 60 度的视角
接下来我们来看看各种图像特征第一条准则指出图像应该经过立体校正这意味着两个摄像头的光轴是平行的如图中所示并且两个图像位于同一平面上如果摄像头的光轴像图中所示这样并不平行那么两个图像就不是共面的因此没有经过立体校正如果遇到这种情况就必须采用称为立体校正的图像处理技术来校正图像畸变
接下来我们要确保图像中心与光学中心对齐这意味着每个图像的中心像素都与光轴对齐这是针孔摄像头的默认设置但是我们可能会在不经意间以几种不易察觉的方式破坏这种对齐为了了解这个问题我们来仔细看看我们的图像
这是我们的立体像对其中图像中心与光轴对齐但如果我们裁剪图像中心像素就会改变新的中心像素不再与光轴对齐所以这个裁剪后的立体像对效果欠佳同样将图像左右移动也会改变中心像素从而打破这条准则应用这些水平位移是 3D 电影拍摄中的常见做法用于实现艺术效果但是不建议对空间媒体采取这一做法要实现这些效果可以使用视差调整元数据我们稍后还会再谈到这一项首先我们需要确保没有垂直视差要实现这一点最简单的方法就是拍摄左侧图像和右侧图像并确定两个图像共有的某个特征点在这个示例中特征点是蜂鸟的喙然后在两个特征点之间绘制一条直线如果这条直线完全水平就说明图像正确对齐不存在垂直视差
这是另一个立体像对其中摄像头没有对齐
我们可以通过标出特征点并加以连接来检查是否存在垂直视差在这里特征点之间的连线不是完全水平的这意味着两个图像存在垂直视差因此在佩戴 Vision Pro 观看时可能会让人感到不适
我们来回顾一下到目前为止的进展我们获得了左侧和右侧画面并确保它们通过直线投影成像经过立体校正、与光轴对齐并且不存在垂直视差我们也知道我们的基准线和视角
接下来我们看看内容的渲染方式这里就是奇迹发生的地方认真完成的摄像头校准过程也将在这里最终带来回报借助所提供的信息渲染器可以构建摄像头模型这个模型定义了摄像头如何拍摄现实世界中的对象
然后反向追踪这些光线以按照正确的尺寸和距离来渲染两个图像
佩戴 Vision Pro 观看时向观看者的每只眼各显示一个图像视觉系统会将这两个图像融合到 3D 场景中让观看者感知到 3D 对象如果使用准确的元数据正确地构建了文件并确保图像符合所有图像特征准则观看者双眼感知到的图像就会与摄像头拍摄到的真实对象完全匹配观看者用自己的双眼取代摄像头身临其境地重温了那一刻的场景以第一人称视角 “重温某一刻”的奇妙感受就是这样产生的
空间照片在共享空间中也同样极具感染力在这个模式下 visionOS 会在窗口中显示这些图像在缩小场景的同时仍然对场景进行立体渲染这个模式的目标不是栩栩如生地完美再现真实场景而是提供能够在艺术上和情感上引起共鸣的 3D 特效为了确保观看者在观看窗口中显示的内容时感到舒适我们引入了最后一项空间元数据视差调整如果你熟悉立体摄影就会知道视差调整是提供给渲染器的提示指出了零视差平面的放置位置这项功能有时也称为会聚调整或水平图像平移
其实它所表示的只是一个水平偏移以图像宽度的百分比进行编码负值会将左侧画面向右推动并将右侧画面向左推动正值会将它们向相反的方向推动
当图像水平移动时大脑感知的 3D 场景会沿 z 轴发生景深变化负值会让内容看起来更靠近观看者而正值则会将内容推向更远的位置设置这个值时要小心谨慎！如果负值太大可能会造成景深冲突而如果正值太大可能会导致双眼视线分散特别是对于背景中的对象这可能会让观看者感到不适对于这个场景我将选择一个值来将蜂鸟放置在窗口正面上方即使只移动图像宽度的百分之几也足以极大地改变观看者对图像的感知因此在选择视差调整的值时请务必戴上 Vision Pro 进行测试现在我们可以添加水平视差调整了完成这一步之后我们就拥有了构建空间素材所需的所有输入最后只剩下一件事那就是将这些数据包装到恰当的文件格式中立体 MV-HEVC 适用于视频而立体 HEIC 适用于照片
现在我们最终的作品可以在 Apple Vision Pro 中正确渲染并且无论在窗口式展示中还是在完全沉浸模式下都呈现出了令人惊叹的视觉效果
我们来总结一下在这个讲座中我们了解了 visionOS 上的多种立体媒体类型： 3D 视频、Apple Immersive 视频以及空间照片和视频我们探索了如何在 App 中拍摄、检测和显示空间照片和视频我们还了解了如何创作自己的空间媒体并利用准确的元数据和精确对齐的图像在 Vision Pro 中提供出色体验
以上就是今天的内容！我迫不及待想要看到大家使用空间媒体打造出各种令人惊叹的全新体验

6:19 - Spatial video capture on iPhone 15 Pro

class CaptureManager {
    var session: AVCaptureSession!
    var input: AVCaptureDeviceInput!
    var output: AVCaptureMovieFileOutput!

    func setupSession() throws -> Bool {
        session = AVCaptureSession()
        session.beginConfiguration()

        guard let videoDevice = AVCaptureDevice.default(
            .builtInDualWideCamera, for: .video, position: .back
        ) else { return false }

        var foundSpatialFormat = false
        for format in videoDevice.formats {
            if format.isSpatialVideoCaptureSupported {
                try videoDevice.lockForConfiguration()
                videoDevice.activeFormat = format
                videoDevice.unlockForConfiguration()
                foundSpatialFormat = true
                break
            }
        }
        guard foundSpatialFormat else { return false }

        let videoDeviceInput = try AVCaptureDeviceInput(device: videoDevice)
        guard session.canAddInput(videoDeviceInput) else { return false }
        session.addInput(videoDeviceInput)
        input = videoDeviceInput

        let movieFileOutput = AVCaptureMovieFileOutput()
        guard session.canAddOutput(movieFileOutput) else { return false }
        session.addOutput(movieFileOutput)
        output = movieFileOutput

        guard let connection = output.connection(with: .video) else { return false }
        guard connection.isVideoStabilizationSupported else { return false }
        connection.preferredVideoStabilizationMode = .cinematicExtendedEnhanced

        guard movieFileOutput.isSpatialVideoCaptureSupported else { return false }
        movieFileOutput.isSpatialVideoCaptureEnabled = true

        session.commitConfiguration()
        session.startRunning()
        return true
    }

}

9:13 - Observing spatial capture discomfort reasons

let observation = videoDevice.observe(\.spatialCaptureDiscomfortReasons) { (device, change) in
    guard let newValue = change.newValue else { return }
    if newValue.contains(.subjectTooClose) {
        // Guide user to move back
    }
    if newValue.contains(.notEnoughLight) {
        // Guide user to find a brighter environment
    }
}

9:58 - PhotosPicker

import SwiftUI
import PhotosUI

struct PickerView: View {
    @State var selectedItem: PhotosPickerItem?
    var body: some View {
        PhotosPicker(selection: $selectedItem, matching: .spatialMedia) {
            Text("Choose a spatial photo or video")
        }
    }
}

10:14 - PhotoKit - all spatial assets

import Photos

func fetchSpatialAssets() {
    let fetchOptions = PHFetchOptions()
    fetchOptions.predicate = NSPredicate(
        format: "(mediaSubtypes & %d) != 0",
        argumentArray: [PHAssetMediaSubtype.spatialMedia.rawValue]
    )
    fetchResult = PHAsset.fetchAssets(with: fetchOptions)
}

10:36 - AVAssetPlaybackAssistant

import AVFoundation

extension AVURLAsset {
    func isSpatialVideo() async -> Bool {
        let assistant = AVAssetPlaybackAssistant(asset: self)
        let options = await assistant.playbackConfigurationOptions
        return options.contains(.spatialVideo)
    }
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

章节

资源

相关视频

WWDC24

WWDC23