开发你的第一款沉浸式 App

♪ 悦耳的器乐嘻哈 ♪ ♪ 大家好 我是 Peter 在 Apple 的 RealityKit Tools 团队工作 今天 我们来研究如何开始 开发你的第一款沉浸式 App 空间计算提供了全新的 展示内容的方式 并将更深层次的沉浸感 融入到你的 App 中 虽然这是个新平台 但构建 App 所用的工作流程 可能你已经很熟悉了 在本课程中 我们开始时会先在 Xcode 中 创建一个新的 App 项目 我们会看到模拟器如何让你 在模拟场景中体验 App 并且你可以使用 Xcode Previews 进行快速迭代 我们将介绍 Reality Composer Pro 这是一个新工具 可以帮助你为 App 准备 并预览空间内容 最后 我们将展示 App 如何创建一个沉浸式场景 并将 SwiftUI 手势应用于 RealityKit 实体 数百万开发者每天 都在使用 Xcode 来创建、预览、调试、 分析和准备 App 进行分发 Xcode 是创建 第一个 App 的最佳选择 我们来了解一下 Xcode 项目创建过程 并看看这个平台有哪些新内容 在 Xcode 中 创建一个新项目时 会出现新的项目助手 它会按平台和项目类型 来组织项目模板 App 项目模板 就在“平台”选项卡下的 “应用软件”部分 请注意 如果尚未安装的话 新的项目助手可能会 要求你下载平台支持 该助手给我们提供了 几个选项 其中两个是这个平台的新选项 我们详细了解一下这两个新选项 第一个新选项是“初始化场景” 可让我们指定 自动包含在 App 中的 初始场景的类型 新的项目助手会创建初始配置 其中包含你在这里 选择的单个场景类型 开发者可以稍后添加其他场景 这些场景可以与初始场景类型相同 也可以是完全不同的场景 模板提供了两个初始场景选项： Window 和空间容器 我们来看看二者之间的区别 Window 专门用于展示 二维内容 可以在平面尺寸上调整其大小 但其深度是固定的 Window 通常会与其他 正在运行的 App 一起显示 可在课程 “认识用于空间计算的 SwiftUI”中 进一步了解有关 Window 场景类型 以及对 SwiftUI 的添加 和更改的具体信息 空间容器则主要用来 展示 3D 内容 其在所有三个维度上的大小 均由 App 自身控制 而不能由使用 App 的人进行调整 和 Window 一样 空间容器通常会 与其他正在运行的 App 一起显示 课程 “将 SwiftUI 带入下一个维度” 介绍了有关空间容器 场景类型的更多信息 第二个新选项是 Immersive Space 可以用它给 App 添加 初始沉浸式内容 将 Immersive Space 场景类型添加到 App 中后 就可以用它来展示无界限内容 在无限画布的任何地方都可以做到 你的 App 激活此场景类型后 它会从“共享空间” 转移到 Full Space 在 Full Space 中 其他正在运行的 App 将被隐藏 避免分散人的注意力 你的 App 还可以 访问专用的渲染资源 并请求用于 启用 ARKit 功能的权限 如手部跟踪 如果你希望为 App 创建 沉浸式体验 SwiftUI 给你的场景 提供了三种不同的样式： 混合沉浸、渐进沉浸、 完全沉浸 混合沉浸样式能让你的 App 在 Full Space 中放置 无边界的虚拟内容 同时通过穿透将人们与周围环境 连接起来 渐进沉浸样式通过一个传送门 给用户提供更沉浸的体验 但不会完全将用户 从周围环境中隔离出来 通过这种方式 人们可以大致看到 沉浸式内容的180度视图 还可以使用数字表冠 来调整“传送门”的大小 完全沉浸样式隐藏了穿透 并将用户置于 App 环境中 将他们带到一个新的地方 我们将在本次课程之后 更详细地讨论 Immersive Space 如果你想深入了解 请观看课程 “用 SwiftUI 超越窗口” 默认情况下 App 不会添加 任何 Immersive Space 当你选择“无”选项时 这就是系统操作 但是 如果你选择了其中一个 Immersive Space 选项 模板将自动添加 第二个 SwiftUI 场景 其中包含你选择的 Immersive Space 样式 默认情况下 它还会 在 Window 场景中提供一个 SwiftUI 按钮 让用户打开沉浸式内容 通常情况下 我们建议 App 在此平台上始终 从 Window 开始 提供清晰的进入和退出控件 用户可以决定何时 更加沉浸地体验你的内容 避免在用户不知情的情况下将其带入 更有沉浸感的体验 我们来为本次课程配置项目 先从一个初始空间容器开始 没有 Immersive Space 像往常一样创建我们的项目 为其命名 并告诉 Xcode 保存在哪里 创建完成后 新项目随即打开 在左侧 我们可以看到 Xcode 的项目目录 第一个文件是 MyFirstImmersiveApp.swift 它为 App 声明了 一个窗口组 用于展示初始空间容器 窗口组与 iOS 上看到的 结构相同 指定了 App 展示的 顶级 SwiftUI 视图 第二个文件是 ContentView.swift 这是在初始空间容器 展示的视图 项目打开时 ContentView.swift 在 主编辑器中显示 Xcode 还展示了 ContentView 的预览 它加载了 RealityKit 内容包的内容 内容包已自动包含在项目中 新项目的大部分代码 都在 ContentView 中 ContentView 使用了 几个新的平台特定功能 我们来详细看看 ContentView 是 SwiftUI 视图的名称 由空间容器显示 它定义了一个 名为“enlarge”的 SwiftUI 状态属性 作为 SwiftUI 视图 我们的内容 由 body 属性提供 body 由两个嵌套在 一个 VStack 中的视图组成 VStack 使嵌套视图 在垂直方向上堆叠 第一个嵌套视图 是 RealityView RealityView 是这个平台的新功能 我们稍后再说这个 第二个嵌套视图是一个标准的 SwiftUI Toggle 视图 嵌套在另一个 VStack 中 Toggle 视图可切换 enlarge 属性的值 VStack 提供 glassBackgroundEffect 确保按钮可读 且易于交互 如果你使用过 SwiftUI 你很有可能 已经见过 Toggle 视图 已在其他平台上受支持的 大多数 SwiftUI 控件 都可以正常运行 稍后 我们将看到如何使用手势 来切换 enlarge 属性 首先 我们详细了解一下 RealityView RealityView 可以将 Reality 内容 放入 SwiftUI 视图层次结构中 在 ContentView 中使用的 RealityView 初始化定式 接受两个闭包作为参数 一个是制作闭包 另一个是更新闭包 制作闭包将初始的 RealityKit 内容 添加到视图中 它会尝试加载 RealityKit 的内容包 如果成功 它就会使用 content.add 将加载的内容 添加到视图中 我们还可以通过程序生成初始内容 或者使用程序生成 和加载内容的组合 更新闭包是可选的 但如果使用了 系统将在 SwiftUI 状态 发生更改时调用它 更新闭包先从 content.entities 中获取第一个实体 因为在制作闭包中添加的就是它 然后根据 SwiftUI 状态中 enlarge 属性的值 来选择缩放因子 并将该缩放 应用于实体 值得注意的是 RealityView 的更新闭包 不是一个渲染更新循环 不会在每一帧都被调用 相反 更新闭包 仅在 SwiftUI 状态发生变化时 才会被调用 最后 RealityView 附加了一个手势 点击 RealityKit content 时 它会切换 enlarge 属性的值 产生与 Toggle 视图 相同的效果 我们之前介绍过这个视图 要进一步了解 关于 RealityView 和手势的信息 可以观看课程 “使用 RealityKit 来构建空间体验” 现在我们已经 了解了 ContentView 接下来我们介绍一下模拟器 并展示如何在模拟场景中导航 并与运行中的 App 进行交互 然后我们将看到 App 在模拟器中的效果 模拟器 会以一个窗口的形式呈现 如果你之前在其他平台上 使用过 应该很熟悉了 首次启动时 会看到应用程序启动器 模拟器模拟了一个佩戴着设备的人 所看到的东西 默认情况下 鼠标指针可控制你看到的内容 点击鼠标或触控板是模拟轻触 按住点击是模拟捏放手势 空间计算的关键是能够观察 和移动周围的环境 模拟器提供了 额外的控制功能来实现这一点 在模拟器窗口的右下角 有几个按钮 用于控制 模拟设备 点击并按住鼠标或触控板上的按钮 可以观察周围的环境…… 平移…… 旋转…… 以及前后移动 点击并按住这些控件 可以快速在交互内容 和观察及移动之间进行切换 你也可以点击这些按钮 以便切换到给定的控制模式 这样就不用一直按住鼠标按钮 例如 如果我点击平移按钮 然后点击并拖动视口 可以实现平移视图 点击最左边的控件 可以切换回控制外观和轻触 模拟器带有几个模拟场景 可以使用这些场景来查看 App 在不同房间 和光照条件下的运行情况 你可以通过工具栏上的模拟场景菜单 在场景之间切换

有关使用模拟器的更多信息 请参阅 developer.Apple.com 上的文档 现在我们了解了模拟器 接下来了解一下 我们的新 App 的运行情况 通常 我们会 在 Xcode 运行 App 方法是在“产品”菜单中 点击“运行” App 启动后 我们就会看到中 显示 RealityKit 的 内容包 点击 “放大 RealityView 内容”按钮 会放大内容 再次点击 会恢复到原始大小 我们还可以点击球体来将其放大 因为 RealityView 中 有对应手势

点击球体后 按钮的高亮状态会发生变化 点按手势 会更新 SwiftUI 的状态 从而使 RealityView 和 Toggle 视图 都能够对状态的变化做出响应 Xcode 预览可让你快速专注 并迭代 App 视图的 外观和行为 在编辑包含了 SwiftUI 的 PreviewProvider 的 源文件时 预览画布将自动 在 Xcode 中打开 与模拟器类似 Xcode 预览 会作为模拟设备视图呈现 你可以使用相同的控件 来导航预览窗口 就像你在模拟器中使用的那样 我们用这些控件 将内容移动得更近一些 还可以更改模拟场景 和相机角度 这些都能通过右下角的控件来实现 我们可以修改 SwiftUI 代码 并实时看到预览更新 我们继续 将 Toggle 中的内容 改为“Change Size” 请注意 当我们改变文本时 预览会更新 同时 注意到按钮 在 Xcode Previews 中 仍然可用 我们可以使用这个功能来迭代 RealityView 闭包中的内容 Xcode Previews 还有许多高级功能 包括对象模式 可以让你发现 能拓展现有 App 功能的内容 以及自定义相机角度 欲了解更多关于 Xcode Previews 的内容 请阅读开发者文档 我们创建了一个新的工具 帮助你处理 RealityKit 内容包 Reality Composer Pro 是一个很好的工具 可以让你准备和预览 App 中的空间内容 App 的 ContentView 会使用 RealityView 从 RealityKit 内容包中加载内容 模板创建的内容包名为 RealityKitContent 位于 Xcode 项目中的 Packages 目录下 这里可以看到我们的项目 选中了 RealityKitContent RealityKit 内容包 就是 Swift 包 其中已经包含了 RealityKit 内容 在构建时会对 RealityKit 内容包进行处理 以便优化内容 供运行时使用 如果我们点击 RealityContent 的披露指示器 可以看到内容包中的内容 我们点击有立方体 图标的 Package, 可以预览内容包的一个场景 要编辑内容包 请点击右上角的 Open in Reality Composer Pro 按钮 随即会启动 Reality Composer Pro 当 Reality Composer Pro 启动时 可以看到 ContentView 加载的 3D 内容 Xcode 主要用来编辑源文件 和 App 资源 而 Reality Composer Pro 重点在 3D 内容上 它的主要视图是 3D 视口 可以使用 类似模拟器中的控件进行导航 Reality Composer Pro 将其内容组织成场景 项目模板中包含的内容包 只有一个场景 为了改进项目 我们来创建一个新场景 包含 Immersive Space 的内容 在 Reality Composer Pro 的 “文件”菜单中 选择“新建”>“场景” 对其命名 这里我们简单地 改为 ImmersiveScene 然后点击“保存” 创建场景后会自动打开 我们会在窗口底部的 “项目浏览器”看到空场景缩略图 我们可以点击窗口顶部的文件名 来切换场景 或者双击“项目浏览器” 我们现在可以添加沉浸式内容 到新场景中 配置 Xcode 项目时 我们提到过 可以使用 SwiftUI 的 ImmersiveSpace 在你周围的任何位置 呈现无边界的内容 关于这种场景类型 还需要了解两个关键细节 首先 与 Window 和空间容器场景类型不同 ImmersiveSpace 使用你的脚来推断位置 作为内容的原点 在这个坐标系统中 正 X 轴是向右的 正 Y 轴是向上的 负 Z 轴是面向你的方向 其次 在 Full Space 中 运行的 App 可以请求访问额外的数据 例如 手的精确位置和方向 请注意 其中一些数据涉及隐私 如果你的 App 请求涉及隐私的数据 用户会收到提示 同意这个请求 这点在共享空间中的 App 不可用 如需有关可用的其他数据 和呈现 Immersive Space 的 App 隐私注意事项的 更多信息 请参考课程 “了解适用于空间计算的 ARKit” 现在我们已了解如何创建 沉浸式体验 现在来组合一些 在 ImmersiveSpace 中 能够运行良好的内容 我有一个 USDZ 云模型 我们将使用它来创建 一些适合沉浸式体验的内容 要将 USDZ 模型添加到 Reality Composer Pro 场景中 请打开“文件”菜单 点击“导入” 然后选择文件 注意 USDZ 模型 会出现在“项目浏览器”中 要将其添加到场景中 只需拖放到视口 你还可以从 Finder 窗口 直接拖放 USDZ 文件到视口 同时导入并将其添加到场景中 现在 让我们 在沉浸式场景中放一朵云 我们可以通过选择物体 并使用出现的控制手柄来移动对象 或者也可以在右侧的 “检查器”面板中 手动设置值 由于这种场景类型 使用你的脚来推断位置 作为原点 我们应该把云定位在 它一出现 我们马上就能看到的地方 在这种情况下 我们将其放在 前面略微向右 稍高于眼睛水平位置 我希望这朵云稍微偏向右边 正 X 轴是向右的 所以我们将 X 轴的值设为 50 注意 当我们进行这项更改时 云朵会移出视口 要再次显示 请双击左侧的 场景结构中的云朵文件 云朵再次可见后 思考一下 Y 坐标 我们希望云朵出现在我们上方 所以将它放置在 200 厘米的高度上 这大约是离地面 1.98 米的高度 云朵再次离开视口 将其带回视野 应该将云朵放在我们的前方 这样就不必直视上方才能看到它 距离我们较远的方向是负 Z 轴 所以我们将 Z 轴位置 设置为 -200 厘米 再次在场景层次结构中双击它 将其置于前方和中心位置 云朵在沉浸式场景中有些小 我们来看看如何放大 要增加缩放比例 请将圆圈向外拖动 我们希望它比导入时 大五倍 最后 来添加第二朵云 这次放在左边 我们可以使用 “编辑”菜单的“复制”命令 来复制第一朵云 将副本放在左边 将 X 坐标设置为-50

双击层次结构中的“Root” 将场景中的所有内容框定在视口中 很好 现在我们有了一个 适合沉浸式体验的场景 返回 Xcode 前 保存我们的更改 点击 “文件” 选择“全部保存” Reality Composer Pro 是一款强大的工具 可以准备、预览和集成空间内容 到你的 App 中 有关更详细的介绍 请观看课程 “了解 Reality Composer Pro” 课程 “在 Xcode 中使用 Reality Composer Pro 内容” 以第一个课程为基础 并介绍了如何 将 RealityKit 内容包中的内容 与你的 App 紧密融合 下一步是要在 App 中呈现 我们创建的沉浸式内容 App 展示的场景 位于源文件 App.swift 中 以项目名称为前缀 我们来详细看一下 也许你想问 我们的 App 如何知道要展示 ContentView 我们看到 App 使用 一个单独的窗口组 来展示 ContentView 作为空间容器的内容 窗口组是一个场景 它创建一个或多个 Window 或空间容器 来呈现给定的视图 而 body 属性中的第一个场景 就是 App 启动时 呈现的场景 并且你可以在第一个场景之后 添加其他场景到你的 App 中 我们希望 App 呈现一个沉浸式空间 其中包含我们刚刚在 Reality Composer Pro 中创建的内容 该空间将显示一个新视图 名为 ImmersiveView 我们将其添加到 App 中 我们需要为空间分配一个 ID 我们选择了字符串 “ImmersiveSpace”作为其 ID 稍后 在打开空间时 将使用该 ID 让我们将这段代码添加到 项目的 App.swift 源文件中 然后在 ImmersiveView 中 添加代码 加载我们在 Reality Composer Pro 中创建的新场景 我已经使用 Xcode 中的 SwiftUI 视图模板 将 ImmersiveView.swift 添加到了项目中 在项目的 App.swift 文件中 我们添加了 ImmersiveSpace 然后 在 ImmersiveView.swift 最前面 我们引入 RealityKitContent 这样就能使用 RealityKit 内容包 我们还需要引入 RealityKit 来使用 RealityView ImmersiveView 的 默认内容 只是一个文本框 我们用 RealityView 替代 它加载了我们添加到内容包的 新场景 在左侧项目结构中 双击 ContentView 选择并复制 RealityView 的代码 以及它的第一个闭包 我们可以使用打开的文件选项卡 来返回 ImmersiveView 在其中选择文本视图 然后粘贴 将其替换成 RealityView 的代码 你可能已经发现 我们没有复制 RealityView 的更新闭包 因为我们不是要根据 SwiftUI 的状态来 更新视图内容 最后 为了加载我们创建的 ImmersiveScene 内容 请把已经加载的场景名称 从“Scene”改为 “ImmersiveScene”

预览窗口正在加载 ImmersiveScene 的内容 但为什么不能在预览画布中看到呢？ 我们在创建 ImmersiveView 时 Xcode 会自动创建预览 我们来仔细看看 在 ImmersiveView.swift 文件下 可以看到让 Xcode 生成预览的代码 这个代码块 以“#Preview”开头 默认情况下 预览被剪裁为默认场景边界 如果它显示的视图加载的内容 超出了这些边界 内容就不可见 要支持预览扩展到 超出这些边界的沉浸式内容 只需修改准备的视图为 .previewLayout(.sizeThatFits) 我们现在试一下 如果我在 ImmersiveView 的预览中 添加 .previewLayout(.sizeThatFits) 预览会更新 我们将能看到沉浸式内容

最后 让我们的 App 打开 Immersive Space 如果你以前在 iOS 上 使用过多场景 SwiftUI App 你大概已经知道 如何从 SwiftUI 代码中 打开其他场景 第一步是 从视图的 SwiftUI 环境中 捕获闭包 然后在事件触发时调用它 比如点击按钮 在新平台呈现 Immersive Space 方法和 SwitfUI 一样 只是捕获的闭包叫 “openImmersiveSpace” 并且是异步的 能够让代码知道 何时呈现了 Immersive Space 回到 ContentView 我们 从 SwiftUI 环境 捕获 openImmersiveSpace 闭包 然后添加一个调用它的按钮

现在 我们已经完成了 呈现沉浸式内容所需的所有更改 你可以在模拟器中体验你的内容 但沉浸感在实际设备上 尤为引人入胜 我们一起来看看 现在 我们看到 一个新的按钮 按下去时 云朵就会以 ImmersiveSpace 内容出现 我们前面有两朵云 一朵在左边 另一朵在右边 请注意 Immersive Space 与 App 的初始场景不同 如果我们移动初始场景 会看到 ImmersiveSpace 中的内容 保持不变 虽然可以移动 App 的 初始空间容器 到任何地方 但是 ImmersiveSpace 的位置 会固定不变 与其移动 ImmersiveSpace 不如在 Immersive Space 中 改变自己的位置 我们已经构建了 一个简单的 App 使用 ImmersiveSpace 在头顶上方展示云朵 如果我们希望 App 响应与云朵的交互 要怎么操作呢？ 简单起见 假设点按云朵 可让它在天空中轻轻飘动 我们来看看如何实现这点 要让 SwiftUI 视图 对输入事件做出响应 可以将手势附加给它们 示例中 我们有一个 简单的文本视图 通过将 TapGesture 附加到视图上 我们能够在用户 点按视图时作出响应 当手势附加到视图上时 它会被赋值一个闭包 在手势被识别时将被调用 由于 RealityView 只是另一个 SwiftUI 视图 它会以相同的方式响应手势 然而 RealityView 可能包含具有 多个实体的 RealityKit 内容 例如 App 打开 ImmersiveSpace 其中显示了 包含云朵的 RealityView 如果用户点击了其中一朵云 SwiftUI 将调用 RealityView 上的 TapGesture 但我们如何知道点击的是哪朵云？ 这就要说到实体定位了 targetedToAnyEntity 修饰符适用于 附加到 RealityView 的手势 用来确定手势所指定的实体 还有其他可用的实体定位方式 你可以针对特定实体进行定位 或者针对与查询匹配的所有实体 有关更多信息 请阅读 developer.apple.com/cn 上的文档 传给手势处理器的值 例如 onEnded 具有一个实体属性 说明用户 在 RealityView 内 与该实体进行了交互 请注意 对于给定的 RealityKit 实体 实体定位要有效 该实体必须同时具有 CollisionComponent 和 InputTargetComponent 要求 RealityKit 实体 都有这些组件 让我们可将交互限制 在 RealityView 中 所选内容的特定部分 你可以在 Reality Composer Pro 中 为实体添加这些组件 或者可以在 App 中 以编程方式添加它们 现在我们已经看到 实体定位的工作原理 接下来 我们使用它来 检测用户点击云朵时发生的情况 这些交互发生时 我们将启动一个 RealityKit 动画 我们先在 Reality Composer Pro 中 添加我们所需的组件 在 RealityKit 内容包中 我们可以使用 Command 单击 从视图层次结构中 同时选择两朵云的文件 然后 我们点击 “检查器”面板底部的 “添加组件”按钮 并选择“Collision”

在“检查器”面板中 可以看到 已将 CollisionComponent 添加到云朵中 请注意 Reality Composer Pro 会通过 自动选择适当的碰撞形状 来为模型创建 CollisionComponent 如果有需要 你可以更改这个碰撞形状 现在 我们来对 InputTargetComponent 做相同操作 再次点击“添加组件”按钮 这次选择 “Input Target”

很好！我们通过选择“文件” “全部保存”来保存我们的更改 为了让云朵在空中移动 我们在手势处理器中使用 一个 RealityKit 动画 云朵被点击时会被调用该处理器 我们先将云的当前变换值 改为可变值 然后添加一个偏移量到平移中 使其向前和向右 移动 100 厘米 然后通过调用 .move 在云实体上应用 一个 RealityKit 变换动画 我们回到 Xcode 来完成这个 App ImmersiveView 是源文件 我们在这个源文件中 展示沉浸式内容 添加代码 将 TapGesture 附加到 RealityView 上 并在其中使用实体定位 检测到点按时 执行变换动画 接下来我们在模拟器上运行 看看它的效果吧！ 点击按钮 打开 ImmersiveSpace 跟之前一样 里面有云朵模型 现在 我们点击云朵模型 它会慢慢飘过天空 实体定位 是将 SwiftUI 交互 与 RealityKit 内容 连接起来的关键 在示例中 我们对云 进行了简单的动画 来响应点击 在更复杂的 App 中 可以使用实体定位 触发更复杂的操作 例如呈现其他视图、 播放音频或开启动画 今天我们介绍了许多话题 现在来做个总结 我们先介绍了如何使用 Xcode 的新项目助手 来创建第一个沉浸式 App 然后介绍了新平台的模拟器 并展示了如何使用 Xcode 预览 来轻松迭代 App 的内容 我们还介绍了 Reality Composer Pro 并展示了它如何帮助你 轻松准备和预览 RealityKit 内容 最后 我们展示了 如何打开 ImmersiveSpace 使用实体定位在程序中 启用和响应 沉浸式内容的交互 希望各位喜欢这次演讲的内容 我们鼓励你更深入探索 关于 SwiftUI 和 RealityKit API 以及 Reality Composer Pro 更高级用法的新课程 感谢观看！ ♪