20. 纹素和像素

1.纹素, 片段和像素简介

2.纹素, 片段和像素对应时机

---

1.纹素, 片段和像素

1).纹素 - 纹理的基石

a.它是什么? 

纹素是纹理的最小单位, 纹理就是一张图片(比如.jpg, .png), 而这张图片是由无数个带颜色的点构成的, 这些点就是纹素

b.在哪?

它存在于你的硬盘/内存里, 是原始数据

c.特点

纹素有自己的坐标系统, 叫做UV坐标; 无论纹理最终被用到哪里, UV坐标的原点(0,0)通常在左下角, (1,1)在右上角; 一个

纹素就对应一个UV坐标点

d.比喻: 纹素就是你那张设计图上印刷好的、固定的彩色格子; 设计图本身有多大, 有多少个格子, 是固定的

e.在Unity中的体现:

当你导入一张贴图时, 它的Import Settings里的Width和Height就决定了它包含多少纹素(例如 1024x1024 个纹素)

2).像素 - 屏幕的最终呈现

a.它是什么?

像素是屏幕(或渲染目标)上的最小显示单位, 你的显示器、手机屏幕就是由无数个像素点组成的网格

b.在哪? 

它最终呈现在屏幕上

c.特点

像素是最终结果, 我们所有渲染工作的目的, 就是为了确定屏幕上每一个像素点的最终颜色是什么

d.比喻: 像素就是你墙上最终贴上去的彩色瓷砖, 这幅画最终看起来怎么样, 由这些瓷砖的颜色决定

e.在Unity中的体现:

你游戏的分辨率(例如1920x1080)就决定了最终会生成多少像素

3).片段 - 决定像素颜色的候选人

a.它是什么?

片段是光栅化阶段的产物, 当GPU处理一个三角形(模型的一部分)时, 它会找出这个三角形会覆盖屏幕上的哪些像素区域; 对

于每一个被覆盖的像素区域, 都会生成一个片段

b.在哪?

它存在于GPU的渲染流水线中, 是一个中间产物

c.特点

- 一个片段携带着用于计算最终像素颜色的所有信息(如颜色、深度、透明度等), 一个像素位置上可能对应多个片段(例如, 

一个半透明的红色片段在一个蓝色片段前面)

- 片段着色器的任务就是计算这个片段的颜色, 但请注意: "片段着色器输出的颜色不一定就是最终像素的颜色", 还需要经过

深度测试和透明度混合等流程的裁决

d.比喻: 片段就是你拿起设计图, 准备往墙上某个位置贴瓷砖的"决策过程"

你发现墙上某个位置, 既可以被背景的蓝色瓷砖覆盖, 也可以被前景的红色瓷砖覆盖; 于是你生成了两个"决策":

一个"蓝色片段决策", 一个"红色片段决策"

通过比较深度(谁在前谁在后)和透明度(红色如果是玻璃的), 你最终决定这个位置的颜色是红色和蓝色混合后的紫色

e.在 Unity 中的体现:

你编写的片段着色器代码(在 Unity Shader Lab中通常是surf函数或者 frag函数)就是在处理每一个片段, 计算它的颜色

1).像素

   a.它是什么? 屏幕显示的最小单位, 显示器是由成千上万个像素点组成的网格

   b.在哪里? 存在于屏幕空间

   c.核心任务: 最终决定屏幕上某个点的颜色什么

2).纹素

   a.它是什么? 纹理图像中的最小单位, 一张纹理贴图本质上就是一个由纹素组成的二维数组
 
   b.在哪里? 存在于纹理空间

   c.核心任务: 存储表面细节(如颜色, 粗糙度, 法线方向等), 它本身不知道自己要被画到哪里

---

2.纹素, 片段和像素对应时机

通过在屏幕上渲染一个带纹理的三角形来理解像素和纹素的对应时机

1).准备阶段

a.三维模型: 我们有一个三角形, 它有三个顶点(A, B, C)
  
b.纹理: 我们有一张2 * 2像素的纹理, 它有四个像素

c.UV映射(这个阶段建立的是顶点和纹素的关系)
  
- 我们告诉计算机, 顶点A的UV坐标是(0, 0) -> 对应纹理左下角的纹素

- 顶点B的UV坐标是(1, 0) -> 对应纹理右下角的纹素

- 顶点C的UV坐标是(0.5, 1) -> 对应纹理上边中间的纹素

2).变换阶段

a.GPU通过顶点着色阶段, 将三角形的三个顶点(A, B, C)从三维空间坐标变换到屏幕上的二维像素坐标

b.假设变换后, 顶点A在屏幕像素位置(10, 10), B在(50, 10), C在(30, 50)

现在, 三角形在屏幕上的位置确定了

3).光栅化与插值

a.光栅化: GPU确定屏幕上的哪些像素被这个三角形覆盖, 它会生成一个需要填充的像素列表(片段列表)

b.插值: 对于列表中的每一个像素, GPU需要知道它的颜色; 颜色信息来自于纹理, 怎么知道像素对应于纹理的哪个部分

- GPU会利用这个像素在三角形内的重心坐标, 对三个顶点的UV坐标进行插值, 为这个像素计算出一个专属的UV坐标

比如: 红点像素的位置正好在三角形的正重心, 那么它通过插值计算出的uv坐标大概是(0.5, 0.5)

4).纹理采样

a.GPU有了这个像素的UV坐标(0.5, 0.5)
 
b.它拿着这个坐标去查询纹理贴图, 在(0.5, 0.5)这个地方的颜色是什么

c.这个查询的过程就是纹理采样