在自定环境中提升媒体观赏体验的沉浸度

使用 Docking Region、Reverb 和 Virtual Environment Probe 等 Reality Composer Pro 组件，扩展你的媒体观赏体验。了解如何利用 Reflections、Tint Surroundings Effect、同播共享以及 [Immersive Environment Picker] 进一步提升沉浸度。

章节

资源

相关视频

WWDC24

下载

大家好我叫 Jonathan 来自 Apple visionOS Program 团队今天我们将探讨如何利用 Apple Vision Pro 为你的媒体观看体验带来影院般的壮观奇妙感受

就像在你最喜欢的电影院里将灯光调暗后带来一种奇妙的感觉一样现在只需在你的自定环境中投射出美妙的媒体影像反射就能打造出更具沉浸感的体验正如你在这里的新 Studio 环境中从 Destination Video 样本中看到的那样灯光变暗后你可以设置透视色调来增强视觉氛围这样观众的手就能与你环境中的灯光完美融合还可以设置混响预设让环境中的音频效果氛围感十足看到媒体与环境之间的平滑过渡了吗？你还可以选择提供多种变体来丰富场景的观感同时系统照明功能和阴影融合搭配使用在你的自定环境中打造全方位的观看体验

在这个讲座中我将介绍一些基础方面助你打造出色的媒体观看体验给观众带来更具沉浸感的播放体验我将展示如何使用 Reality Composer Pro 中新的自定 Docking 组件来定义自定环境中视频播放的理想位置我们将了解在自定环境中播放视频时的媒体影像反射我还将带你了解如何利用视觉元素和音效在你的自定环境中打造整体观看体验我们还将介绍如何使用 Immersive Environment Picker 让你的自定环境更容易被用户发现最后我将介绍支持同播共享的 App 如何同步环境让多位参与者共享沉浸式观看体验我们先来了解一下你的空间和媒体观看体验的基本元素

在一个可以调整尺寸和位置的窗口中观看媒体本身就是一种很棒的体验但 Apple Vision Pro 的沉浸式功能为你带来的远不止于此为了让视频观看体验更具沉浸感你应该从 ImmersiveSpace 场景类型入手并充分利用 AVKit 中的各项功能 ImmersiveSpace 场景类型效果出色因为它能让媒体 App 为观众提供可自定的渐进式沉浸体验这意味着观众可以通过旋转 Apple Vision Pro 上的数码旋钮来设置所需的沉浸度范围从现实环境一直到完全沉浸式环境 ImmersiveSpace 场景类型还有其他优势如自定色调和透视亮度我们将在这个讲座的稍后部分中再作相关介绍

如需进一步了解如何自定你的沉浸式空间请观看“深入探究空间容器和沉浸式空间”这个讲座

要打造出色的 visionOS 媒体观看体验建议充分利用 AVKit 中的功能特别是 AVPlayerViewController 这个功能与系统整合在一起可增强视频播放功能

使用 AVPlayerViewController 可支持 HLS 流媒体从而能够轻松提供可与“TV”和“音乐”等系统 App 相媲美的熟悉播放体验简化的播放控件让观众能够专注于媒体在 visionOS 上全屏显示 AVPlayerViewController 提供了诸多强大的功能其中之一就是参与系统停靠行为 Docking 功能可将视频屏幕置于固定位置从而提升沉浸式空间中的全屏体验默认情况下系统会确定停靠位置但现在可以通过指定自定停靠区域来自定停靠位置你可以在 Destination Video 样本中看到自定停靠区域的使用情形这个示例以 AVKit 和 ImmersiveSpace 为基础构建而成我将展示如何使用 Reality Composer Pro 中的 Docking Region 组件将视频置于自定环境中的理想位置我已经打开 Reality Composer Pro 你应该使用 Reality Composer Pro 准备 3D 内容并直观地呈现你的体验我将使用 Reality Composer Pro 在这个新项目中添加“Video Dock”预设左侧是场景导航器在场景导航器的底部有一个加号表示插入按钮选择插入按钮然后在 Environment (环境) 菜单中选择“Video Dock”预设

现在可以在视口中看到 “Video Dock”预设的部分内容通过这个视口我可以直观地呈现、浏览和预览 3D 场景使用 Viewport (视口) 菜单中的 “Frame Scene” 这样就能更好地查看整个“Video Dock”预设回到场景导航器中展开“Video Dock”实体后可以看到其中包含一个 Player 实体

选择 Player 实体后 Inspector 右侧会显示新的属性使用 Inspector 你可以轻松编辑 Player 实体的属性比如 Position 和 Rotation

Player 实体对应的Inspector 底部还包含一个 Docking Region 组件这样我就可以自定 Docking Region

在自定 Docking Region 之前选择 Viewport (视口) 菜单中的 “Reset Camera”

这将移动摄像头这样就能看到原点

ImmersiveSpace 是一个场景因此它隐式定义了自己的坐标系你在空间中放置的所有内容都会相对于空间的原点进行放置而空间的原点就在观众下方当空间首次打开时原点就会靠近他们的脚部在视口的中心可以看到 Docking Region Docking Region 的位置决定了视频播放器的位置

我想相对于原点放置我的 Docking Region

回到 Inspector 可以看到 Docking Region 组件中的 Width 属性 Docking Region 的宽度定义了一个边界区域这是采用 2.4:1 的宽高比进行媒体播放的最大尺寸大于最大宽度的视频将进行缩放以适合边界区域我可以更改 Width 属性来自定 Docking Region 的尺寸你可以看到更改 Docking Region 的宽度时高度也会随之更改

我的 Docking Region 现在增加了宽度和高度我需要升高 Player 实体我将更改位置变换来升高它播放器略高于地面的位置感觉很合适就像电影院里的银幕一样

这只是一个项目的开端下面我们来看看更完整的项目内容在 Destination Video 样本中你会看到一个名为 Studio 的文件夹里面有一个 Reality Composer Pro 项目打开 Studio 项目以查看它的设置然后在 Viewport (视口) 菜单中选择“Reset Camera”以便进行预览

你可以看到 Studio 中 Docking Region 的放置情况以便尽量减少观众与媒体播放之间的对象数量这样做的目的是为观众提供清晰的视野

Studio 具有对称感并且从建筑思维的角度来说 Docking Region 被安排在空间中的这个位置是有原因的这样进行放置旨在优化空间使媒体播放适合这个房间空间并提供更具沉浸感的体验

确保你设计的自定环境能够容纳停靠区域我们建议提供一个舒适的视角以避免在长时间观看时造成疲劳或不适虽然使用 Reality Composer Pro 进行预览很有帮助但一定要在 Apple Vision Pro 上查看环境和停靠位置因为显示器和 Apple Vision Pro 之间对比例和布局的感知可能大相径庭在设备上进行测试是最可靠的方式现在我已将 Docking Region 放置在理想位置下面我们来看看视频播放如何在自定环境中反射影像

回到 Destination Video Studio 表面上的媒体影像反射有助于显示媒体的播放位置并将媒体置于这一空间中你可以使媒体影像反射适合你的自定环境它将帮助观众了解视频在你的虚拟空间中的播放位置

在 Reality Composer Pro 的 ShaderGraph 节点中有两种媒体影像反射即镜面反射和漫反射反射在媒体内容与虚拟空间之间创造互动从而增强了真实感和沉浸感可利用这些反射作为深度线索让观众了解屏幕在自定环境中的位置这有助于将焦点放在视频播放上镜面反射可直接反射视频内容适用于金属、镜子和水等高光表面

要设置媒体影像镜面反射只需要在场景中设置一个实体其中包含一个 Docking Region 组件和一个连接了 Reflection_Specular 节点的表面上的材质 RealityKit 将使用 Docking Region 位置和地面的纹理坐标来计算反射并将反射的媒体影像渲染到你的表面上漫反射可使视频内容的衰减更柔和

适用于木地板或混凝土等较粗糙的有机表面 Video Dock 预设中提供的实现只是一个示例如果移动 Docking Region 将实体置于地面或使用自己的网格则需要重新计算 Reflection_Diffuse 的纹理坐标并将这一数据导入 Reality Composer Pro 中

Studio 使用的是漫反射因为较柔和的衰减更适合地板材料特性在 Studio 中加入镜面反射只是为了演示目的你应查看 visionOS 系统环境中的示例它们以更平衡的方式整合反射从而与媒体和环境相得益彰同时又不会造成干扰还有很多东西需要学习因此我建议查看 Destination Video 样本和支持材料深入了解如何启用镜面反射和配置漫反射接下来我们来看看如何利用视觉元素和音效在你的自定环境中打造整体观看体验我们将使用一些新功能如 Virtual Environment Probe、 Brightness and Tint 以及 Reverb 首先我们来了解一下 Virtual Environment Probe

Virtual Environment Probe 根据颜色变化和照明强度来描述一个位置系统可利用这些信息对任何基于物理的渲染材质进行自动遮光这与光线从物体上反射的方式非常接近你可以使用这个 Probe 为 ImmersiveSpace 中的对象提供环境照明如果你使用 progressive 沉浸样式打造环境这种虚拟环境照明将逐渐取代 ImmersiveSpace 之外的对象的现实世界照明例如这个金属球反射了 Studio 和我的现实世界环境的混合从而呈现出了一个效果逼真的对象在 progressive 沉浸模式下看起来很自然

此外如果你的场景支持两种变体比如 Destination Video 中的深色和浅色 Studio 你可以使用两项预生成的环境资源以及它们之间的混合因子来配置 Virtual Environment Probe 在这种情况下你的 App 代码可推动深色资源和浅色资源之间的平滑过渡而系统则推动沉浸式融合过渡时间最好较短在 visionOS 系统环境中从深到浅的过渡时间为 1.5 秒接下来是 Brightness and Tint 根据自定环境的外观你可能希望观众手上的照明与环境照明完美融合就像电影院里灯光变暗时一样在 visionOS 中你可以自定色调和亮度以柔化观众周围环境与媒体播放之间的边缘同时还能让他们的手看起来与你的体验融为一体

看到我的手的外观是如何变化以匹配深色版的 Studio 了吗？这让我在自定环境中更具沉浸感专注于观看体验

请查看 Destination Video 中的 immersiveContentBrightness 和 surroundingsEffect 代码示例了解如何在媒体 App 中使用这些功能尝试使用浅色调既能增强沉浸感又不会分散观众的注意力虽然这些改进后的视觉效果已经使你的环境看起来不错但你还可以使用 Reality Composer Pro 中的 Reverb 新组件让你创作的空间音效和系统音效都能更好地匹配你的自定环境从而进一步提升沉浸感

在现实世界中声音会产生混响在到达人的耳朵之前会在墙壁和家具上反弹默认情况下 visionOS 通过模拟用户所处现实环境的声学效果对空间音频源进行混响处理

还可以模拟虚拟环境的混响效果如果你访问过 Mount Hood 系统环境就有可能听过深夜的青蛙叫声这些空间音效具有混响效果可以模拟室外环境现在你可以在自定环境中为空间音效和系统音效应用混响效果要启用“Reverb” 我将使用 Add Component (添加组件) 按钮在 Inspector 中向我的新项目添加“Reverb”组件

然后我就可以进入 Inspector 选择最适合的混响预设预设是一系列精选的高质量自然混响设置可增加共鸣并模拟在与我的自定环境相似的环境中聆听空间音效的体验建议在自定环境中选择一种混响预设即使它不提供自定音频这样系统就可以使用相应预设来对 UI 和按钮等系统音效进行空间化处理这些系统音效是在运行时出现的空间音频源

例如使用 “Medium Room (Treated)”预设来提升应用微妙混响后的最佳聆听体验或者如果你的自定环境是室外空间则使用“Outdoor”预设又或者如果你有一个大型室内环境还可以使用 “Very large room”混响预设这也是 Studio 中使用的混响预设如需详细了解如何实现和调整混响请观看名为“使用 RealityKit 增强你的空间计算 App”的 RealityKit Audio 讲座你已经了解如何在自定环境中增强媒体播放的沉浸感现在可以使用 Immersive Environment Picker 让你的自定环境与 visionOS 系统环境显示在同一列表中我们来详细了解一下看看 Immersive Environment Picker 如何在我们的 Studio 环境中包含 Destination Video 的新部分

选择 Studio 打开相应环境将媒体停靠在它的停靠区域中你也可以将自己的自定环境添加到这个列表中只需通过元数据如标题和图像对自定环境进行声明让观众在停靠时发现你的环境

在视图上使用 .immersiveEnvironmentPicker 修饰符将你的沉浸式环境添加到这个视图内的视频播放器在这里你可以声明你的每个自定环境在这个 Picker 中的显示方式选择每个环境后即可添加标题、图像以及要打开的沉浸式空间

下面我们来谈谈同播共享如果你已在使用同播共享来同步媒体那么现在 AVKit 还能同步环境状态让用户进一步分享沉浸式观看体验我们来看看具体过程这个代码片段使用 GroupSession 在设备之间同步可共享内容要同步会话中的媒体请将它传递给 AVPlayer 的 AVPlaybackCoordinator 要同步同一会话中的观看环境首先导入 AVKit 和 GroupActivities 然后将这个会话传递给 AVPlayerViewController 的 AVGroupExperienceCoordinator 现在当活动参与者全屏观看时他们就可以共享同一个观看环境

你刚刚了解了如何使用 ImmersiveSpace 场景类型和 AVKit 助你打造出色的播放体验如何利用 Custom Docking Region 和 Media Reflections 增强沉浸感然后利用 Virtual Environment Probe、 Reverb 和 Brightness and Tint 打造出色的观看体验使用这些功能来增加沉浸感可以让观众感觉自己就在你的空间里充分体验到真实感并享受你想给他们带来的精彩体验记住要确保受众能够清晰舒适地观看媒体内容不受干扰这样他们才能专注于体验我们还展示了如何开始使用 Immersive Environment Picker 和同播共享希望这个讲座能帮助大家初步了解如何让媒体播放体验更具沉浸感请务必更深入地查看 Destination Video 样本和可供观看的多个讲座我迫不及待地想体验在你创造的自定环境中身临其境地观看媒体播放

15:14 - Add environments to the Immersive Environment Picker

WindowGroup {
            ContentView()
                .immersiveEnvironmentPicker {
                    ForEach(viewModel.environmentItems) { item in
                        Button(item.title, image: item.thumbnail) {
                            Task { 
                                await openImmersiveSpace(id: item.id)
                            }
                        }
                    }
                }
        }

15:47 - Synchronization of an environment state using SharePlay

import AVKit
import GroupActivities

   for await session in MyActivity.sessions() {
        
        // join the session, activate the activity, etc.

        playerViewController
            .player?
            .playbackCoordinator
            .coordinateWithSession(session)

        playerViewController
            .groupExperienceCoordinator
            .coordinateWithSession(session)
    }

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