Game101计算机图形学入门（7）shader ——着色频率 ...

RhinoFreak

7.1 着色频率  7.2 图形渲染管线  7.3 Shader与GPU  7.4 纹理映射
07 着色（光照与基本着色模型）中提到Ping Point的概念，但并没有具体说是谁的发现向量，这就是着色频率的工作。
着色频率


Image

上图分别对应着色应用在平面，顶点，像素的效果。
7.1 着色频率

7.1.1 平面着色Flat Shading  7.1.2 顶点着色Gouraud Shading 7.1.3 像素着色Phong Shading  7.1.4 三种着色频率的对比

7.1.1 平面着色Flat Shading

• Flat Shading，求每个面的法向量并着色。
  
• Flat Shading计算快，但效果不好。
  

Image


定义逐平面法线向量：三角形两条边叉乘。
7.1.2 顶点着色Gouraud Shading

Gouraud Shading，求每个顶点法线并着色，三角形内部颜色值插值。



Image


定义逐顶点法线向量：认为顶点的法线为相邻面的法线的（加权面积）平均



Image


7.1.3 像素着色Phong Shading

• Phong Shading，求每个像素法线并着色。
  
• Phong Shading，效果好但开销大。
  

Image


定义逐像素法线：重心插值



Image


7.1.4 三种着色频率的对比




Image


着色频率取决于模型精度，精度越高，频率可以越低。
7.2 图形渲染管线

7.2.1 顶点处理  7.2.2 三角形阶段  7.2.3 光栅化 7.2.4 片元阶段  7.2.5 Framebuffer处理

Image


7.2.1 顶点处理




Image


顶点处理的作用是对所有顶点数据进行MVP变换，最终得到投影到二维平面的坐标信息（同时为了Zbuffer保留深度z值）。超出观察空间的会被剪裁掉。
7.2.2 三角形阶段

三角形处理十分容易理解，就是将所有的顶点按照原几何信息，变成三角面，每个面由3个顶点组成。
7.2.3 光栅化




Image


得到了许许多多个三角形之后，接下来的操作自然就是三角形光栅化了。
7.2.4 片元阶段




Image





Image





Image


在进行完三角形的光栅化之后，知道了哪些在三角形内的点可以被显示，那么如何确定每个像素点或者说片元(Fragement)的颜色呢？[注：片元可能比像素更小，如MSAA抗拒齿操作的进一步细分得到的采样点]。那自然就是着色了，也就是片元处理阶段应该做的。
注意这阶段顶点处理也亮起来是因为我们需要顶点信息对三角形内的点进行属性插值(tips：当然也可以直接在顶点处理阶段就算出每个顶点的颜色值，如Gouraud Shading一样)。当然这一阶段也少不了Z-Buffer来帮助确定，哪些像素点应该显示在屏幕上，哪些点被遮挡了不应该显示
片元处理中，还有纹理映射的步骤。
7.2.5 Framebuffer处理

将所有的像素颜色信息整合在一起，输送给显示设备加以显示。这也就完成了整个图形渲染管线了。
7.3 Shader与GPU

7.3.1 Shader  7.3.2 GUP

7.3.1 Shader

• 能在硬件上执行的语言
  
• 每个顶点/像素执行一次（不用for循环）
  
• 顶点的操作→顶点着色器vertex shader
  
• 像素的操作→片元着色器fragment shader
  

例：
GLSL例子



Image


7.3.2 GUP

• 独显/核显
  
• gpu可以理解成高度并行化的处理器（核心数量理解为并行线程的数量）
  
• gpu并行度惊人，远超过cpu
  

7.4 纹理映射

7.4.1 纹理(Texture)  7.4.2 纹理坐标UV  7.4.3 特殊纹理tile

纹理映射定义任意点的不同属性，让同一个光照模型下点的颜色不同。



Image


7.4.1 纹理(Texture)

物体的表面是2D的，也就是说可以将三维物体上的任意一个点都映射到一个2维平面之上。



Image


倘若拥有从3维World space到2维Texture space的一个映射关系，那么只需要将每个点的颜色信息即漫反射系数存储在2维的Texture之上，每次利用光照模型进行计算的时候根据映射关系就能查到这个点的漫反射系数是多少，所有点计算完之后，结果就像最左边的screen space之中，整个Texture被贴在了模型之上。
例：独眼怪



Image


7.4.2 纹理坐标UV




Image


纹理坐标UV表示Texture的映射关系。

• U/V范围一般[0,1]
  

纹理坐标伪代码：



Image


简而言之就是对每个光栅化的屏幕坐标算出它的uv坐标(利用三角形顶点重心坐标插值)，再利用这个uv坐标去查询texture上的颜色，把这个颜色信息当作漫反射系数Kd。
一个点/像素 →（通过重心坐标插值）uv → 查询找到对应texcolor代替kd
7.4.3 特殊纹理tile




Image


tile纹理有上下左右重复拼接都是连续的特性，多用在贴在墙面或地板上。
例：


Image

本文使用 Zhihu On VSCode 创作并发布