为 visionOS App 和空间网络设计沉浸式环境

你好 我是Michael Breymann 我是Apple 的人机界面设计师 负责visionOS 系统环境设计

在visionOS中 系统环境 不仅仅是简单的背景 它们是为空间计算设计的 逼真自然景观 将你带到 另一个时空 在Haleakala 你可以欣赏 云端之上的绝美全景 但与平面媒体 或全景图像不同 后者无法响应 视角的变化 这个环境提供了 真实的深度和视差 让人获得与 真实世界相同的体验 当你结合动态与音频时 场景便充满生机 让观众沉浸其中 在这次演讲中 我将带你了解 设计过程的每个环节 帮你制作自己的 沉浸式环境 前期制作 制作 以及后期制作 我将分享每个阶段的 原则和概念 帮助你打造 引人入胜的沉浸式体验 并以六个visionOS系统 环境为例进行说明 Mount Hood 月球 木星 Yosemite Thorsmork 以及Bora Bora 现在开始进入 前期制作 当我们的团队 启动新环境项目时 我们首先会花时间 明确我们的设计意图 我们为什么要构建 这个特定的环境? 我们想呈现 哪些特质? 观看者将如何 使用这个空间? 这些都是你在项目中 需要思考的重要问题 例如 当我们的团队开始思考 系统环境的使用场景时 以大屏幕观看媒体内容 让我们格外兴奋 我们希望媒体体验 能够带来电影般的感受 因此我们将地形 雕刻成适合大屏幕的形状 并研究了 最佳视线中心 Keynote环境 则有不同的用途 它为人们提供了 练习公众演讲的空间 仿佛他们正在 真实的舞台上现场演出 这里刻意没有声音 以保持专注 灯光集中在舞台上 就像他们站在 观众面前演讲时一样 你可能希望环境 成为你App内容的背景 或者展示来自 网络的体验 无论你在设计什么 这个构思阶段对于 构建环境至关重要 在早期回答这些问题 可以帮你节省时间 避免 在制作后期犯代价高昂的错误 如果你的设计取材 自真实地点如Mount Hood 提前勘察地点 会非常有帮助 考虑你希望将观看者 置于场景中的哪个位置 以及当他们 转身时能看到什么 在visionOS中 完全沉浸时 观看者的视野 约为81° 可以看到的场景 勘察也很有帮助 可以了解哪些特征 不适合在环境中展示 顶部全景图显示了 我们的Mount Hood地点 注意道路以及摄像机转向 背面时的茂密植被 我们的团队将这些标记为 需要在制作阶段替换 底部全景图显示了 团队完成修改后的结果 当然 有时你想创建的环境 在现实世界中 并不容易到达 例如 当我们制作 月球环境时 我们借助阿波罗任务的照片 来帮助我们构想场景 参考资料 比如照片和视频 如果你要构建这样的环境 是必不可少的 你可以验证 你已有的假设 并解决任何差异 你也可以使用参考资料 更好地了解 地球上某个地点 例如 我们的团队 进行了一项光线研究 使用Yosemite山谷的数字高程 模型和地球轨道数据 来确定我们想要拍摄的 确切日期和时间 无论你是从头构建环境 还是基于真实地点 以下几点需要牢记 在规划 制作的后续阶段时 尝试以图层的方式 构想你的环境 从背景到前景 逐层构建 确定哪些场景元素 需要动态效果 并开始思考可以 附加哪些空间音频 这将帮助你提前 处理潜在的复杂情况 避免影响资产创建 最后一件事! 通常在前期制作阶段 你会发现一些 能让计划变得更好的事情 例如 对于Jupiter环境 我们建立了太阳系的比例模型 以便了解太阳 如何照亮木星的卫星 在这个过程中 我们意识到需要一个 允许时间流逝的系统 这成为了最终环境的 关键设计要求

总结一下 当你开始 环境的前期制作时 确保你的意图明确 通过参观真实地点 来勘察你的场景 并收集参考资料 考虑你的环境 的构图与图层 以及哪些内容 需要移除或更改 利用前期制作 获得的所有资源 通过迭代完善你的想法 因为有一个扎实的计划 来规划如何构建 你的环境 将为你进入下一阶段 做好准备: 制作 构建复杂的3D场景 需要时间 但你可以让自己 以及合作者的工作更轻松 方法是在源头捕获 高质量的照片 Yosemite环境 就是一个很好的例子 在我们团队的提前勘察中 我们确定了 想要的确切视角 观看者置身Yosemite山谷 拥有通透的中景视野 这种取景方式 非常适合沉浸式环境 你可以用CG元素 为前景添加细节 但移除遮挡视线的 物体要困难得多 当我们准备进入制作阶段时 我们带着设备 返回了山谷中的那个地点 以及一份非常详细的 拍摄计划 季节 天气 甚至一天中的时间都会大幅 改变你能拍摄到的内容 对于Yosemite环境来说 确实如此 光线变化很快 尤其是日出和日落时分 计划在地点花费更多时间 拍摄更多照片 比你预计的要多 你拍摄的每张照片 都可用于创建 环境的3D资产 因此捕获可直接使用的 原始素材非常重要 以下几个技巧 使用三脚架 将相机水平 置于离地1米高处 并确保足够的景深 如果可能 在离地2米处 再架一台同步触发的相机 这个备用视角在 后期制作中非常有帮助 可以填补主视角 无法看到的场景部分 记住 你要创建的是 360°的沉浸式环境 因此需要使用能覆盖 所有角度的装备和镜头 最终生成 拼接全景图 环境的动态范围 可能非常大 从阳光到阴影 因此请拍摄包围曝光 以确保捕获所有细节 了解你的目标输出显示器 捕获的分辨率要高于 你认为所需的程度 对于visionOS 环境在 每度40像素时非常清晰 因此14,400 x 7,200像素的 360°全景图是理想目标 除主要摄影外 最好在现场同时 拍摄辅助参考照片 用于参考和测量 摄影测量和LiDAR 生成的点云 可以网格化并作为 3D资产的起点 这些数据也可用于 距离测量 例如 你可能会发现 你认为平坦的地形 实际上有坡度 有了这些信息 你在构建3D资产时 可能会做出不同的选择 光线参考特别有帮助 可以让CG资产无缝 融入你的环境 Macbeth色卡 以及铬球和灰球 应与主要摄影 同时拍摄

运动中的场景元素视频 也能提供宝贵的参考 帮助创建逼真的着色效果 注意记录哪些声音 与运动相关 以便获取 合适的音频素材 如果无法通过摄影 捕获全景图 你需要创建 渲染的全景图 使用你喜欢的 数字内容创作工具 创建渲染全景图的优势 是你可以随时对 整个场景拥有完全控制权 制作阶段为你 和你的环境奠定成功基础 精心的准备将帮助你 拍摄最佳照片 用于下一阶段 高质量的图像为你 或你的技术艺术家 提供宝贵的数据 辅助摄影 和参考资料 可以提供场景的额外信息 让你的3D工作更轻松 最后 这个流程 并非一成不变 如果你是资源有限 的小型团队 可以根据这些最佳实践 调整你的制作方式 制作阶段结束后 你应该有足够的素材 来创建高分辨率源全景图 有了这些素材和参考内容 你现在可以开始 设计你的3D资产了 第一步是什么? 清理 让我们来看看 Thorsmork环境的主要摄影 以及我们的团队如何 清理这张全景图 这里有几个明显的问题 是你不希望出现在 最终环境中的 比如摄像机装置

还有脚印和人物 这些会破坏风景的感觉

清理阶段也是前期制作 笔记派上用场的时候 让我们来看几个 场景元素 它们正在干扰 我们理想的构图 比如这里 中景中的植被 过于杂乱

这些灌木在 画面中太过突出 一旦确定了 需要移除的关键元素 我们的团队开始工作 并完善图像 通过数字实景绘画和 渲染CG资产的迭代 在整个过程中注重 色彩平衡和光线一致性 非常重要 后期制作涉及大量 关于环境外观的 创意决策 但这个阶段还有 另一个关键方面 在准备最终资产时 保持视觉保真度 由于需要3D网格来 实现视差和深度感 你需要将精修的全景图 转换为UV空间中的纹理 全景图中不可见的 场景部分需要填补 这就是辅助摄影和CG渲染 补充主视角的地方 在此过程中 始终在3D资产和全景图之间 进行A/B对比非常有帮助 以确保纹理转移 保持最高质量 确保所有场景元素 具有一致的清晰度 尤其是与邻近元素相比 以传达正确的比例感 尝试翻转场景 以全新的方式来审视它 在后期制作的这个阶段 你的眼睛可能已经 太习惯于看同一画面 因此可以用这个技巧 确保构图仍然有效 你也可以对环境进行 极端的伽马和增益调整 这种技术可以揭示 任何色彩和值的不一致 以及纹理转移过程中 的任何数据损失 在不同显示器上查看时 可能更加明显 后期制作的许多方面 涉及创意选择 但也有大量支撑 这一阶段的技术艺术 要了解有关如何实时 渲染环境的更多信息 请查看"Optimize your custom environments for visionOS" 现在你已经有了纹理网格 环境的视觉基础 已经完成 但你还需要几个元素 来完善沉浸感 声音和动态 声音对于 创造沉浸感极为重要 你可以放置空间音频源 来放大这种效果 例如 在这个环境中 一个附带潺潺水声的 发声源 位于河流中水流 绕过大石头的地方 空间音频的设计 与实现 本身就是一个大话题 请查看这两个精彩的演讲 了解声音如何增强 沉浸感 在你的环境中 说到河流 它也需要流动! 对于环境中 任何需要动态的部分 自定义着色器可以帮助你 创建最佳视觉效果 同时保持能耗效率 Thorsmork是 亚北极地区的景观 这里可设计的 动态元素不多 所以让我们向南出发 前往法属波利尼西亚的Bora Bora 一个充满运动感的环境 像Bora Bora这样的景观 有大量复杂的动态和光线交互 我来加快时间流逝 以便你看得更清楚 云朵乍看似乎是静止的 实际上在不断变化 在整个环境中投下阴影 棕榈树在风中摇曳 浪花每次拍打海岸时 都略有不同 所有这些细节为 环境增添了真实感 但动态和光线可能是 渲染中最耗资源的部分 对于像Bora Bora这样的场景 我们的团队需要创造性地思考 如何实现视觉效果 同时不超出 实时渲染预算 我将分享 我们使用的几种技术 并介绍你如何在 自己的环境中加以运用 让我们从天空开始 它是场景的重要组成部分 我们希望它感觉像 云朵在不断 朝着一个方向演变 UV流动贴图以 极低的成本实现了这一效果 通过对天空不同区域的 流速进行加权 呈现出宏大而 有深度和层次的感觉 云朵阴影并非通过 渲染光源实现 而是通过滚动遮罩 使地形纹理变暗 云朵的方向和速度 与阴影匹配 让它们感觉相互关联 尽管实际上并非如此 让我们回到实时速度 查看环境的 另一个部分 在棕榈树下 那些更密集清晰的阴影 被预渲染到翻转书纹理中 使地形纹理变暗 这样一来 你可以用较低的成本 渲染柔和阴影 换取一个可信的近似效果 看似违反直觉 但 往往少即是多 将复杂的着色工作 转移到预计算数据纹理 可以生成运动效果 否则实时渲染 会过于昂贵 例如这些棕榈叶片 其网格复杂度已大幅降低 风力动效来自UV流动贴图 产生最终效果 注意树干和叶片 的摇摆比小叶更缓和 这是通过分层正弦波的 分级顶点动画实现的 通过叠加低频 和高频运动 可以创造出 永不重复的多样性 事实上 许多昂贵的渲染 可以通过 纹理的艺术化分层 和合成操作来减少 以水为例 水的色调 饱和度 和亮度可以随时间调制 以模拟阳光的 次表面散射 波浪可以通过法线贴图 和滚动纹理的层次来运动 这些效果的总和 大于各部分之和 让所有这些效果协同运作 感觉它们存在于同一个世界 需要艺术性 和创意指导 为确保你在为着色器 开发正确的功能和控件 记住你的视觉参考 可以是很好的资源 来阐明你需要构建的内容 让我们来总结一下 在后期制作中 你将所有规划 参考资料和照片 融合 让环境焕发生机 你会清理全景图 在3D中完善场景 确保各元素感觉恰当 并添加声音和动态等 支撑细节以完善沉浸感 沉浸式环境的设计 真正在于产生令人信服的结果 呈现一种 感觉真实的幻觉 这一切都由你掌控 因此在制作的每个阶段 你都要审视自己的 创意决策是否有价值 最后 在开始设计 你的环境时请牢记这些 对你所做的 每件事都要有明确意图 你应该能够解释你添加 或移除的每件事背后的原因 创建一个有效的构图 每个场景元素都应感觉 自然地属于它所在的位置 场景的所有方面都应 通过声音和动态连接在一起 好的设计让你的 工艺和执行更加出色 无论你是个人开发者 小型团队还是大型工作室 最后 我想留给你 一个终极想法 通常检验设计是否有效 的最好方式是尝试破坏它 不要对任何想法 过于执着 做一些出乎意料的事 并对结果保持开放态度 你最好的作品往往 来自那些意外的惊喜 那些你在路途中 欣然接受的惊喜