使用 Xcode 中的 Reality Composer Pro 内容

使用 Xcode 中的 Reality Composer Pro 内容

了解如何在 Xcode 中让 Reality Composer Pro 的内容变得生动。我们将向你展示如何将 3D 场景加载到 Xcode 中，如何将内容与代码集成，以及如何为 App 添加交互性。我们还将分享在开发工作流中一起使用这些工具的最佳实践和技巧。为了充分利用本节视频，我们建议你首先观看“了解 Reality Composer Pro”和“探索 Reality Composer Pro 中的材质”，以了解有关创建 3D 场景的更多信息。

章节
- 0:00 - Introduction
- 2:37 - Load 3D content
- 6:27 - Components
- 12:00 - User Interface
- 27:51 - Play audio
- 30:18 - Material properties
- 33:25 - Wrap-up
资源
- - 高清视频
  - 标清视频
相关视频

WWDC23
WWDC21
- 深入了解 RealityKit 2
下载

♪ 悦耳的器乐嘻哈 ♪ ♪ Amanda：大家好我是 Amanda 我是 RealityKit 和 Reality Composer Pro 的工程师在本节讲座中我们将学习如何使用 Reality Composer Pro 中装配的 3D 内容进行空间体验 Reality Composer Pro 是一个开发工具用于创建 RealityKit 内容供开发者的空间计算 App 使用本节讲座中我们将继续迭代我同事 Eric 和 Niels 在他们的讲座里创建的一个项目然后我们将学习如何使项目在代码中实现交互如果你还没有看过他们的讲座我建议你先熟悉他们的讲座中关于编辑器 UI 和 Reality Composer Pro 功能的内容首先我们来看一下构建的成品然后我将向你讲解各个部分是如何创造的我们看到的是优胜美地国家公园的地形图戴上头显设备观看会有一种视野辽阔的感觉这在以前只有身临其境才能体会到在前面的 Reality Composer Pro 讲座中 Eric 组建了这个场景 Niels 创造了我们正在使用的地形素材这里我们加上了一个滑动条在两个不同的加利福尼亚地标之间产生变形现在我们看到的是洛杉矶海岸外的卡特琳娜岛我们还在 3D 空间中放置了悬停的 2D SwiftUI 按钮让你进一步了解地图中各兴趣点的更多信息本节讲座中我们将探索如何在 Reality Composer Pro 中排列这些内容以提升体验感我来展示一下如何添加滑动条和兴趣点按钮来改变我们在 Reality Composer Pro 中制作的场景首先要讲的是从 Reality Composer Pro 项目中以编程的方式加载 3D 内容我们将探索 RealityKit 组件是如何工作的以及如何在代码中使用它们包括创建我们自己的自定义组件我们将了解 SwiftUI 中新的 RealityView API 并探索如何通过使用 Attachments API 将用户界面元素添加到场景中我们还将学习如何使用 Reality Composer Pro 中设置的音频然后我们将从 Niels 结束的地方开始将我们用 Shader Graph 制作的自定义材质连接起来并从代码中驱动其中的元素让我们开始吧在 Eric 的讲座中我们制作了一个 Reality Composer Pro 项目这包含了我们的立体模型所需的全部资源并且我们可以随心所欲地排列它们顶部的这些选项卡分别代表一个 root 实体我们可以在运行时加载我们能在一个场景中放入很多东西并将其视为一个完整的场景或者我们可以只放几个然后把这个场景当作一个可复用的小组合我们想做多少都可以我们看一下如何在运行时加载这个名为 DioramaAssembled 的场景我们使用实体的异步初始化定式将 Reality Composer Pro 程序包中的内容创建一个实体使用字符串名称指定要加载的实体并为其提供程序包生成的 bundle 如果在我们的 Reality Composer Pro 项目中找不到同名对象它就会抛出异常 realityKitContentBundle 是我们在 Reality Composer Pro 程序包中为你自动生成的常量值这在 RealityView 中形成闭包 RealityView 是一种新的 SwiftUI 视图这是你进入 RealityKit 的入口它是连接 SwiftUI 和 RealityKit 的桥梁我们到讲座后期再深入讲解 RealityView 如果你在 Xcode 项目中使用的 USD 资源没有添加到 Reality Composer Pro 项目中我们强烈建议你将这些资源放入带有 .rkassets 目录的 Swift 程序包中如图所示 Xcode 可以将 .rksassets 文件夹编译为在运行时加载速度更快的格式我们刚刚加载的实体实际上是一个更高实体层次结构的 root 它有子实体而子实体又有子实体它们构成了 Reality Composer Pro 场景中的一切如果我们想操作层次结构较低的一个实体可以在 Reality Composer Pro 中为其命名然后在运行时要求场景根据名称查找该实体实体是 ECS 的一部分 ECS 的意思是实体组件系统 ECS 为 RealityKit 和 Reality Composer Pro 赋能我们先来了解一下 ECS ECS 与面向对象编程有一些相似之处但在一些关键方面有所不同在面向对象编程的领域中对象具有定义其性质的属性并且具有自己的功能你可以在定义对象的类中编写这些属性和功能在 ECS 中实体是你在场景中看到的任何东西实体也可以是不可见的但它们不包含属性或数据相反我们将数据放入组件中在 App 执行期间可以随时向实体添加或从实体中删除组件这提供了一种动态更改实体性质的方法系统是行为存在的地方它有一个更新功能每帧更新一次在这里你可以存放正在进行的逻辑数据在你的系统中你可以查询所有具有特定组件或组件配置的实体然后执行一些操作并将更新后的数据存储回这些组件有关 ECS 更深入的讨论请查看 2021 年 “深入了解 RealityKit 2”的讲座以及今年的 “使用 RealityKit 构建空间体验” 现在我们来了解一下组件我们将展示如何在 Reality Composer Pro 项目中向实体添加组件然后介绍如何创建自定义组件用于在立体模型上制作位置标记在 Swift 中向实体添加组件可以使用 entity.components.set() 并提供组件值在 Reality Composer Pro 中也是如此在视口或层次结构中选择需要的实体
然后在检查面板的底部点击 Add Component 按钮就会出现 RealityKit 全部可以使用的组件列表
我们可以向实体添加任意数量的组件但每种类型只能添加一个这是一条规定在这个列表中也能看到之前创建的自定义组件我们来看看如何利用 Reality Composer Pro 创建自己的自定义组件我们要制作那些悬停在地形上特定点的浮动按钮这样你就可以选择查看有关该点的更多信息我们将在代码中创建大量的 UI 和功能但我想展示的是如何在 Reality Composer Pro 中将这些实体标记为我们想要显示这些浮动按钮的位置要做到这一点我们要在地形图上方添加实体这将向 App 表明这些位置是我们想要显示浮动按钮的位置然后我们创建一个兴趣点组件来容纳每个地点的信息然后在 Xcode 中打开 PointOfInterestComponent.swift 并进行编辑添加诸如名称和描述文件之类的属性在 Reality Composer Pro 中我们向每个新的实体添加新的 PointOfInterestComponent 组件然后填充属性值我们来制作第一个位置标记实体丝带海滩是卡特琳娜岛的一个地方我们点击加号菜单选择转换制作一个新的不可见实体
我们将实体命名为 Ribbon_Beach 我们把这个实体放在丝带海滩位于岛上的真实位置我们点击 Add Component 按钮但这一次我们选择新组件因为我们要制作自己的组件
我们将其命名为 PointOfInterest
现在它出现在了检查面板上和其他组件是一样的
但这个计数属性是什么？让我们在 Xcode 中打开这个新组件在 Xcode 中我们看到 Reality Composer Pro 为我们创建了 PointOfInterestComponent.swift Reality Composer Pro 工程都是 Swift 程序包我们刚刚生成的 Swift 代码就存在于这个程序包中查看模板代码我们可以看到计数属性就是从这里来的我们来更换一个属性我们希望每个兴趣点都知道它应与哪个地图相关这样当你更改地图时我们就可以渐出旧的兴趣点渐入恰当的新兴趣点所以我们要添加枚举属性 var region 我们在这上面创建枚举区域…… ……添加两个关键词因为我们现在只有两个地图卡特琳娜岛和优胜美地枚举区域可以序列化为字符串我们还要使它符合 Codable 协议这样 Reality Composer Pro 就可以看到它并序列化它的实例回到 Reality Composer Pro 计数属性已经没有了出现了新的区域属性它有一个默认值 yosemite 因为这是我们在代码中初始化的内容我们能为这个特定的实体覆盖该值如果覆盖该值那么这个值将只对这个特定的实体生效其余兴趣点组件的初始值还是 yosemite 除非我们也将其覆盖我们在使用 PointOfInterestComponent 时将其当作能指一样的符号一个我们粘贴在这些实体上的标记这些实体就像在运行时 SwiftUI 按钮位置上的占位符我们添加另一个卡特琳娜岛兴趣点的方式与添加丝带海滩的方式相同现在我们运行 App 看看新的自定义组件能做什么
哦！什么也没做这是因为我们还没有编写任何代码来操作这些兴趣点组件我们来编写一下我们有一种新的方法能将 SwiftUI 内容放入 RealityKit 场景中这被称为 Attachments API 我们将要把 attachment 与 PointOfInterestComponent 结合起来在运行时创建带有自定义数据的悬停按钮我们先在代码中看一下然后我将引导你了解数据流 Attachment 是 RealityView 一部分我们首先来看一个简化的示例展示一下 RealityView 的结构这样我们就能看到 SwiftUI 视图是如何进入 RealityKit 场景的我们要使用的 RealityView 初始化程序有三个参数：一个 make 闭包一个 update 闭包还有一个 attachments ViewBuilder 简单地说就是我们添加一个创建 Attachment View 最低限度的编程工具一个绿色 SwiftUI 按钮并将它添加到我们的 RealityKit 场景中在 Attachments ViewBuilder 中我们制作一个常规的 SwiftUI 视图可以使用视图修饰符和手势以及其他所有 SwiftUI 给我们的功能可以用任何独特的可哈希的数据类型来标记我们的视图我选择用鱼的表情符号来标记这个按钮视图随后当 SwiftUI 调用我们的 update 闭包时按钮视图就已经变成了一个实体它存储在这个闭包的 attachments 参数中我们利用之前给予的鱼标签把它找出来然后就可以将其视为与其他实体一样了我们可以将其添加为场景中任何现有实体的子实体也可以将其添加为内容实体集合中新的顶级实体由于它已经变成一个常规实体我们就可以设置它的位置以便在 3D 中显示我们想要的地方我们也可以添加任何我们想要的组件这就是数据如何从 RealityView 的一部分流向另一部分我们来看一下这个 RealityView 初始化程序的三个参数第一个是 make 是将 Reality Composer Pro bundle 中的初始设置场景作为实体加载的地方然后将其添加到 RealityKit 场景中第二个是 update 它是在视图状态发生改变时被调用的闭包在这里你可以更改有关实体的内容如实体组件中的属性、位置甚至可以在场景中添加或删除实体这个 update 闭包并不是每帧都执行只有在 SwiftUI 视图状态改变时才被调用第三个是 attachments ViewBuilder 在这里你可以制作 SwiftUI 视图放入 RealityKit 场景中你的 SwiftUI 视图从 attachments ViewBuilder 开始然后在 attachments 参数的 update 闭包中交付给你在这里你可以询问 attachments 参数是否含有使用与你在 attachments ViewBuilder 中给按钮的相同标签的实体如果有它会向你提供一个 RealityKit 实体在 update 闭包中你可以设置它的 3D 位置并将其加入你的 RealityKit 场景中你就可以看到它漂浮在任何你想要的地方这里我已经将按钮实体添加为球体实体的子实体我将它放置在其父实体上方 0.2 米处 make 闭包也有一个 attachments 参数这个参数是为了添加首次评估视图时你已准备好的 attachments 因为 make 闭包只运行一次现在我们理解了 RealityView 的常规流我们再深入讲解一下 update 闭包你的 make 和 update 闭包的参数是一项 RealityKitContent 当你将一个实体添加到 RealityKit 内容中它就会成为场景中的最高层级实体同样通过更新功能在内容中添加实体也就会在场景中生成一个新的最高层级实体然而 make 闭包只会被调用一次 update 闭包则会被调用多次如果你在 update 闭包中创建一个新实体并将它添加到内容中就会得到该实体的副本你可能并不想这样为了防止这种情况你应该只将实体添加到仅运行一次的地方你无需检查 content.entities 是否已经包含了你的实体如果调用同一个实体两次那就是一个空操作像是一种规定将实体作为场景中现有实体的父对象时也是如此不会被添加两次 Attachment 实体不是你创建的它们是由 RealityView 为你在 attachments ViewBuilder 中提供的每个 attachment 视图而创建的这意味着可以安全地将它们添加到 update 闭包的内容中而无需检查它是否已经存在所以如果我们想在 attachments ViewBuilder 中对兴趣点进行硬编码我们就要这样编写 attachment 代码但既然我们想让 Reality Composer Pro 项目中的数据来驱动体验感那就要让它变得更加灵活这样一来设计者或制作者可以在 Reality Composer Pro 项目中创建兴趣点而且我们的代码可以容纳其添加的任何数据为了做到数据驱动就需要代码来读取我们在 Reality Composer Pro 场景中设置的数据我们要动态地创建 attachment 视图高级的做法是这样的在 Reality Composer Pro 中我们已经建立了丝带海滩的占位符实体然后我们对立体模型中另一个想要强调的兴趣点也这样做我们要填充每个实体所需全部信息比如名称、属于哪一个地图现在在代码中我们将查询这些实体并为每个实体创建一个新的 SwiftUI 按钮为了每当我们向集合添加新按钮时 SwiftUI 都能调用我们的 attachments ViewBuilder 我们将向该集合添加 @State 属性包装我们将为 attachments ViewBuilder 启动这些按钮最后在 RealityView 的 update 闭包中我们将把按钮作为实体接收并将这些新按钮实体添加到场景中我们将每一个实体都作为 Reality Composer Pro 中设置的标记实体的子实体来添加我们通过更详细的图表来理解这六个步骤然后我们来看一下代码首先我们在 Reality Composer Pro 场景中添加不可见的实体我们在 x、y 和 z 轴上将不可见实体定位在按钮需要显示的位置上我们在这里使用转换组件默认情况下所有实体都有转换组件然后我们向每一个实体添加 PointOfInterestComponent 在代码中通过查询场景中所有具有 PointOfInterestComponent 的实体我们获得了对这些实体的引用查询返回了我们在 Reality Composer Pro 中设置的三个不可见实体我们为每一个实体创建新的 SwiftUI 视图并将它们存入集合中为了让按钮进入 RealityView 我们要使用 SwiftUI 视图更新流程也就是说将属性包装器 @State 添加到视图中的按钮集合中 @State 属性包装器告诉 SwiftUI 当我们向这个集合添加项时 SwiftUI 应该触发 ImmersiveView 上的视图更新这样会导致 SwiftUI 再次评估我们的 attachments ViewBuilder 和 update 闭包通过 RealityView 的 attachments ViewBuilder 可以向 SwiftUI 声明我们希望这些按钮成为实体接下来 RealityView 的 update 闭包将被调用然后按钮将作为实体交付给我们现在它们不再是 SwiftUI 视图了因此我们就可以将它们添加到实体层次结构中在 update 闭包中我们将 attachment 实体添加到场景中漂浮在每个不可见实体之上现在当我们观看立体模型场景时它们就会在视觉上显示出来我们来看一下每一步是如何做的首先在 Reality Composer Pro 场景中标记我们的不可见实体为了找到我们标记的实体我们要生成 EntityQuery 用它来寻找所有带有 PointOfInterestComponent 的实体然后我们将迭代 QueryResult 并为场景中的每个实体创建一个新的 SwiftUI 视图视图上带有一个 PointOfInterestComponent 我们将用从组件中获取的信息来填充它这些信息是我们在 Reality Composer Pro 中输入的数据这个视图将成为我们的 attachments 之一所以我们给它放置一个标签在这种情况下我们要严肃一些所以我们用 ObjectIdentifier 而不是鱼的表情符号这是我们制作 SwiftUI 视图集合的部分我们称它为 attachmentsProvider 这是因为它要向 RealityView 的 attachments ViewBuilder 提供我们的 attachments 然后我们将视图存储在 attachmentsProvider 我们来看看集合类型 AttachmentsProvider 有一个 attachment 标签到视图的字典我们打字删除了视图这样就可以在那里放置除 LearnMoreView 之外的其他类型的视图我们有一个名为 sortedTagViewPairs 的计算属性它每次都以相同的顺序返回一个元组数组也就是标签及其对应的视图然后在 attachments ViewBuilder 中我们将对我们制作的 attachment 集合进行 ForEach 这样就会告诉 SwiftUI 我们希望为给定的每对提供一个视图视图是从集合中提供的我们让 ObjectIdentifier 在这里同时完成双重任务既是视图的 attachment 标签又是 ForEach 结构的标识符所以为什么我们不直接在 PointOfInterestComponent 中添加一个标签属性呢？ Attachment 标签必须是独一无二的 ForEach 结构和 attachment 机制才能运行因为自定义组件中所有的属性都会展示在 Reality Composer Pro 的检查面板上所以当你向实体添加组件时就意味着 attachmentTag 也会出现在那里我们不想给自己增加负担不想每次在 Reality Composer Pro 中添加兴趣点时都要记住统一所有标签但对于我们来说方便的是实体符合标识协议因此它们自动具有唯一的标识符当我们在 Reality Composer Pro 中设计场景时我们可以在运行时从实体中获取此标识符而无需提前记住为了不让 attachmentTag 属性显示在 Reality Composer Pro 中我们使用一种技术我称之为 “设计时 VS 运行时”的组件我们将数据分为两组不同的组件一组是我们在 Reality Composer Pro 中设计时想要排列的数据另一组是用于运行时的数据我们在运行时动态附加到相同的实体上那些是我们不想在 Reality Composer Pro 检查面板上显示的属性所以我们要定义一个新组件 PointOfInterestRuntimeComponent 将 attachment 标签移到组件内 Reality Composer Pro 基于它在 Swift 程序包内读到的内容自动为你构建组件 UI 它可以检查程序包中的 Swift 代码让发现的任何可编码的组件都能供你在场景中使用这里我们展示四个组件组件 A 和组件 B 是在 Xcode 项目中的但不在 Reality Composer Pro 的程序包中因此你不能将它附加到 Reality Composer Pro 中的实体组件 C 在程序包中但不可编码所以 Reality Composer Pro 就会忽略它以上四个组件中只有组件 D 会出现在 Reality Composer Pro 的列表中因为它存在于 Swift 程序包并且是可编码的组件这个就是我们的设计时组件其他的可能用于运行时组件设计时组件用于容纳更简单的数据例如 int、字符串和 SIMD 值这些都是 3D 艺术家和设计师会使用的数据如果你将 Reality Composer Pro 无法序列化类型的属性添加到自定义组件中你将在 Xcode 项目中看到一个报错现在我们回头看看代码首先我们向实体添加 PointOfInterest 运行时组件然后使用运行时组件来帮助我们将 attachment 实体与其在立体模型上对应的兴趣点进行匹配这就是我们的运行时组件使用的地方我们正在读入 PointOfInterest 实体并创建我们的 attachment 视图我们查询了所有的设计时组件现在我们为每个组件制作一个新的相对应的运行时组件我们将 attachmentTag 存储在运行时组件并且将运行时组件存储在同一个实体上通过这种方式设计时组件就像一个能指告诉我们的 App 需要为其制作 attachment 运行时组件处理 App 执行期间我们需要的但不想存储在设计时组件中的任何其他类型的数据在 RealityView 中我们还有一个步骤才能看到 attachment 实体出现在场景中一旦我们在 attachments ViewBuilder 中提供了 SwiftUI 视图 SwiftUI 就会调用 RealityView update 闭包并将 attachments 作为 RealityKit 实体提供给我们但如果我们只是将它们添加到内容中而不定位它们它们就会出现在场景的原点位置我们并不想它们出现在那我们想让它们漂浮在地形中每个兴趣点之上我们需要将 attachment 实体和 Reality Composer Pro 中建立的不可见兴趣点实体相匹配我们放置在不可见实体上的运行时组件带有我们的标签这样我们就可以将每个 attachmentEntity 与兴趣点实体相匹配我们查询所有的 PointOfInterestRuntimeComponent 从查询返回的每个实体中获得运行时组件然后利用组件的 attachmentTag 属性从 attachments 参数获得 attachmentEntity 到 update 闭包中现在我们向内容添加 attachmentEntity 并将其定位在兴趣点实体上方半米处我们再次运行 App 看看变成什么样子了看起来很棒可以看到每个地名都漂浮在我们在 Reality Composer Pro 项目中放置的位置上方接下来我们来了解如何播放我们在 Reality Composer Pro 中设置的音频为了在 Reality Composer Pro 中设置能够播放音频的程序可以添加音频实体通过点击加号按钮选择音频然后选择环境音频这将创建一个带有 AmbientAudioComponent 的常规不可见实体我们将这个实体命名为 OceanEmitter 因为我们将用它为卡特琳娜岛播放海洋的声音你还需要将音频文件添加到场景中我们来添加海洋的声音
你可以通过在检查面板组件预览菜单中选择一种声音来预览音频组件但当实体加载到 App 中时不会自动播放选定的声音为此我们需要加载音频资源并要求它播放为了播放这个声音我们要获取对放置音频组件的实体的引用我们已经将实体命名为 OceanEmitter 所以我们通过名字找到实体我们使用 AudioFileResource 初始化程序加载声音文件将场景中音频文件资源基础容器的完整路径传递给它我们在 Reality Composer Pro 项目中为其提供了 .usda 文件的名称在我们的案例中这就是我们的主场景名为 DioramaAssembled.usda 通过调用 entity.prepareAudio 我们创建一个 audioPlaybackController 我们就可以播放、暂停和停止这段声音现在我们已经准备好了这就是我们在 App 中播放的海洋声音 App 中的滑动条在优胜美地和卡特琳娜岛这两个不同的地形图之间变化
现在我们已经将音频引入到场景中我们将在两个音频源之间交叉播放添加森林音频发射器的方式与添加海洋发射器实体的方式相同我们来看看如何使用滑动条来改变地形在这个过渡中还包含了音频变化我们将使用 Shader Graph 材质中的一个属性在两个地形之间形成变形我们来看看是如何做到的在 Niels 的讲座中他使用 Reality Composer Pro 的 Shader Graph 为我们创建了这个美丽的几何图形修饰符现在我们可以将它连接到我们的场景中并在运行时驱动一些参数我们想把这个 Shader Graph 材质与滑动条连接要做到这一点我们需要提升一个输入节点在节点上按住 Command 点击然后选择提升这样就会告诉项目我们打算在运行时为这部分材质提供数据我们将此提升节点命名为 Progress 这样就可以在运行时用这个名称来操作它我们现在可以在代码中动态更改这个值我们得到了该材质所在实体的参考然后我们得到了 ModelComponent 也就是用于容纳材质的 RealityKit 组件从 ModelComponent 中我们得到了它的第一个材质这个实体上只有一个材质我们将其转换为 ShaderGraphMaterial 类型现在我们可以为名为 Progress 的参数设置一个新值最后我们将这个材质存储回 ModelComponent 并将 ModelComponent 存储回地形实体现在我们将其连接到我们的 SwiftUI 滑动条上每当滑动条的值发生变化时我们都会获取到这个值在 0 到 1 的范围内并将其持续更新到 ShaderGraphMaterial 中接下来我们在两个地形的环境音轨之间进行交叉渐变因为我们还在海洋和森林这两个音频实体上放入了 AmbientAudioComponent 我们可以使用比例增益属性来调整声音播放的音量我们将查询所有带有 AmbientAudioComponent 的实体也就是目前海洋和森林两个实体另外我们还添加了另一个自定义组件名为 RegionSpecificComponent 这样我们就可以标记与一个区域或另一区域相关的实体我们得到一个 audioComponent 的可变副本因为我们要做更改并存储回我们的实体中我们调用一个函数来计算区域和滑动条值应给的比例增益我们将比例增益值设置在 AmbientAudioComponent 上然后将该组件存储回实体中我们来看看效果
非常好！当我们移动滑动条时可以看到 Shader Graph 材质正在改变地形的几何图形我们可以听到森林的声音逐渐消失海洋的声音进入
今天我们讲到了很多信息让我们回顾一下我们学习了如何将 Reality Composer Pro 内容加载到我们在 Xcode 的 App 中我们了解了如何在 Reality Composer Pro 中创建自己的自定义组件我们探索了 SwiftUI Attachments API 是如何工作的以及它们是如何作为实体交付给我们的我们看到了如何建立音频以及如何在代码中播放最后我们了解了如何获取提升的材质属性并从代码中驱动它这些工作流将帮助你让空间体验更加生动我期待看到开发者在我们的新平台上构建的所有令人惊喜的内容谢谢 ♪

RealityView { content in
    do {
        let entity = try await Entity(named: "DioramaAssembled", in: realityKitContentBundle)
        content.add(entity)
    } catch {
        // Handle error
    }
}

6:39 - Adding a component

let component = MyComponent()
entity.components.set(component)

12:21 - Attachments data flow

RealityView { _, _ in
    // load entities from your Reality Composer Pro package bundle
} update: { content, attachments in
           
   if let attachmentEntity = attachments.entity(for: "🐠") {
     		content.add(attachmentEntity)
 	 }
           
} attachments: {
    Button { ... }
       .background(.green)
       .tag("🐠")
}

15:48 - Adding attachments

let myEntity = Entity()

RealityView { content, _ in
    if let entity = try? await Entity(named: "MyScene", in: realityKitContentBundle) {
        content.add(entity)
    }
} update: { content, attachments in

    if let attachmentEntity = attachments.entity(for: "🐠") {
        content.add(attachmentEntity)
    }

    content.add(myEntity)

} attachments: {
    Button { ... }
       .background(.green)
       .tag("🐠")
}

20:43 - Adding point of interest attachment entities

static let markersQuery = EntityQuery(where: .has(PointOfInterestComponent.self))
@State var attachmentsProvider = AttachmentsProvider()

rootEntity.scene?.performQuery(Self.markersQuery).forEach { entity in
  guard let pointOfInterest = entity.components[PointOfInterestComponent.self] else { return }
  
  let attachmentTag: ObjectIdentifier = entity.id

  let view = LearnMoreView(name: pointOfInterest.name, description: pointOfInterest.description)
                           .tag(attachmentTag)

   attachmentsProvider.attachments[attachmentTag] = AnyView(view)
}

21:40 - AttachmentsProvider

@Observable final class AttachmentsProvider {
    var attachments: [ObjectIdentifier: AnyView] = [:]
    var sortedTagViewPairs: [(tag: ObjectIdentifier, view: AnyView)] { ... }
}

...

@State var attachmentsProvider = AttachmentsProvider()

RealityView { _, _ in

} update: { _, _ in

} attachments: {
    ForEach(attachmentsProvider.sortedTagViewPairs, id: \.tag) { pair in
        pair.view
    }
}

22:31 - Design-time and Run-time components

// Design-time component
public struct PointOfInterestComponent: Component, Codable {
    public var region: Region = .yosemite
    public var name: String = "Ribbon Beach"
    public var description: String?
}

// Run-time component
public struct PointOfInterestRuntimeComponent: Component {
    public let attachmentTag: ObjectIdentifier
}

25:38 - Adding a run-time component for each design-time component

static let markersQuery = EntityQuery(where: .has(PointOfInterestComponent.self))
@State var attachmentsProvider = AttachmentsProvider()

rootEntity.scene?.performQuery(Self.markersQuery).forEach { entity in
  guard let pointOfInterest = entity.components[PointOfInterestComponent.self] else { return }
  
  let attachmentTag: ObjectIdentifier = entity.id

  let view = LearnMoreView(name: pointOfInterest.name, description: pointOfInterest.description)
                           .tag(attachmentTag)

   attachmentsProvider.attachments[attachmentTag] = AnyView(view)
   let runtimeComponent = PointOfInterestRuntimeComponent(attachmentTag: attachmentTag)
   entity.components.set(runtimeComponent)
}

26:19 - Adding and positioning the attachment entities

static let runtimeQuery = EntityQuery(where: .has(PointOfInterestRuntimeComponent.self))

RealityView { _, _ in

} update: { content, attachments in x
   
    rootEntity.scene?.performQuery(Self.runtimeQuery).forEach { entity in
        guard let component = entity.components[PointOfInterestRuntimeComponent.self],
              let attachmentEntity = attachments.entity(for: component.attachmentTag) else { 
            return 
        }        
        content.add(attachmentEntity)
        attachmentEntity.setPosition([0, 0.5, 0], relativeTo: entity)
    }
} attachments: {
    ForEach(attachmentsProvider.sortedTagViewPairs, id: \.tag) { pair in
        pair.view
    }
}

28:55 - Audio Playback

func playOceanSound() {
        
    guard let entity = entity.findEntity(named: "OceanEmitter"),
        let resource = try? AudioFileResource(named: "/Root/Resources/Ocean_Sounds_wav",
                                   from: "DioramaAssembled.usda",
                                   in: RealityContent.realityContentBundle) else { return }
        
    let audioPlaybackController = entity.prepareAudio(resource)
    audioPlaybackController.play()
}

31:02 - Terrain material transition using the slider

@State private var sliderValue: Float = 0.0

Slider(value: $sliderValue, in: (0.0)...(1.0))
    .onChange(of: sliderValue) { _, _ in
        guard let terrain = rootEntity.findEntity(named: "DioramaTerrain"),
                var modelComponent = terrain.components[ModelComponent.self],
                var shaderGraphMaterial = modelComponent.materials.first 
                    as? ShaderGraphMaterial else { return }
        do {
            try shaderGraphMaterial.setParameter(name: "Progress", value: .float(sliderValue))
            modelComponent.materials = [shaderGraphMaterial]
            terrain.components.set(modelComponent)
        } catch { }
    }
}

31:57 - Audio transition using the slider

@State private var sliderValue: Float = 0.0
static let audioQuery = EntityQuery(where: .has(RegionSpecificComponent.self) 
                                    && .has(AmbientAudioComponent.self))

Slider(value: $sliderValue, in: (0.0)...(1.0))
    .onChange(of: sliderValue) { _, _ in
        // ... Change the terrain material property ...
                                
        rootEntity?.scene?.performQuery(Self.audioQuery).forEach({ audioEmitter in
            guard var audioComponent = audioEmitter.components[AmbientAudioComponent.self],
                  let regionComponent = audioEmitter.components[RegionSpecificComponent.self]
            else { return }

            let gain = regionComponent.region.gain(forSliderValue: sliderValue)
            audioComponent.gain = gain
            audioEmitter.components.set(audioComponent)
        })
    }
}

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

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

章节

资源

相关视频

WWDC23

WWDC21