WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Explore materials in Reality Composer Pro

Explore materials in Reality Composer Pro

RealityKitReality Composer ProMaterialXShader GraphvisionOS
观看原视频

Highlight

Reality Composer Pro 的 Shader Graph 编辑器让开发者无需编写 Metal 代码，就能通过可视化节点图创建 MaterialX 标准的 ShaderGraphMaterial，实现地形等高线、动态几何变形等复杂材质效果。

核心内容

做 3D 开发时，材质（Material）一直是个痛点。以前要在 iOS 上写自定义材质，得用 Metal 手写 shader 代码。这对程序员来说门槛高，对美术来说几乎不可能参与。

visionOS 引入了一种全新的材质系统。它基于工业光魔（ILM）2012 年创建的 MaterialX 开放标准，通过 ShaderGraphMaterial 让材质创作变成可视化操作。

Shader Graph 编辑器直接内建在 Reality Composer Pro 中。美术可以在里面拖拽节点、连线、调参数，实时看到 3D 视口中的效果。程序员则可以把材质导出到 Xcode，通过 Swift 代码动态控制。

这种分工解决了长期以来的协作问题：美术负责视觉效果，程序员负责交互逻辑，两边不用互相等。

材质基础

visionOS 中的材质基于物理渲染（PBR）。（01:29）

PBR 材质用真实世界的物理属性来定义外观，比如金属度（metalness）和粗糙度（roughness）。一个简单的蓝色球体，反射率设为 40%，就能有基础的光泽感。贴上颜色和粗糙度贴图，可以做出逼真的混凝土效果。调高金属度，就能模拟铁器质感。

ShaderGraphMaterial 支持两种 shader 类型：

  • Physically Based：基础 PBR shader，适合简单场景，用常量值或贴图配置各属性
  • Custom：完全自定义控制，支持动画、几何变形、特殊表面效果

（02:51）

等高线材质实战

演讲用一个 Yosemite Valley 地形模型演示了如何从零构建一个等高线材质。（04:02）

思路很简单：根据地形高度，在特定海拔画线。具体做法是用 position 节点获取渲染位置的 3D 坐标，用 separate 节点提取 Y 轴（高度），再用 modulo 节点把高度按固定间隔分段，最后用 ifgreater 节点判断当前高度是否落在等高线宽度内，决定显示地形色还是线条色。

节点图的连接方式很直观：

Position → Separate 3(Y) → Modulo(÷0.1) → IfGreater(>0.002)
                                              ↓
                                        Surface Diffuse Color

（06:33）

节点图复用

当材质变复杂后，节点图会变得混乱。Reality Composer Pro 提供了 Compose Node Graph 功能，可以把一组节点打包成一个可复用的节点。（10:28）

打包后的节点可以创建 Instance（实例）。实例会实时同步原节点的修改。给原节点添加 Spacing 和 Color 输入后，所有实例也会自动获得这些输入。

这个特性让材质设计有了模块化思维。可以把常用的效果（如等高线、噪波、渐变）封装成节点库，在不同项目中复用。

几何变形器

几何变形器（Geometry Modifier）是 Custom shader 的进阶能力。它不像表面 shader 那样只改变像素颜色，而是直接移动模型的顶点位置。（13:18）

演讲演示了一个震撼的效果：从一个扁平的圆盘开始，用高度图数据把顶点抬高，实时生成 Yosemite Valley 的地形。然后用 mix 节点混合两套高度图、法线图和颜色图，实现两个地形之间的平滑过渡。

关键的一步是用 Promote 命令把混合参数提升为材质的自定义输入。这样 Swift 代码就能实时控制过渡进度，做出动画效果。（18:43）

详细内容

ShaderGraphMaterial 的核心节点

Shader Graph 编辑器中的节点按功能分类。做材质时最常用的几类：

输入节点

  • Position：返回当前渲染点在模型空间或世界空间的 3D 坐标
  • Normal：表面法线向量
  • Texture Coordinates：UV 坐标

数学节点

  • Separate 3：把 vec3 拆成三个 float 分量
  • Combine 3：把三个 float 合成 vec3
  • Modulo：取模运算
  • Remap：把数值从一个范围映射到另一个范围
  • Mix：在两个值之间线性插值

逻辑节点

  • IfGreater：比较两个输入，根据结果输出不同值

图像节点

  • Image：读取纹理贴图，支持颜色图、高度图、法线图等

（06:57）

从 Swift 控制材质参数

在 Reality Composer Pro 中，选中 shader 中的某个常量值，右键选择 Promote，就能把它变成材质的可编程输入。这些输入在 Swift 中通过 ShaderGraphMaterial 的接口访问。

import RealityKit

// 假设 material 是从 Reality Composer Pro 导出的 ShaderGraphMaterial
if var material = model.materials.first as? ShaderGraphMaterial {
    // 设置名为 "progress" 的自定义输入
    try material.setParameter(name: "progress", value: .float(0.5))
    model.materials = [material]
}

关键点：

  • ShaderGraphMaterial 是 visionOS 上自定义材质的唯一方式，替代了 iOS 上的 CustomMaterial
  • setParameter(name:value:) 用于修改材质输入，参数名必须与 Reality Composer Pro 中定义的输入名一致
  • 值类型用 .float()、.color()、.texture() 等枚举包装
  • 修改材质后需要重新赋值给模型的 materials 数组才会生效

几何变形器的实现细节

几何变形器的节点图比表面 shader 多一个 Geometry Modifier 表面节点。它的核心输入是 Model Position Offset，表示顶点在模型空间中的位移向量。（15:23）

地形生成的节点链：

Height Map(Image) → Combine 3(X:0, Y:height, Z:0) → GeometryModifier.ModelPositionOffset
Color Map(Image) → Surface.BaseColor
Normal Map(Image) → Remap(0..1 to -1..1) → Surface.Normal

（16:15）

关键点：

  • 高度图通常用 EXR 格式存储浮点高度值，比普通图片的 8bit 精度更高
  • 移动顶点后必须更新法线，否则光照计算会出错
  • 法线贴图里的值范围是 0..1，需要 remap 到 -1..1 才能给 shader 使用
  • 预计算法线比实时从高度图计算法线更准确，尤其在地形细节丰富时

地形过渡动画的完整节点结构

两个地形之间的过渡需要三组 mix 节点，分别混合高度、颜色和法线：

Yosemite Height → Mix → Combine 3 → GeometryModifier
Catalina Height →    ↑
                     progress (0..1)

Yosemite Color → Mix → Surface.BaseColor
Catalina Color →    ↑
                    progress

Yosemite Normal → Mix → Remap → Surface.Normal
Catalina Normal →    ↑
                     progress

（18:01）

把 progress 提升为材质输入后，在 Swift 中用 Timer 或 Animation 不断改变它的值，就能实现平滑的地形变形动画。

核心启发

1. 实时地形可视化工具 做什么：做一个能加载任意高度图并实时渲染 3D 地形的 visionOS App。 为什么值得做：Shader Graph 让地形渲染不再需要手写 Metal shader，几小时就能做出专业效果。 怎么开始：用 Reality Composer Pro 创建 Disk 模型，连接 Image 节点读取高度图，用 Geometry Modifier 抬高顶点。参考 Diorama 示例代码中的材质结构。

2. 可交互的材质展示器 做什么：做一个 3D 材质库，用户可以调节金属度、粗糙度、颜色等参数，实时看到 PBR 效果变化。 为什么值得做：PBR 参数对很多开发者来说比较抽象，一个交互式工具能加速学习。 怎么开始：在 Reality Composer Pro 中创建多个 Physically Based 材质，把关键参数 Promote 为输入。在 SwiftUI 中用 Slider 绑定到 ShaderGraphMaterial.setParameter()。

3. 动态数据驱动的 3D 图表 做什么：把实时数据（如股票走势、天气数据）映射到 3D 几何形状上。 为什么值得做：Geometry Modifier 可以按数据值实时改变模型形状，比普通 2D 图表更有冲击力。 怎么开始：用平面网格作为基础几何体，把数据值作为高度图传入 Image 节点，通过 Swift 代码每帧更新数据纹理。

4. 模块化材质资产库 做什么：把常用的 shader 效果（水波、火焰、金属氧化）封装成可复用的 Node Graph，发布为团队内部或开源的材质包。 为什么值得做：Compose Node Graph + Instance 让材质有了真正的模块化能力，团队可以共享和迭代材质资产。 怎么开始：在 Reality Composer Pro 中设计效果，选中相关节点 Compose Node Graph，导出 .usda 文件供其他项目引用。

关联 Session

评论

GitHub Issues · utterances