探索空间计算的渲染

♪ 悦耳的器乐嘻哈 ♪ ♪ 大家好！ 我是 Ivan 是 RealityKit 团队的一名工程师 欢迎观看本期讲座 “探索空间计算的渲染” RealityKit 是一个用于渲染、 动画和模拟 3D 模型的框架 RealityKit 最强大的一项功能 就是为你的内容应用逼真的渲染 为了帮助你充分利用 RealityKit 的 渲染功能并增强内容外观 我想分享一些在开发 空间计算 App 时 要记住的渲染注意事项 我们先了解 3D 内容的光照和阴影 然后了解 RealityKit 材质的新增功能 接着 我将介绍大幅提高 系统性能的光栅化速率图 我将分享一些建议 帮助各位调整内容 使其与此优化很好地配合使用 最后 我将介绍一种 可以确保 UI 始终清晰的 动态内容缩放技术 先从光照和阴影开始介绍 如果你熟悉 iOS 和 macOS 上的 RealityKit 你会发现大部分内容 也适用于构建空间体验 我们在 RealityKit 中 引入了基于图像的光照 使你的内容看起来逼真 基于图像的光照 也称为 IBL 使用如右边的纹理来生成逼真的反射 阴影帮助我们理解对象 相对于彼此的位置 在我们认识新功能之前 先来快速了解一下 基于图像光照的组件 IBL 有两个主要组件： 由 ARKit 提供并且专用于室内的 物理空间的环境探测器纹理 以及与 OS 一起封装的 系统 IBL 纹理 系统 IBL 纹理添加了额外高光 确保你的内容 在任何环境中看起来都很棒 将这两个组件加在一起 可生成组合的 IBL 纹理 如果有活动环境 它也会 对组合的 IBL 纹理产生影响 今年 RealityKit 增加了覆盖 系统 IBL 纹理的功能 以便自定义光照 我们来看一个示例 这是一个提供了太阳系 视图的“Hello World”体验 默认情况下 RealityKit 将使用系统 IBL 为其提供光照 但是 如果将新的 IBL 指派 给基于图像的新光照组件 它将替换系统 IBL 并使用周围的 沉浸式环境照亮这些对象 我来展示一下如何实现这一点 在这里 我们先加载 3D 内容 在本例中 它是卫星模型 然后 我们加载一个 名为“阳光”的环境资源 它包含“太阳” 和围绕“地球”的恒星的图像 我们需要模型和环境资源 来设置 IBL 因此要确保 两个加载操作都已完成 接下来 我们添加 ImageBasedLightComponent 它引用了我们刚刚加载的环境资源 最后 我们将 ImageBasedLightReceiverComponent 添加到卫星实体中 你甚至可以将这些接收器组件 添加到其他实体中 以便使用相同的 IBL 来照亮它们 在 RealityKit 中定制光照 就是这么简单 接下来 我们看看如何在 App 中 添加阴影 举一个简单的例子 我们要将一个像花瓶这样的 3D 对象放置 在一个浮动平面的顶部 如果没有阴影 可能就很难理解 花瓶和平面的相对位置 但是 通过添加 RealityKit 的接地阴影 花瓶就可以更清楚地 位于平面中心上方 我们来看看如何 在代码中做到这一点 我们从加载花瓶模型开始 在这里 flower_tulip 是我们项目中 3D 模型的名称 接下来 添加接地阴影组件 请确保将 castsShadow 标志设置为 true 完成了！ 花瓶实体现在可以投射接地阴影了 很简单 对吧？ 接地阴影出现在 3D 模型 以及物理环境中的对象顶部 使用自定义 IBL 来照亮场景 并且加上背景阴影 可以使内容效果更好 但也可以通过调整材质 来直接处理对象的外观 大多数 macOS 和 iOS 支持的 RealityKit 材质在 xrOS 上也可用 我们来快速回顾一下 最常用的材质是 PhysicallyBasedMaterial RealityKit 中的 PhysicallyBasedMaterial 会对光照做出反应 可用于表示各种真实世界的材质 例如塑料或金属 SimpleMaterial 也会对光照作出反应 但使用的参数子集较小 它特别适合快速实验 UnlitMaterial 不会对光照产生反应 换句话说 它在不断变化的 光照条件下会保持恒定的外观 视频材质是不受光材质的一种变体 可以将影片文件映射到实体的表面上 除了这些材质外 RealityKit 还引入了一种名为 ShaderGraphMaterial 的 新型材质 你可在 Reality Composer Pro 中创建新的 ShaderGraphMaterial 或从 MaterialX 文件中加载它 可观看讲座 “了解 Reality Composer Pro 中的材质” 进一步了解 ShaderGraphMaterial 的信息 所有这些材质的颜色输出 都要经过一个 “色调映射”的特殊步骤 色调映射是 RealityKit 默认应用于材质颜色输出的转换 它使用多种技术 来实现更自然的感知颜色 其中一种技术是 将高于 1 的值重新映射到 可见范围 让我用一个示例来说明 这是禁用色调映射 电视的 3D 渲染 我为显示器分配了 一个具有非常明亮值的纹理 现在 如果我启用色调映射 你就可以在明亮的区域 看到更多细节 比如这些花瓣 通常 色调映射效果很好 可以呈现美丽的视觉效果 但对于某些用例 你可能希望显示对象的确切颜色 为此 你必须选择退出色调映射 让我们看一个示例 这是一个简单的 App 它显示了一个交通灯 和三个标有“停止”、 “等待”和“前进”的按钮 红绿灯本身是一个 3D 模型 这三个按钮通过 SwiftUI 添加 为了使灯的颜色 与按钮的颜色精确匹配 可以为灯使用不受光材质 因为不受光材质不受光照条件影响 可保持物体外观不变 但是 不受光材质的输出 仍受色调映射的影响 默认情况下 所有 RealityKit 材质都会启用色调映射 因此 即使为 SwiftUI 按钮 和灯的材质分配了相同的颜色 它们也可能看起来略有不同 你看到的屏幕截图已启用色调映射 我们来看一下禁用灯材质的 色调映射的效果 你会注意到灯和按钮的颜色 已精确匹配 我们来再次切换灯材质的色调映射 这是启用色调映射的效果 而这是禁用色调映射的效果 我们来看一个代码示例 它展示了如何在代码中切换色调映射 我们先加载交通灯模型 在这里 traffic_light 是我们项目中 3D 模型的名称 接下来 我们找到 名为 red_light 的实体 这个实体对应于交通灯的顶灯 拥有实体后 我们访问它的模型组件 接下来 我们创建一个新的不受光材质 我们传递所需的颜色 和一个新的布尔参数 applyPostProcessToneMap 将此布尔参数设置为 false 以便禁用此材质的色调映射转换 最后 我们替换模型组件上的材质 并指派模型组件返回给实体 这三盏灯都是这样做的 现在按钮的颜色和灯的颜色 应该非常匹配 若想在场景中显示 准确的颜色表示 applyPostProcessToneMap 会非常实用 当使用 RealityKit 构建菜单 或平视显示之类时 这会很方便 Reality Composer Pro 的 材质编辑器中也显示了 这一新属性 现在 我们来了解一些质量注意事项 先从用于空间计算的 光栅化速率图开始说起 头显中使用的显示器具有高分辨率 操作系统需要每秒多次更新 这些显示器 我来从视觉的角度解释一下 大家知道 头显能够 准确地检测出人眼在看什么方向 这是一个模拟场景 一个人将眼睛向右移动 然后再回到中心 黄色圆圈代表人眼 焦点的中心点 该点周围的区域 将以光晕高亮显示 外围将变暗 光栅化速率图使其能够在变暗的区域中 执行更少的计算 你可以看到 在任何给定时刻 高亮显示的区域与外围相比都很小 这使系统能够显著节省 内存和性能 在 RealityKit 中 此优化会为你自动启用 虽然它极大地提高了系统性能 但在某些情况下 你可能需要调整内容 才能使其与这种优化 很好地配合使用 例如 这是一个棕榈叶资源 当放置在屏幕中央时 它看起来清晰且细节丰富 但是 如果将对象向左移动 并再次应用眼动模拟时 你可以观察到棕榈叶上的闪烁 当代表眼睛方向的黄色圆圈 靠近屏幕右边缘时 闪烁会特别强烈 之所以会发生闪烁 是因为光栅化速率图 可以在人注视的点周围 提供更高的细节 而当眼睛离开棕榈叶时 棕榈叶周围的像素 会以较低的细节渲染 现在 你可以通过简单地调整内容的 几个参数来减少闪烁 我们来看看这个 这是同一个棕榈叶资源 在其上面覆有红色线框 可以看到这里有很多小三角形 这些小三角形是外围 闪烁的原因 我们可以通过简单地将三角形 放大并将细节存储在不透明度纹理中 来减少闪烁 下面是调整资源后模拟的外观 这个 3D 模型 在调整后看起来效果更好 因为 RealityKit 在加载资源时 会自动生成较低分辨率的 不透明度贴图 这些较低分辨率的 纹理版本称为 mipmap 图形处理器会自动使用它 来改善细节较低的区域的外观 有关光栅化速率图的更多详细信息 请参阅文章 “以不同的光栅化速率渲染” 与光栅化速率图类似 还有另一种“动态内容缩放”技术 它可以自动改善使用 SwiftUI 编写内容的外观 我们来看看 这是显示以网格形式 排列月份列表的 App 每个月份用一个文本标签表示 当眼睛注视六月时 系统会以最高的细节 将该区域的文本光栅化 “六月”周围用蓝色标记的区域 将被光栅化 细节程度略有降低 但总体上仍保持高质量 然而 紫色标记的区域 光栅化的细节程度要低得多 人类视觉系统 感知到的外围细节较少 因此不会那么明显 这种基于眼睛所看内容的 可变细节层次的光栅化 称为“动态内容缩放” 该系统依靠动态内容缩放 以正确的比例来绘制 UI 内容 并确保其始终清晰 动态内容缩放会影响光栅化内容 在内存中的相对大小 换句话说 我们的文本标签 会根据距离眼睛注视点的 距离来缩放到不同大小 例如 可以看到写着 “六月”的标签是最大的 它有着最高的分辨率和细节 然后 有一组是八个月份 一月、二月、三月等等 细节稍少 最后 有一组是三个月份 四月、八月、十二月 这些月份离眼睛看的方向最远 最后一组在内存中将用较小的 图像来表示 现在 我们来了解一下 如何启用动态内容缩放 如果你使用的是 UIKit 和 SwiftUI 你的 App 将自动 应用此技术 如果你依靠 Core Animation 框架来构建 UI 则可以使用新的 API 来启用动态内容缩放 我们来看看这个 API 可以通过将 CALayer wantsDynamicContentScaling 的 属性设置为 true 来启用 动态内容缩放 请注意 该技术依赖于 更高分辨率的光栅化 因此不建议 对基于位图的内容过多使用 可以在 developer.apple.com/cn/ 上 找到关于动态内容扩展的 完整推荐列表 我们来总结一下今天介绍的内容 我们先了解了 如何向 RealityKit App 添加基于图像的光照和接地阴影 然后 我们回顾了可用于 空间体验的材质 包括新的 ShaderGraphMaterial 我们还了解了如何控制不受光材质的 色调映射 接着 我们了解了如何 将光栅化速率图用于空间计算 包括如何调整 3D 模型 来减少周边闪烁的示例 最后 我们了解了动态内容缩放 在系统上的工作原理及用法 我们对今年的发布非常振奋 很期待看到你在 xrOS 上建立 美妙的空间体验 谢谢大家 ♪