浅谈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 负担。

对比透视相机

特性透视相机 (Perspective)正交相机 (Orthographic)
UI 变形UI 可能受透视影响变形UI 保持原始比例，无变形
对齐可能因透视造成 UI 位置变化UI 位置更稳定，易对齐
视角变化UI 受相机 FOV 影响UI 不受相机 FOV 影响
深度感具有透视深度感无透视深度感
性能需要透视投影计算计算量较低，性能较优

适用场景

适合使用正交相机的情况

  • 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 对比

投影模式Plane Distance 影响推荐值
透视相机（Perspective）影响遮挡关系,同时影响 UI 大小10-100，根据 UI 需求调整
正交相机（Orthographic）不影响 UI 大小，仅影响遮挡关系一般设为 1-10，避免过远

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 游戏中的交互面板。

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/66910.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Unity中在UI上画线

Unity中在UI上画线

在UI中画一条曲线 我封装了一个组件,可以实现基本的画线需求. 效果 按住鼠标左键随手一画. 用起来也很简单,将组件挂到空物体上就行了,红色的背景是Panel. 你可以将该组件理解为一个Image,只不过形状更灵活一些罢了,所以它要放在下面的层级(不然可能会被挡住). 代码 可以…
阅读更多...
2024.1.22 安全周报

2024.1.22 安全周报

政策/标准/指南最新动态 01 工信部印发《关于加强互联网数据中心客户数据安全保护的通知》 原文: https://www.secrss.com/articles/74673 互联网数据中心作为新一代信息基础设施，承载着千行百业的海量客户数据，是关系国民经济命脉的重要战略资源。…
阅读更多...
探索 LLM：从基础原理到 RAG 实现的深度解析

探索 LLM：从基础原理到 RAG 实现的深度解析

一.LLM基础知识 1.1 大语言模型（Large Language Model，LLM） 他是模型，是 AI 能力的核心。他是语言模型，其核心能力在于语言能力。他是大语言模型，与传统模型相比，它最大的特点就是“大”。 1…
阅读更多...
Mac cursor设置jdk、Maven版本

Mac cursor设置jdk、Maven版本

基本配置 – Cursor 使用文档 首先是系统用户级别的设置参数，运行cursor，按下ctrlshiftp，输入Open User Settings(JSON)，在弹出的下拉菜单中选中下面这样的： 在打开的json编辑器中追加下面的内容： {"…
阅读更多...
ARM64平台Flutter环境搭建

ARM64平台Flutter环境搭建

ARM64平台Flutter环境搭建 Flutter简介问题背景搭建步骤1. 安装ARM64 Android Studio2. 安装Oracle的JDK3. 安装 Dart和 Flutter 开发插件4. 安装 Android SDK5. 安装 Flutter SDK6. 同意 Android 条款7. 运行 Flutter 示例项目8. 修正 aapt2 报错9. 修正 CMake 报错10. 修正 N…
阅读更多...
selenium clear（）方法清除文本框内容

selenium clear（）方法清除文本框内容

在使用Selenium进行Web自动化测试时，清除文本框内容是一个常见的需求。这可以通过多种方式实现，取决于你使用的是哪种编程语言（如Python、Java等）以及你的具体需求。以下是一些常见的方法： 1. 使用clear()方法 clear…
阅读更多...
基于海思soc的智能产品开发（视频的后续开发）

基于海思soc的智能产品开发（视频的后续开发）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing 163.com】 前面我们讨论了camera，也讨论了屏幕驱动，这些都是基础的部分。关键是，我们拿到了这些视频数据之后，…
阅读更多...
vue3+webOffice合集

vue3+webOffice合集

1、webOffice 初始化 1）officeType: 文档位置：https://solution.wps.cn/docs/web/quick-start.html#officetype 2）appId: 前端使用appId 后端需要用到AppSecret 3）fileId: 由后端返回，前端无法生成，与上传文…
阅读更多...
2025牛客寒假算法营2

2025牛客寒假算法营2

A题 知识点&#xff1a;模拟 打卡。检查给定的七个整数是否仅包含 1,2,3,5,6 即可。为了便于书写&#xff0c;我们可以反过来&#xff0c;检查这七个整数是否不为 4 和 7。 时间 O(1)&#xff1b;空间 O(1)。 #include <bits/stdc.h> using namespace std;signed main()…
阅读更多...
记录一次k8s起不来的排查过程

记录一次k8s起不来的排查过程

我在k8s集群&#xff0c;重启了一个node宿主机&#xff0c;竟然发现kubelet起不来了&#xff01;报错如下 这个报错很模糊&#xff0c;怎么排查呢。这样&#xff0c;开两个界面&#xff0c;一个重启kubelet&#xff0c;一个看系统日志(/var/log/message:centos&#xff0c;/va…
阅读更多...
Docker Desktop 在Windows 环境中开发、测试和运行容器化的应用程序

Docker Desktop 在Windows 环境中开发、测试和运行容器化的应用程序

Docker 为 Windows 提供了专门的桌面版工具&#xff0c;称为 Docker Desktop&#xff0c;它允许你在 Windows 环境中开发、测试和运行容器化的应用程序。 如何在 Windows 上使用 Docker Docker Desktop Docker Desktop 是一个专为 Windows 设计的应用程序&#xff0c;它简化了…
阅读更多...
仿 RabbitMQ 的消息队列3（实战项目）

仿 RabbitMQ 的消息队列3（实战项目）

七. 消息存储设计 上一篇博客已经将消息统计文件的读写代码实现了&#xff0c;下一步我们将实现创建队列文件和目录。 实现创建队列文件和目录 初始化 0\t0 这样的初始值. //创建队列对应的文件和目录&#xff1a;public void createQueueFile(String queueName) throws IO…
阅读更多...
HTTP 配置与应用（局域网）

HTTP 配置与应用（局域网）

想做一个自己学习的有关的csdn账号&#xff0c;努力奋斗......会更新我计算机网络实验课程的所有内容&#xff0c;还有其他的学习知识^_^&#xff0c;为自己巩固一下所学知识&#xff0c;下次更新HTTP 配置与应用&#xff08;不同网段&#xff09;。 我是一个萌新小白&#xf…
阅读更多...
root用户Linux银河麒麟服务器安装vnc服务

root用户Linux银河麒麟服务器安装vnc服务

安装必要桌面环境组件 yum install mate-session-manager -y mate-session #确定是否安装成功安装vnc服务器 yum install tigervnc-server -y切换到root为root得vnc设置密码 su root vncpasswd给root用户设置vnc服务器文件 vi /etc/systemd/system/vncserver:1.service [Un…
阅读更多...
理解深度学习pytorch框架中的线性层

理解深度学习pytorch框架中的线性层

文章目录 1. 数学角度&#xff1a; y W x b \displaystyle y W\,x b yWxb示例 2. 编程实现角度&#xff1a; y x W T b \displaystyle y x\,W^T b yxWTb3. 常见错误与易混点解析4. 小结参考链接 在神经网络或机器学习的线性层&#xff08;Linear Layer / Fully Connect…
阅读更多...
C#Object类型的索引，序列化和反序列化

C#Object类型的索引，序列化和反序列化

前言 最近在编写一篇关于标准Mes接口框架的文章。其中有一个非常需要考究的内容时如果实现数据灵活和可使用性强。因为考虑数据灵活性&#xff0c;所以我一开始选取了Object类型作为数据类型&#xff0c;Object作为数据Value字段&#xff0c;String作为数据Key字段&#xff0c…
阅读更多...
大模型应用与部署 技术方案

大模型应用与部署 技术方案

大模型应用与部署 技术方案 一、引言 人工智能蓬勃发展，Qwen 大模型在自然语言处理领域地位关键，其架构优势尽显，能处理文本创作等多类复杂任务，提供优质交互。Milvus 向量数据库则是向量数据存储检索利器，有高效索引算法（如 IVF_FLAT、HNSWLIB 等）助力大规模数据集相似…
阅读更多...
【Prometheus】Prometheus如何监控Haproxy

【Prometheus】Prometheus如何监控Haproxy

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…
阅读更多...
C# 控制打印机：从入门到实践

C# 控制打印机：从入门到实践

在开发一些涉及打印功能的应用程序时&#xff0c;使用 C# 控制打印机是一项很实用的技能。这篇文章就来详细介绍下如何在 C# 中实现对打印机的控制。 一、准备工作 安装相关库&#xff1a;在 C# 中操作打印机&#xff0c;我们可以借助System.Drawing.Printing命名空间&#x…
阅读更多...
Go语言中的值类型和引用类型特点

Go语言中的值类型和引用类型特点

一、值类型 值类型的数据直接包含值&#xff0c;当它们被赋值给一个新的变量或者作为参数传递给函数时&#xff0c;实际上是创建了原值的一个副本。这意味着对新变量的修改不会影响原始变量的值。 Go中的值类型包括&#xff1a; 基础类型&#xff1a;int&#xff0c;float64…
阅读更多...
最新文章

Copyright @ 2022~2023