Yusong

Appearance

3D UI 设计与实现方案的探索 ​

文档内容 ​

  • 设计思路和预期效果.
  • 技术方案的实现思路和可能的难点.
  • 相比于 UGUI 在效果和性能上的优势.

UI 设计的思考 ​

UI 的功能 ​

  • 区分 可交互 与 不可交互 物体 (并暗示可交互物体的 交互方式).
  • 通过视觉意象 快速识别 (例如时钟图标就能和 "时间" 概念关联起来)
  • 注意力 的引导 (动画, 红点, 高亮, 背景模糊 都是常用手段).
  • 明文信息的陈列 展示 (例如 百分比, 时间, 文本).
  • 传达 状态 信息 (例如 开启/关闭, 聚焦, 激活).

设计要点 ​

讨论范围设计要点
整体观感排版 字体 色彩 动画
图标圆角 阴影 模糊 渐变

灵感与参考图 ​

可交互案例一 ​


如上图, 相比于众多手机主题设计方案, 其最大的特点是: 阴影的使用非常讲究.
整体阴影有明确的方向, 阴影的模糊与锐利程度可以明确地表现出每一层的高度.
像这种细致的阴影, 如果通过平面设计方案来制作, 反而不如 3D 方案简单.

可交互案例二 ​


制作此 icon 的视频.

上图如果使用 3D 方案, 可以利用 离线渲染引擎 轻松实现平面设计难以制作的效果.
简单的设计元素 (制作成本不算高), 细腻的阴影, 色彩, 材质表现 (所谓的 有质感).
在 UI 设计中要想实现 3D 效果, 如果采用平面设计方案, 也相对更麻烦一些.

可交互案例三 ​


上图最大特点是图标有 强烈的立体感. 显然是通过 3D 软件制作的.

如果作为可点击的按钮, 这种有强烈立体感的设计方案不太合适.
因为视觉效果过于接近场景中不可交互 3D 物体, 由此会对玩家产生困扰.

但是作为以 3D 数据存在的物体, 完全可以适当 展现侧面, 这是可取之处.
在游戏中的立体 UI 已有不少案例了, 但大多只是给平面的 UI 增加了透视, 并未体现 厚度.
可以利用手机的 陀螺仪 来略微旋转图标, 有个类似效果的 Twitter 视频.

同时可以利用 3D 渲染手段, 让图标受到 动态光照, 环境光, 反射探针 的影响.
例如灯光的亮度, 颜色, 数量, 位置等等都可以变化.

不可交互 ​


上图中的 UI 完全以立体的形式存在于场景中.
显然这是给 MR 软件设计的 UI, 但在手机游戏中依然存在使用场景: 展示 不可交互 的信息.

这种 UI 其实已经不是狭义的 UI 了, 毕竟和普通的 3D 物体没有任何区别.

3D 方案的优势 ​

方案简述 ​

  • 利用离线渲染引擎, 可以轻松实现图标的 质感 .
  • 能与 Unity 的 3D 渲染技术配合, 实现更丰富的 实时渲染 效果.
  • 性能比更好. 关于 UGUI 的性能问题详见 📄UGUI 性能优化方案.

性能优势 ​

美术效果层面的好处在前面已经通过参考图做了说明, 这里主要讨论性能优势.
Unity 自带的 UI 方案 UGUI 主要的性能问题是:

  • SetPassCall 数量多, 十几个到几十个, 基本没办法控制在个位数.
  • 发生改变时需要重建, 增加 CPU 性能开销, CPU 耗时上的毛刺可能会引起掉帧.
  • 单像素会被多次渲染, 也就是 overdraw 问题, 覆盖面积越大, 重叠层数越多问题越严重.

而 3D 方案彻底解决了上述三个 UGUI 的性能问题:

  • SetPassCall 基本等于画面中 UI 所使用的 shader 种类, 一般也就两三种.
  • 根本不存在 UGUI 中的 重建 这个概念, 因此没有任何来自于 重建 的性能开销.
  • UI 都是网格, 因此大多数 UI 都可以采用不透明材质, 也就能避免 overdraw.

INFO

即使用了透明材质, 也不会因为重叠导致额外的 overdraw, 因为能通过深度测试来剔除.

难点与解决方案 ​

文字输入 ​

3D UI 方案默认的渲染实体是 网格, 然而文本显然需要用别的方案来渲染.
好在 Text Mesh Pro 支持 3D 空间中的文字显示, 因此这就是解决方案.

另外一个难点来自 文字输入.
如下图所示, UGUI 中让玩家输入文本内容, 是通过 Unity 自带的 Input Field 组件.
如果采用 3D UI 方案, 就需要自己实现这些功能, 例如光标闪烁, 唤起特定的键盘等.

排版 ​

传统 UI 方案在排版方面有明显优势, 各方案都自带排版功能.
如果采用 3D UI 方案, 则需要自己实现排版逻辑.
实现 3D UI 排版方案时可能遇到的难点:

  • 3D 空间并没有一个类似于 canvas 的概念 (2D 空间可以直接使用像素).
  • 如果想要有更强的立体感, 可能需要使用 透视 摄像机, 这会给排版带来更多麻烦.
  • pivot 不可变 (2D 方案中随意调整), 没有 anchor 这个概念 (2D 方案中随意调整).

另外在 UGUI 中经常使用九宫格来切割圆角矩形, 方便在 Unity 中随意调整尺寸.
3D UI 方案要想实现 Unity 中自由调整尺寸, 会麻烦一些, 需要用到 blend shape.

动画 ​

一些常见的 UI 动画可能在 3D 方案中不容易实现, 例如: 淡入淡出, 遮罩.
例如淡入淡出动画, 需要修改透明度, 就得使用透明的 shader, 此时 overdraw 问题就来了.

不过既然选择使用 3D 风格的 UI, 那么淡入淡出动画在视觉效果上也没那么契合.
既然 UI 是通过网格实现的, 那么 基于网格的动画 显然是个不错的选择.

DOTS 支持两种网格动画方案: blend shape 和 骨骼动画.
blend shape 可能是适用范围更管的方案, 因为制作和使用都非常方便.
只需要在 3D 软件中制作同一个网格的不同形态, 然后在 Unity 中实时修改参数即可.

渲染 ​

场景中的 3D 物体与 UI 的渲染需求不同. 对于 UI 而言:

  • 不需要色调映射, 景深等 后处理效果, 不过可能会有别的后处理效果的需求.
  • 不需要 DepthNormalPrepass, 因为没有 SSAO 和 Decal 效果的需求.
  • 所需的 光照环境 不同, 和场景中的 3D 物体所受的动态灯光, 反射源可能不一样.
  • UI 最好不要受到 动态分辨率 的影响, 因为文字的渲染效果对于分辨率特别敏感.

其他方面:

  • 我们希望 UI 能够提前提供 深度信息, 方便在渲染时剔除被 UI 遮挡的物体或像素.
  • UI 中的模糊效果 (kawase blur) 需要在 不透明物体 渲染完成后才能渲染.
  • 由于 UI 在摄像机内的尺寸基本固定, 因此网格不需要制作 LOD, 纹理不需要 mipmap.

INFO

渲染需求不同, 因此需要对渲染管线做定制.

制作成本 ​

一次性投入 ​

  • 设计并实现 3D UI 的 排版 相关逻辑.
  • 调研并制作常用 动画 效果实现方案.
  • 在 Unity 内为 3D UI 定制 渲染 方案.
  • 探索 原始素材 在 DCG 软件 (例如 Blender) 中最佳工作流.

重复投入 ​

  • 每个图标都需要完整的 3D 工作流来制作.

节省的成本 ​

  • 渲染性能上的优势可以让我们在 性能优化 上花更少的时间.
  • 注意事项 更少 (不需要巧妙地合成图集, 不需要想办法绕开破坏合批的 UI 布局).
  • 方便实现高质量的立体视觉效果, 3D 方案可能会比 2D 方案更容易实现这种风格.
  • 3D 方案 修改成本 更低, 因为很多效果是通过参数计算出来的, 只需修改参数并导出.