4、计算机图形学渲染管线、着色器、纹理

渲染管线概述

在电脑绘图中，是指以软件由模型生成图像的过程。模型是用语言或者数据结构进行严格定义的三维物体或虚拟场景的描述，它包括几何、视点、纹理、照明和阴影等信息。图像是数字图像或者位图图像。计算机上显示的图像都是经过CPU、GPU计算最终的渲染到屏幕上，由我们人眼所接收到，所以我们要让一个物体呈现出不同的颜色和形状，这就要求我们对它们的位置顶点和颜色信息进行代码的干涉修改，那这个修改过程是如何进行的呢，这就涉及到了图形渲染流水线

渲染流水线的工作任务在于，由一个三维场景触发、渲染一张二维图像。换句话说，计算机需要从一系列的顶点数据，纹理等信息出发，把这些信息最终转化成一张人眼可以看到的图像。而这个工作通常是靠CPU和GPU共同完成的。

它就像是一个自动化的工厂生产线，输入是三维场景的几何数据（如顶点坐标、纹理坐标等）、光照信息、相机参数等，输出是最终显示在屏幕上的彩色像素图像。这些像素组成了我们所看到的游戏场景、动画、可视化数据等图形内容。

渲染流程

将屏幕想象成一张照片，我们使用照相机将世界中的物体拍摄下来，这个过程就是渲染的过程

渲染的主要流程

1. 将摄像机当作人眼睛，形成一个视锥

2. 根据视锥进行修剪，生成新的图元

3. 将修剪后的图元，进行归一化到-1~1区间，这个时候会把视锥中远处的元素给压缩变小，形成近大远小的效果

4. 最后将归一化的坐标映射到屏幕

其中一个重要的步骤就是光栅化，在这一步骤中，可以对uv、顶点向量、颜色进行插值。

一般渲染步骤

1. 数据准备阶段，

数据	操作	备注
顶点数据	坐标、法线、UV、颜色 面索引、边索引、点索引	描述物体的基本数据
物体矩阵	物体变换矩阵	物体基本的变换矩阵
物体世界矩阵	物体世界矩阵	物体基于世界的世界矩阵，通过物体矩阵*物体父级的世界矩阵得到
相机视图矩阵	相机的世界矩阵逆	通过计算相机的世界矩阵逆得到
相机投影矩阵	正交投影矩阵，透视投影矩阵	通过相机近、远端修剪、上、下、左、右方向生成

2. 顶点着色器，该阶段可人为干预

数据	操作	备注
M 物体世界矩阵	将物体顶点变换到世界坐标系
V 相机视图矩阵	将顶点从世界坐标系变换到相机坐标系
P 相机投影矩阵 (正交，透视)	将顶点从相机坐标系中，通过投影矩阵映射到视锥体中 由来。	通过投影变换之后，视锥体中的点，都变换到了一个[-1，~1] 的立方体中，不在视锥体中的点不在视锥体中。而用立方体去找与直线的交点，三角形的交线，自然比用棱锥简单得多。
顶点属性	处理用户定义的顶点属性，以及之后的插值计算	还可以处理如深度偏移等自定义效果

3. 图元装配

将已处理的顶点组合成图元，如点、线、三角形。这也包括从几何着色器输出的顶点的图元装配。

4. 裁剪

将装配好的图元，基于可视立方体裁剪，超出可视立方体的数据将丢弃，与可视立方体相交的数据将生成新的图元。

经过MVP矩阵变换后的顶点，都变换到了一个[-1，~1] 的立方体中，也称为规范立方体（Canonical View Volume，CVV）

5. 屏幕映射

将裁剪后的图元映射到屏幕坐标系，图形最终渲染的目标是生成一张二维的图像或输出到显示器
例如分辨率1920x1080：只需要将-1~1区间内的数据，映射到1920x1080

6. 光栅化

通过三角形顶点所在屏幕坐标进行插值计算，得到光栅化的像素数据，包括坐标、法线、UV、颜色等
此时坐标是一个三维坐标,Z值就是基深度值

项目	操作
三角形、线光栅化	将三角形进行光栅化，得到像素数据
插值计算	坐标、法线、UV、颜色、等顶点属性插值计算

7. 像素（片段）着色器，该阶段可人工干预

处理灯光、材质、纹理等，处理所有片元中每个像素，并计算其最终颜色，可能使用纹理、灯光和阴影算法。
着色器可以使片元具有不同的颜色和纹理，实现复杂的视觉效果。

8. 深度和模板测试

遍历每一个片元，遍历每一个片元的像素，进行光照计算，这个阶段会检测一个片元的深度值（Z值），决定该片元是否覆盖了之前的片元。
模板测试则可以用来在屏幕的某些部分进行渲染操作。

9. 颜色混合

各片元的颜色将会与帧缓冲区中的颜色经过混合，得出最终的像素颜色。

10. 屏幕成像

输出最终屏幕像素

着色器

着色器（Shader）是运行在图形处理器（GPU）上的程序。它的主要任务是处理图形渲染过程中的特定环节，比如确定图形表面的颜色、光照效果、纹理映射等如何呈现。

工作原理：在图形渲染管线中，当几何数据（如顶点坐标、三角形面片等）被传递到特定阶段时，着色器就会介入。

例如，顶点着色器会对每个顶点进行操作，它可以修改顶点的位置、颜色等属性；像素/片段着色器则针对每个像素片段（由图形经过光栅化后产生）进行处理，决定该像素最终的颜色输出。着色器通过接收输入数据（如顶点属性、纹理坐标、光照信息等），经过一系列计算，产生相应的输出结果，从而影响图形在屏幕上的最终显示效果。

顶点着色器（Vertex Shader）

主要负责对输入的顶点数据进行变换操作。这包括将顶点从模型空间转换到世界空间，再到视图空间，最后到裁剪空间等一系列坐标变换，可以计算顶点的光照信息，比如根据顶点的法向量和光照方向计算该顶点所接收到的光照强度，为后续的光照效果处理提供基础数据。

例如，在 3D 场景中，我们可以通过顶点着色器来实现物体的平移、旋转、缩放等基本变换，以及更复杂的变形效果，如弯曲、扭曲等。

• 输入：通常包括顶点的位置坐标、法向量、纹理坐标等属性信息。这些信息可以在创建顶点数据时预先设置，并在渲染时传递给顶点着色器。
• 输出：经过变换后的顶点坐标以及其他可能的属性信息，如经过光照计算后的顶点颜色（如果在顶点着色器中进行了简单的光照计算）等。这些输出数据会被传递到光栅化阶段和后续的像素（片段）着色器中。

像素（片段）着色器（Fragment Shader）

决定每个像素片段的最终颜色。它可以根据纹理采样、光照计算、材质属性等多种因素来确定像素的颜色。

例如，在绘制一个带有纹理的物体时，片段着色器会根据纹理坐标从纹理图像中采样获取相应的颜色值，并结合光照效果等进行混合，得到最终的像素颜色。

它可以实现各种复杂的视觉效果，如透明效果、反射效果、阴影效果等。例如，通过计算光线反射向量并从反射纹理中采样，可以模拟出物体表面的反射效果；通过特定的算法处理像素的透明度值，可以实现透明物体的渲染。

• 输入：包括从顶点着色器插值得到的各种数据，如纹理坐标、顶点颜色、法向量等，以及一些全局的渲染参数，如光照信息、摄像机位置等。此外，还可以接收来自纹理单元的纹理数据采样结果。
• 输出：每个像素片段的最终颜色值，这个颜色值将被写入到帧缓冲器中，最终显示在屏幕上。

几何着色器（Geometry Shader）

可以对输入的几何图元（如点、线、三角形等）进行进一步的处理和生成新的几何图元。

例如，它可以将一个点扩展为一个圆形或方形的面片，或者将一条线扩展为一个带有宽度的带状几何形状。

能够实现一些特殊的几何效果，如毛发渲染、粒子系统中的粒子形状控制等。在毛发渲染中，几何着色器可以根据每个顶点的信息生成多根毛发的几何形状；在粒子系统中，可以根据粒子的初始属性生成更复杂的粒子形状和分布。

• 输入：接收来自顶点着色器处理后的几何图元数据，包括顶点位置、法向量等属性信息，以及图元的类型（点、线、三角形等）标识。
• 输出：可以生成新的几何图元数据，这些新的几何图元将被传递到光栅化阶段进行后续处理，最终在屏幕上显示。

计算着色器（Compute Shader）

计算着色器提供了一种更为灵活的通用计算能力，它并不直接参与传统的图形渲染管线的固定阶段操作。它可以处理大规模的并行计算任务，例如物理模拟（如流体模拟、布料模拟等）、人工智能算法中的并行计算部分、场景的后处理计算（如模糊效果、景深效果的优化计算）等。

例如在流体模拟中，计算着色器可以并行地计算流体中每个粒子或网格点的速度、受力等信息，然后根据这些信息更新流体的状态，从而模拟出逼真的流体流动效果。

它能够与其他着色器类型协同工作。可以读取和写入缓冲区（Buffer）和纹理（Texture）数据，通过这种方式与顶点着色器、片段着色器等共享数据，实现更为复杂的图形处理和计算流程整合。比如在一个复杂的场景渲染中，计算着色器先对场景中的光照数据进行预处理计算，然后将结果传递给片段着色器用于最终的像素颜色计算。

• 输入：可以接收来自 CPU 端设置的各种参数数据，以及从缓冲区或纹理读取的数据。这些数据可以是场景中的几何信息、材质属性、之前计算结果等。
• 输出：将计算结果写入到指定的缓冲区或纹理中，以便其他着色器或 CPU 后续使用。例如将物理模拟计算后的粒子新位置信息写入缓冲区，供顶点着色器读取并更新顶点位置来展示物体的新状态。

着色器可以实现的效果

• 漫反射光照

通过计算光线方向与物体表面法向量的夹角，确定物体表面接收的漫反射光强度。在顶点着色器或片段着色器中，可运用兰伯特光照模型等进行计算。例如，对于粗糙表面的物体，如陶瓷花瓶，漫反射光照能使其表面呈现均匀的明暗变化，让物体更具立体感。

• 镜面反射光照

考虑光线反射方向与观察方向的关系，模拟物体表面的镜面反射效果。在片段着色器中，通常计算反射向量，并依据反射向量与观察方向的接近程度确定镜面反射光强度。像金属物体，其表面会有显著的高光区域，这便是镜面反射光照的体现。通过调整镜面反射参数，如高光强度、高光范围等，可模拟不同材质的光泽效果。

• 环境光

模拟场景中来自周围环境的间接光照。它为整个场景提供基础光照亮度，使无直接光照区域也不会完全黑暗。在着色器中，可设置固定的环境光颜色和强度值，与其他光照效果叠加，营造更真实的场景氛围。

• 颜色纹理

将纹理图像的颜色信息映射到物体表面。例如，绘制木箱时，使用木纹纹理图像，通过纹理坐标将纹理图像颜色值对应到木箱各表面，使木箱呈现真实木纹材质。在片段着色器中，依据纹理坐标从纹理采样器获取相应颜色值，并与其他光照颜色等混合，得到最终像素颜色。

• 法线纹理

存储物体表面法向量信息。在着色器中使用法线纹理，可为原本平滑物体表面增添细节凹凸效果。例如，绘制墙面时，使用带有砖块凹凸细节的法线纹理，可使墙面有砖块立体感，无需创建复杂几何模型表现砖块凹凸。法线纹理通常与光照计算结合，依纹理中法向量信息改变光照反射效果，增强凹凸感。

• 环境纹理

如天空盒纹理，用于创建背景环境效果。将巨大包围整个场景的纹理图像（如天空图像）映射到特殊几何形状（如立方体）上，并在渲染时设置合适深度值，使其似远处背景环境。在片段着色器中，依摄像机方向从天空盒纹理采样相应颜色，营造逼真天空或背景环境效果。

• 透明效果

通过设置物体透明度值，并在片段着色器中依透明度值对颜色进行混合处理，实现透明物体渲染。例如，绘制玻璃物体或透明塑料物体时，透明度效果使背景透过物体显示，同时可考虑光线在透明物体内部折射等效果，增强真实感。

• 阴影效果

有多种实现方式，如阴影映射技术。首先从光源视角渲染场景，将深度信息存储在阴影映射纹理中。然后正常渲染场景时，在片段着色器中比较当前片段到光源距离与阴影映射纹理中的深度值，确定该片段是否处于阴影中，并相应调整颜色。阴影效果可增强场景层次感和立体感，使物体更真实地置于场景中。

• 卡通渲染效果

通常在片段着色器中对光照计算结果进行特殊阈值处理实现。例如，依光照强度将物体表面划分为几个明显明暗区域，模拟卡通风格绘画效果。常用于游戏中的卡通风格场景或角色渲染，呈现独特艺术风格感受。

纹理映射

纹理（Texture）本质上是一个二维或多维的数据数组，它存储了图像的颜色、光照强度、表面法线等信息。这些信息可以被映射到三维物体的表面，从而为物体赋予丰富的细节和材质特性。例如，一张木纹的纹理图像，它包含了木纹的颜色变化、纹理走向等信息，当我们将其应用到一个长方体模型上时，这个长方体就会看起来像一个真实的木质物体。

常见纹理类型

颜色纹理

这是最常见的纹理类型，它主要存储了图像的颜色信息。比如我们在游戏中看到的角色皮肤纹理、建筑外墙的颜色纹理等。颜色纹理可以是写实风格的照片，也可以是手绘的艺术风格图像。例如，在一款角色扮演游戏中，角色的服装纹理可能是精美的手绘图案，通过颜色纹理映射到角色的模型上，使角色具有独特的外观。

法线纹理

法线纹理存储的是物体表面的法线信息。它不是直接表示颜色，而是通过改变光照在物体表面的反射方式来营造出凹凸不平的视觉效果。例如，一个原本平滑的平面，当应用了带有砖块凹凸细节的法线纹理后，在光照下会呈现出砖块的立体感，仿佛表面真的有凹凸的砖块结构。这在节省几何模型复杂度方面非常有效，因为不需要创建大量的几何细节来模拟凹凸。

高度纹理

高度纹理记录了物体表面的高度信息。它可以用于生成地形、浮雕等效果。例如，在地形渲染中，高度纹理可以定义山脉、山谷等地形的高度变化，通过特定的算法将这些高度信息转换为三维地形的起伏，再结合颜色纹理，就可以创建出逼真的自然景观。

环境纹理

环境纹理用于模拟周围环境对物体的反射效果。常见的有天空盒纹理，它是一个巨大的包围整个场景的纹理，通常映射到一个立方体的内表面，当物体反射环境时，就从这个天空盒纹理中获取相应的颜色信息。例如，在一个户外场景中，金属物体表面会反射天空、周围建筑等环境元素，环境纹理就能很好地模拟这种反射效果。

纹理坐标

纹理坐标是用于指定三维物体表面的点与二维纹理图像上的点之间对应关系的坐标系统。它的取值范围通常是从 0 到 1，在这个范围内可以精确地定义物体表面的每个点应该从纹理图像中获取哪个位置的颜色或其他信息。例如，对于一个简单的正方形平面，如果我们将其纹理坐标设置为左下角对应纹理图像的 (0, 0)，右上角对应 (1, 1)，那么平面上的其他点就会根据其相对位置从纹理图像中获取相应的颜色，从而实现纹理的正确映射。

纹理坐标的指定

• 手动指定

当我们创建三维模型时，可以手动为模型的顶点指定纹理坐标。例如，对于一个圆柱体模型，如果我们想要将一个纵向的纹理（如木纹纹理）正确地映射到圆柱体表面，就需要仔细计算每个顶点的纹理坐标。对于圆柱体侧面的顶点，纹理坐标的 U 方向（水平方向）可以根据顶点在圆周上的角度位置来确定，V 方向（垂直方向）可以根据顶点在圆柱体高度方向上的位置来确定。

• 自动生成

一些建模软件或图形库也提供了自动生成纹理坐标的功能。这种方式适用于一些简单的几何形状或具有规则结构的模型。例如，对于一个球体模型，自动生成的纹理坐标可以将地球的纹理图像正确地映射到球体表面，呈现出地球的外观。但是对于复杂的模型，自动生成的纹理坐标可能无法满足精确的纹理映射需求，还需要手动调整。

纹理映射方式

• 重复纹理

  当纹理坐标超出 0 到 1 的范围时，重复纹理映射会将纹理坐标对 1 取模，使其重新回到 0 到 1 的范围内，从而实现纹理在物体表面的重复铺贴效果。例如，对于一个墙面模型，如果我们使用一个小的砖块纹理，并采用重复纹理映射方式，那么墙面会看起来像是由无数个相同的砖块平铺而成，无论墙面的面积有多大，纹理都会不断重复，节省了纹理资源的同时又能创建出大面积的纹理效果。

• 镜像纹理

当纹理坐标超出 0 到 1 的范围时，镜像纹理映射会根据纹理坐标的奇偶性来决定是否对纹理进行镜像。如果纹理坐标的某个分量（如 U 或 V）是奇数倍的 1 超出范围，那么对应的纹理会在该方向上进行镜像。例如，对于一个中心对称的图案纹理，如圆形花纹，采用镜像纹理映射到一个长方体的两个相对面上，可以使花纹在两个面上对称显示，增加了纹理的多样性和美观性。