浅谈Unity中Canvas的三种渲染模式

Overview

UGUI通过 Canvas 组件渲染和管理UI元素。Canvas 是 UI 元素的容器，它决定了 UI 元素的渲染方式以及它们在屏幕上的显示效果。Canvas 有三种主要的渲染模式，每种模式有不同的用途和特点。本文将介绍这三种渲染模式

1. Screen Space - Overlay 模式

1.1 渲染方式

在 Screen Space - Overlay 模式下，Canvas 会直接渲染到屏幕上，而不依赖于任何摄像机。这意味着 UI 元素会覆盖在游戏画面之上，始终位于屏幕的最前面。

1.2 特点

• 无需摄像机：不依赖场景中的任何摄像机，UI 会直接渲染到屏幕。
• 始终位于最上层：无论场景中是否有其他 Canvas，Screen Space - Overlay 模式下的 UI 始终显示在最上面，其他 UI 元素都会被它覆盖。例如场景中还存在一个Screen Space - Camera 模式的Canvas,它下面的UI元素只可能被前者的UI遮挡,而绝不可能遮挡前者的UI.
• 性能较高：由于 UI 渲染不需要经过摄像机的投影计算，因此其渲染效率较高，适合用于较为简单和静态的 UI。

1.3 适用场景

• 主要用于游戏中不需要与场景中的 3D 对象交互的 UI。例如：主菜单、游戏 HUD、游戏中显示的分数等。
• 用于需要始终显示在屏幕上并且不受场景摄像机影响的元素。

1.4 监视面板属性

1.Pixel Perfect:

• 消除模糊和锯齿：尤其是在低分辨率设备或缩放后的 UI 元素中，未启用 Pixel Perfect 时，可能会看到 UI 元素的边缘变得模糊或出现锯齿。启用该选项后，Unity 会强制元素的边界对齐到像素网格，避免这些视觉问题。

• 精确显示：它有助于确保 UI 元素在显示器上以精确的像素值显示，避免由于屏幕分辨率差异导致的模糊效果。

• 适用于像素艺术风格：如果你制作的是像素艺术风格的游戏或应用，启用 Pixel Perfect 可以确保每个像素都完美对齐，保持像素风格的一致性和清晰度。

这是一个对比效果,前者没打开导致了输入框上下出现了色差,后者是打开该属性,获得了更好的显示效果(但是更耗性能).

2.Sort Order

通常不会出现两个同为Screen Space - Overlay 模式的Canvas,但是如果有的话,Sort Order属性会影响渲染属性,值越大越后渲染(即更不会被挡住).但是如果两个Canvas的该属性都为同一值渲染顺序如何呢?笔者没找到规律.

3.Target Display

• Target Display 属性决定了 Canvas 渲染到哪个显示器。这个属性适用于 Screen Space - Camera 和 World Space 渲染模式的 Canvas。当你有多个显示器时，你可以指定 UI 渲染在哪个显示器上。

• Unity 支持将不同的摄像机渲染到不同的显示器上，而 Target Display 就是控制每个 Canvas 的渲染目标，帮助你更好地在多个显示器上分配渲染任务。

4.Additional Shader Channels

控制 Canvas 渲染时是否包含一些额外的顶点数据，以便提供给 Shader 进行更多的处理。这些额外的 Shader 通道提供了更多关于每个 UI 元素的信息，通常用于自定义 Shader 渲染效果。

在 Screen Space - Overlay 模式下，UI 渲染是直接绘制到屏幕上的，而不是依赖于相机的视图，因此，通常不会涉及复杂的空间变换。但即使在这种模式下，你仍然可以启用一些附加的 Shader 通道，以便在自定义 Shader 中使用。(通常不会使用)

可用的选项：

1. Vertex Streams (顶点流)：

   • 顶点流允许传递更多与顶点相关的数据给 Shader。这通常是用于处理与顶点位置、颜色、纹理坐标等相关的额外数据流。

2. Normals (法线)：

   • 启用此选项会将法线信息传递给 Shader。对于 Screen Space - Overlay 渲染模式来说，通常并不需要法线数据，因为 UI 元素通常是平面上的。但是，如果你想为 UI 添加某种自定义效果（例如基于法线的光照），启用法线数据就很有帮助。

3. Tangents (切线)：

   • 切线通常与法线一起使用，主要用于法线贴图的处理。如果你的 UI 需要进行复杂的材质效果，比如通过法线贴图实现视觉效果，可以选择启用切线数据。

4. UV2 / UV3 / UV4 (额外的 UV 通道)：

   • 这些额外的 UV 通道可以用于不同的纹理坐标。如果你想给 UI 使用多个纹理（例如多个层次的贴图），你可以启用这些额外的 UV 通道。

5. Color (颜色)：

   • 此选项启用后，Canvas 渲染的 UI 元素将包含颜色信息，这对于自定义 Shader 控制颜色或者透明度非常有用。

6. Lightmap (光照贴图)：

   • 如果你希望 UI 元素使用光照贴图进行渲染（虽然在 Screen Space - Overlay 模式下较少见），你可以启用光照贴图通道。这个选项让 Shader 能够访问相关的光照贴图数据。

2. Screen Space - Camera 模式

2.1 渲染方式

Screen Space - Camera 模式下，Canvas 会根据指定的摄像机进行渲染。UI 元素会被渲染到摄像机视野中的一个平面上，可以通过摄像机的视角和视野调整 UI 的显示效果。此时Cube也被渲染到UI上了.

2.2 特点

• 依赖摄像机：渲染需要指定一个摄像机，UI 会根据摄像机的位置、视野以及投影设置进行渲染。
• 支持透视效果：如果摄像机使用透视投影，UI 元素也会受到透视效果的影响，显示更具立体感。
• 自动适应分辨率：当屏幕分辨率发生变化时，Canvas 会自动调整大小，以适应新的屏幕尺寸。

2.3 适用场景

• 适用于需要3D 对象的情况。
• 用于需要根据摄像机视角进行动态渲染的场景，如虚拟现实中的 UI 或者 3D 游戏中的 HUD。

2.4 注意:

推荐改成这样一个结构专门管理该模式的UI.同时这个摄像机这渲染UI层,而不做其他事.

经过测试虽然只渲染UI层,UI物体(比如一个Image),该Image即便改为别的层也能被渲染,但是3D物体却不行.但是摄像机如果改为渲染Water层,则UI物体就不会被渲染,即便UI物体也改为Water层.

此时因为是依靠摄像机渲染我们可以通过旋转UI获得一些立体效果.

也可以考虑修改摄像机为正交相机,将摄像机从 透视（Perspective） 改为 正交（Orthographic） 有以下几个优点和影响：

优点

1. UI 不受透视变形影响

• 透视相机会让 UI 元素受到透视投影的影响，远处的元素显得更小，近处的更大，导致 UI 在屏幕上的显示比例不均匀。

• 正交相机可以确保 UI 元素在屏幕上保持相同的大小，不会因为远近发生缩放，使 UI 更加稳定。

1. 更方便对齐 UI 元素

   正交相机不会有透视缩放问题，因此在 UI 布局时可以更精确地对齐，不会因相机角度变化导致 UI 位置和大小发生意外变化。

2. 减少 UI 失真

   透视相机会导致 UI 组件的拉伸变形，特别是在 UI 组件较大或接近屏幕边缘时，而正交相机可以避免这些问题，使 UI 显示更清晰。

3. 性能提升

   正交投影不需要进行复杂的透视变换和深度计算，因此可以提高渲染效率，特别是在 UI 复杂的情况下能减少 GPU 负担。

对比透视相机

适用场景

适合使用正交相机的情况

• 2D 游戏 UI，如按钮、文本等不希望受到透视变形影响。
• HUD（抬头显示），如血条、准星、迷你地图等，应该保持固定尺寸和位置。
• 固定视角的游戏 UI，比如卡牌游戏、策略游戏等。

适合使用透视相机的情况

• 3D UI 设计，比如 VR UI 或带有 3D 立体感的 UI。
• 需要 UI 深度感的场景，比如某些游戏的界面希望 UI 组件能随距离发生变化。

总结

如果 UI 主要是 2D 组件，并希望它们在屏幕上保持稳定的尺寸和对齐方式，那么将 Screen Space - Camera 下的摄像机设置为 正交模式 是一个更好的选择。而如果 UI 需要透视效果，比如 3D 交互界面或者 VR UI，则可以选择透视相机。

2.5 监视面板属性:

在 Unity 的 Screen Space - Camera 模式下，Canvas 组件Plane Distance 属性的作用与摄像机的投影模式（透视或正交）有关。以下是详细解析：

Plane Distance属性

1. 控制 UI 与摄像机的距离

   • 在 Screen Space - Camera 模式下，Canvas 依附于一个摄像机，UI 会被渲染成 3D 物体。
   • Plane Distance 代表 UI 画布距离该摄像机的距离，单位是 世界单位（World Units）。

2. 影响 UI 元素的缩放

   • 如果使用的是 透视相机（Perspective），则 Plane Distance 越大，UI 组件会变得越小，因为透视投影会导致远处的物体缩小，近处的物体放大。
   • 如果使用的是 正交相机（Orthographic），Plane Distance 对 UI 组件大小没有影响，因为正交相机不会有透视缩放效果。

3. 影响 UI 的遮挡关系

   • Canvas 作为一个 3D 物体，可能会与游戏场景中的其他 3D 物体发生遮挡。
   • Plane Distance 距离过大 可能会让 3D 物体遮挡UI。

Plane Distance 对比

Sorting Layer属性和Order in Layer属性

这两者的设置只为了影响同为Screen Space - Camera 模式的Canvas的渲染顺序.

首先两个同为Screen Space - Camera 模式的Canvas,且Sorting Layer处于同一层级,这时Order in Layer的大小才有比较意义.那不同Sorting Layer的Canvas呢?

层级越大越不会被遮挡.

3. World Space 模式

3.1 渲染方式

在 World Space 模式下，Canvas 被视为场景中的一个 3D 对象。UI 元素会按照场景中的坐标进行渲染，因此它们能够与其他 3D 对象进行交互，并且受场景中的光照和摄像机视角影响。

3.2 特点

• 视为 3D 对象：UI 元素作为场景中的 3D 对象存在，可以根据需要在三维空间中自由放置。
• 与场景交互：UI 元素可以与其他 3D 对象进行交互，可以被其他 3D 对象遮挡或通过摄像机的投影显示。
• 需要考虑遮挡和光照：UI 元素的显示可能会受到场景光照的影响，并且它们可能会被其他 3D 对象遮挡。

3.3 适用场景

• 适用于游戏中的 3D UI 或 AR/VR 场景。例如：在 3D 游戏中，UI 元素显示在场景中的物体旁边或者浮动在物体上方。
• 在需要在 3D 空间中定位并显示 UI 的场景中使用，例如 AR 中的标签或 VR 游戏中的交互面板。