探索 Reality Composer Pro 中的材质

♪ 悦耳的器乐嘻哈 ♪ ♪ Niels Gabel： 大家好 我是 Niels 我是 Reality Composer Pro 团队的材料工程师 欢迎观看 “探索 Reality Composer Pro 中的材质”讲座 在本讲座中 我们将学习如何使用 Reality Composer Pro 为 xrOS 构建材质 我将首先概述 xrOS 中的材质 并介绍它们如何自定义 3D 对象的外观 接下来会介绍基于 MaterialX 开放标准的 xrOS 中可用的新材质类型 之后 我将向你展示如何使用 Reality Composer Pro 的内置编辑器 Shader Graph 设计材质 我将带你了解使用节点图 创建材质的可复用部分的过程 最后 我们将为一些好看的 3D 内容构建一个几何修改器 让我们首先了解下什么是材质 材质用于定义对象在 3D 场景中 的外观 材质可以很简单 使用纯色即可 或者可以使用图像 你可以将木材纹理应用于椅子模型 或将砖块图像映射到墙壁 材质也可以非常复杂 它们可能会通过动画 使其看起来像水波纹 或者根据视角更改外观 想象一下珍珠母贝的耀眼光芒 材质甚至可以改变 它们所应用对象的几何形状 xrOS 中的材质 使用基于物理的渲染 简称 PBR 这意味着艺术家可以使用 类似于现实世界对象的 物理属性来设计对象的外观 例如 对象的外观 金属度或粗糙程度 让我们来看看一些 基于物理的材质的具体应用 这是一个 使用简单 PBR 材质的球体 此材质使用常量蓝色 反射率设置为 40% 或者 你可以应用图像 来设置颜色和表面粗糙度 以获得逼真的混凝土材质 或把金属度调高 得到看起来 像铁一样的东西 你甚至可以实现车漆的效果 材质由一个或多个着色器组成 这些程序实际上是在 计算材质外观 借助适用于 iOS 和 iPadOS 的 RealityKit 2 我们引入了 CustomMaterial CustomMaterial 中的 着色器在 Metal 中手工编码 在 xrOS 中 我们引入了一种名为 ShaderGraphMaterial 的新型材质 这是为 xrOS 创建自定义材质的唯一方式 ShaderGraphMaterial 使用功能块的网络或图形 这就是它的名字来源 ShaderGraphMaterial 基于 MaterialX 的开放标准 是一种艺术家友好的 自定义材质的方式 MaterialX 最初由 Industrial Light & Magic 于 2012 年创建 ShaderGraphMaterial 支持两种主要类型的着色器 我们称之为基于物理和自定义 基于物理是一个 基础的 PBR 着色器 适用于简单的用例 你可以通过为每个属性提供常量值 如颜色或图像 来配置这个着色器 另一方面 自定义着色器 可让你精准自定义控制 3D 对象的外观 自定义着色器可以合并动画、 调整对象的几何形状 并在对象表面上创建特殊效果 如闪闪发光的油漆外观 你可以在 Reality Composer Pro 中 使用 Shader Graph 编辑器 来构建 ShaderGraphMaterials 我们看下面的 Shader Graph 节点 它们立刻定义了 视口中地形的外观 现在我们已经了解了基础知识 让我们构建一些自定义材质 xrOS 中的材质可以使用 Reality Composer Pro 创建 这是一个新的专业开发者工具 可让你编写、编辑 和预览 3D 内容 如果你想在开始使用材质之前 了解该 App 请观看“初识 Reality Composer Pro”讲座 熟悉编辑器 UI 及其功能 我们将使用该讲座中展示的 优胜美地山谷模型 并将地形图外观应用于该模型 我将解释材质背后的数学原理 然后进入 Reality Composer Pro 的着色器编辑器 并构建它 还有很多内容要介绍 让我们开始吧 这是 Eric 在其讲座中 创建的优胜美地山谷模型 为了节省时间 我使用 Deactivate 命令 隐藏了与本讲座无关的对象 这样就留下了中间的基座 和顶部的景观 非常不错！ 让我们添加一个地形特征 我们将添加一个材质 通过沿着地形的斜坡 显示等高线来显示模型的地形 它看起来就像是你在计划徒步旅行时 可能看到的地形图 让我们创建一个 包含着色器的自定义材质 该着色器将在 我们的地形上绘制等高线 我们想在 所有海拔相同地区的 地形上绘制等高线 如图所示 例如 这条蓝线显示海拔 1000 米处地形上的所有点 俯视效果就像 右侧的图表 我们将使用一组函数来构建材质 这些函数将在我们的模型上 绘制这样的线 首先 在层次结构面板中 点击项目底部的加号按钮 在材质下 请注意我们的两种着色器类型： 基于物理和自定义 选择自定义 该操作打开了编辑器的 Shader Graph 新的自定义着色器从两个节点开始 表面节点为紫色 输出节点为蓝色 材质的活动表面 是连接到输出节点的 自定义表面输入的表面 表面上的输入用于设置 着色器的基于物理的参数 即 PBR 参数 例如 基础颜色 让我们给材质起一个描述性的名字 TopographyMaterial 听起来不错 下面重要的一步是将我们的新材质 应用到优胜美地山谷模型 在项目层次结构中选择它 在检查器的材质绑定下 从绑定菜单中 选取 TopographyMaterial 请注意 模型从彩色变为纯灰色 我们的材质生效了 但还未做一些有趣的事情 让我们来解决这个问题 从层次结构中选择 TopographyMaterial 以返回到 Shader Graph 编辑器 我们将一些节点连接到表面输入 以便在模型的正确位置绘制线条 我将讲解材质如何 与示例地形配合使用 我们需要根据材质 在模型上的位置 决定在哪里绘制地形线 因此 首先在材质中 添加一个 position 节点 此节点返回我们 在 3D 空间中的渲染位置 我们只对位置的高度感兴趣 所以还将添加一个 叫做 separate 的节点 来提取位置的 Y 坐标 Separate 返回 Y 坐标位置 该位置随地形高度的增加而增加 让我们将前两个节点添加到 Reality Composer Pro 中的材质中 双击编辑器的背景添加节点 打开 New Node 选择器 你可以浏览所有可用节点的列表 也可以按名称或关键字搜索节点 让我们键入“position” 然后从列表中选择 Position 节点 将其插入到着色器中 Position 输出 3D 空间中 渲染材质的位置 我们的材质随高度变化 所以让我们添加一个 separate 节点 提取位置的 Y 分量 双击背景以再次显示 New Node 选择器 并添加一个 Separate 3 节点 要在编辑器中建立连接 只需像这样点击并从节点输出 拖动到节点输入即可 这两个节点结合在一起 就得到了地形的高度 接下来 我们将获取 separate 节点的输出 并将其传递给 modulo 节点 两个值相除的余数取模 用高度除以 所需的地形线间距取模 结果如图所示 你可以看到高度已经被分为几个带 每个范围内的高度值 从 0 开始 并增加到该范围的高度 这对我们的下一步很重要 让我们在 Reality Composer Pro 中 将 modulo 节点添加到材质中 我们可以将一个新的连接 拖动到一个空白空间 一步即可创建一个已连接的节点 而不是双击添加一个节点 然后连接它 在 New Node 选择器中 键入“modulo” 并点击以插入 Modulo 节点 Modulo 有两个输入 第一个是被除数 第二个是除数 你可以方便地在检查器的输入上 设置常量值 而不是连接节点 在检查器中 将第二个参数更改为 0.1 这是除数 用来设置高度范围的广度 我们距离得到输出还差一步 我们将使用 ifgreater 节点来确定 重复值在地形上的狭窄高度带 上的位置 ifgreater 节点返回一个值 表示你在屏幕上看到的 两种波段颜色的其中一个 具体取决于比较结果 当高度大于 着色器地形线宽时 我们将选择背景颜色 如果高度在想要的线宽范围内 我们将选择地形线的颜色 让我们将 ifgreater 节点 添加到材质中 并查看结果 我们希望将 modulo 节点的结果 与为地形线宽度选择的值进行比较 因此 我将添加一个 ifgreater 节点来进行比较 Ifgreater 比较其两个输入 当其第一个输入大于 其第二个输入时返回一个值 当第一个输入小于其第二个输入时 返回不同的值 这个 ifgreater 节点 被设置为输出浮点值 但是我们希望 在两种颜色之间进行选择 一种用于地形 另一种用于地形线 在检查器中的类型下 将此节点更改为输出 RGB 接下来 让我们挑选两种颜色 在检查器中 点击 True Result 旁的 颜色选择器并设置地形颜色 我们选择白色 保留 False Result 这是地形线颜色 设置为黑色 与白色地形形成鲜明对比 我尝试了很多值 最终得到了 0.002 作为合适的线宽值 所以在检查器中 我将比较值设置为 0.002 我将 ifgreater 节点的输出 连接到表面的漫反射输入 太棒了 现在我们的材质 在地形上的每个点 都设置了颜色 创建了一个地形线材质 接下来 让我们看看如何使用节点图功能 节点图有助于简化复杂的材质 并允许你创建自己的节点 来复用图的某些部分 我们将使用节点图 为材质提供真实的地形图外观 让我们在材质的当前线条之间 添加第二组线条 这是我们的材质当前的样子 这是材质 添加细分后的样子 我们将从材质中 绘制地形线的四个节点开始 然后将它们组成一个节点图 这会把四个节点合并为一个节点 最后 创建节点图的一个实例 来复用其功能 一个节点图 用来绘制我们最初的一组线 它的实例将绘制我们的第二组线 让我们回到 Reality Composer Pro 并构建它 这是我们的地形线着色器 拖动以选择这四个节点 这些节点用于 计算线条的颜色 以及绘制它们的位置 选择它们后 点击鼠标右键 并选择编写节点图 现在这些节点作为单个节点出现 可以在其他图中使用 让我们为新节点 指定一个描述性名称 我们称它为 Lines 我们将创建该节点图的副本 来绘制第二组线 为此 使用层次结构中的 创建实例命令创建一个实例

实例是对原始节点图 做出更改的实时副本 我们将通过选择它回到材质 新实例命名为 SecondaryLines 我们希望节点图及其实例可以绘制 具有不同间距和颜色的线 因此 我们将在原始节点图中添加 两个输入 称为 Spacing 和 Color 以控制这些属性 双击原始节点图 开始编辑 你可以在检查器中向节点图 添加输入和输出 首先 让我们添加一个 名为 Spacing 的输入 并将其类型设置为 Float 再添加一个名为 Color 的输入 来控制地形线颜色 将输入类型设置为 Color3

我将这些连接到图中的正确位置

让我们 从项目层次结构中选择以返回材质 注意 现在我们的节点图 有刚刚创建的两个输入 并且实例继承了这两个新输入 在原始 Lines 节点图上 将间距设置为我们之前选择的值 为实例节点图选择 较小的间距和较浅的颜色

最后一步是将原始节点图 和实例节点图的输出组合起来 我们轻松地 为两个节点图选择了灰度颜色 因此可以使用 multiply 节点 将它们的颜色组合起来 太棒了！我们有两组令人满意的 地形线材质 接下来我们聊聊几何修改器 这些是自定义材质的一项功能 可用于实时修改模型 我们将替换静态地形模型 并使用几何修改器 和高度数据重新创建它 然后 我们将扩展几何修改器 以便在两个 不同的地形之间动态设置动画： 优胜美地山谷 和加利福尼亚州的卡塔利娜岛 完成后 我们将拥有一个动态地形材质 可以在两个 不同的位置之间制作动画 让我们看看这是如何做到的 到目前为止 我们看过的 所有着色器都是表面着色器 这些着色器在渲染模型时 为模型的每个像素 设置基于物理的属性 (PBR) 几何修改器类似于表面着色器 但操作的是对象的几何体 事实上 你可以在 Reality Composer Pro 的 同一编辑器中构建它们 我来简单描述下 要构建的几何修改器 该修改器将使用高度图数据 创建优胜美地山谷的地形 我们将从一个平面模型开始 该模型包含一些平面几何体 这是基面 接下来 我们将使用地形高度数据 这是关于模型 每个位置高度的 2D 数据 并使用几何修改器 将地形升高正确的量 便可以生成我们想要的地形 我刚刚展示了基础版本 接下来将展示一个 采用两组地形高度的版本 并使用这些高度 在我们感兴趣的两个地点 优胜美地山谷 和卡塔利娜岛之间设置动画 这是另一个视图 我们将从一个平面模型开始 几何修改器将使用 类似这样的 2D 高度图中的数据 垂直移动其顶点 我们要做的第一件事是 使用 Deactivate 命令 隐藏预构建的优胜美地山谷模型 我们会生成 相同的优胜美地山谷模型 但这次使用我们的几何修改器 我将从项目浏览器中 的平面磁盘模型开始 我可以将它拖到项目层次结构中的 根实体中实现引用 我继续创建了一个名为 DynamicTerrainMaterial 的新材质 并将其分配给磁盘 让我们开始使用几何修改器 在 Shader Graph 编辑器中 我们需要一个几何修改器的表面 我们把它添加到 PBR 表面旁边的材质中 我将从输出节点的 自定义几何修改器输入 拖动一个连接 然后从 New Node UI 中选择 几何修改器 让我们首先将优胜美地山谷 的图像应用于我们的表面 要读取图像数据 我们将使用图像节点 在检查器中 将优胜美地山谷图像 分配给图像节点的文件名输入 由于地形过于平坦 所以看起来有点滑稽 但我们现在要解决这个问题 我们需要山谷的高度数据 它位于包含高度值 而没有颜色数据的图像文件中 由于此数据位于图像中 因此我们将通过 添加另一个图像节点来读取它 现在 将包含高度数据的 优胜美地山谷 EXR 图像 分配给新图像节点的文件名输入 几何修饰器可以 向任何方向移动模型的顶点 但我们只对垂直移动感兴趣 所以让我们插入 一个 Combine 3 节点 来创建一个 只有 Y 分量集的 3D 向量 现在将其连接到 GeometryModifier 表面的 模型位置偏移输入 然后 我们的平面模型便转换为 优胜美地山谷 我们还需要再做一件事 当我们移动顶点时 还需要设置模型的表面法向量 以匹配我们的新地形形状 有一些方法 可以根据高度数据计算处理这些值 但是今天我们将使用一个 包含预先计算的几何法线的图像 让我们创建 另一个图像节点来读取法线

由于这些都是预先计算的 我们直接将它们 连接到表面着色器 的法线输入 以提高准确度 我们的表面预期法线的值 介于 -1 和 1 之间 但图像的法线 介于 0 和 1 之间 我使用重新映射节点 重新映射了图像中的值

现在我们已经使用高度数据 从一个平面几何体创建了地形 接下来 让立体模型动态化 并添加从一个地形 改变为另一个地形的能力 在本例中 我们将添加一个动画过渡 将优胜美地山谷更改为卡塔利娜岛 为了实现这一点 我们首先将另一组图像节点 添加到现有的几何着色器中 节点包含卡塔利娜岛地形的 高度、颜色和法线 然后我们将添加混合节点 来混合这两组高度、法线和颜色 最后 我们将一个值 连接到混合节点 以控制两组数据之间的混合 现在让我们在 Reality Composer Pro 中构建它 这是我们当前的材质 让我们为卡塔利娜岛 而不是优胜美地山谷添加另一组 包含相同数据 (高度、颜色和法线) 的图像节点 接下来 添加一些混合节点 混合两种颜色、高度和法线 最后 将一个 0 到 1 的常量 连接到我们的混合节点 该操作可以控制显示的地形 你会注意到 当我将混合常量设置为 1 时 地形显示为卡塔利娜岛 当我将混合常量设置为 0 时 则显示优胜美地山谷 现在我们有了一种可以在 两种不同地形之间转换的材质 让我们从 Swift 代码中 更改转换进度值 使用 Promote 命令将进度值 转换为材质的输入 材质的输入成为材质的属性 可以从 Swift 代码中访问 现在 我们的材质已准备好 用于 Dioramas Swift App 这是最终版本 它结合了地形线和动态地形 这个版本有一些额外的改进 比如抗锯齿地形线 和环境遮蔽贴图 都是使用 Shader Graph 添加的 请在本讲座的示例中查看这些内容 以上就是本讲座的全部内容 今天 我们简要介绍了 xrOS 中的材质； 使用 Reality Composer Pro 中的 Shader Graph 编辑器 设计了一个动态材质； 学习了如何使用节点图来组织图 并制作自己的可复用节点； 最后 在已有知识的基础上 结合几何修饰器 动态地重塑对象 Reality Composer Pro 为设计材质增添了 巨大的潜力 但事实上 Reality Composer Pro 还有很多功能 而且还能帮助你 在 xrOS 上创建沉浸式体验 在 Amanda 的 “在 Xcode 中使用 Reality Composer Pro 内容”讲座中 你将学习如何将 Reality Composer Pro 内容 集成到 Dioramas Swift App 中 如果你还没有看过该讲座 可以先观看 Eric 的讲座 “初识 Reality Composer Pro” 学习如何入门 我希望你可以享受 探索和设计 xrOS 内容的过程 感谢观看 ♪