前言
![shadertoy.png-286.5kB](http://static.zybuluo.com/candycat/x27bgzdj1cmfbzxa43z8t5qw/shadertoy.png)
第2章 渲染流水线
![流水线.png-83.4kB](http://static.zybuluo.com/candycat/zqt40itigpzl8qkn30m433g6/%E6%B5%81%E6%B0%B4%E7%BA%BF.png)
图2.1 真实生活中的流水线
图2.2 渲染流水线中的三个概念阶段
图2.3 渲染所需的数据(两张纹理以及3个网格)从硬盘最终加载到显存中。在渲染时,GPU可以快速访问这些数据
图2.4 在同一状态下渲染三个网格。由于没有更改渲染状态,因此三个网格的外观看起来像是同一种材质的物体。
图2.5 CPU通过调用Draw Call来告诉GPU开始进行一个渲染过程。一个Draw Call会指向本次调用需要渲染的图元列表
图2.6 GPU的渲染流水线实现。颜色表示了不同阶段的可配置性或可编程性:绿色表示该流水线阶段是完全可编程控制的,黄色表示该流水线阶段可以配置但不是可编程的,蓝色表示该流水线阶段是由GPU固定实现的,开发者没有任何控制权。实线表示该shader必须由开发者编程实现,虚线表示该Shader是可选的
图2.7 GPU在每个输入的网格顶点上都会调用顶点着色器。顶点着色器必须进行顶点的坐标变换,需要时还可以计算和输出顶点的颜色。例如,我们可能需要进行逐顶点的光照
图2.8 顶点着色器会将模型顶点的位置变换到齐次裁剪坐标空间下,进行输出后再由硬件做透视除法得到NDC下的坐标
图2.9 只有在单位立方体的图元才需要被继续处理。因此,完全在单位立方体外部的图元(红色三角形)被舍弃,完全在单位立方体内部的图元(绿色三角形)将被保留。和单位立方体相交的图元(黄色三角形)会被裁剪,新的顶点会被生成,原来在外部的顶点会被舍弃
图2.10 屏幕映射将x、y坐标从(-1, 1)范围转换到屏幕坐标系中
图2.11 OpenGL和DirectX的屏幕坐标系差异。对于一张512*512大小的图像,在OpenGL中其(0, 0)点在左下角,而在DirectX中其(0, 0)点在左上角
图2.12 三角形遍历的过程。根据几何阶段输出的顶点信息,最终得到该三角网格覆盖的像素位置。对应像素会生成一个片元,而片元中的状态是对三个顶点的信息进行插值得到的。例如,对图2.12中三个顶点的深度进行插值得到其重心位置对应的片元的深度值为-10.0
图2.13 根据上一步插值后的片元信息,片元着色器计算该片元的输出颜色
图2.14 逐片元操作阶段所做的操作。只有通过了所有的测试后,新生成的片元才能和颜色缓冲区中已经存在的像素颜色进行混合,最后再写入颜色缓冲区中
图2.15 模板测试和深度测试的简化流程图。
图2.16 混合操作的简化流程图
图2.17 图示场景中包含了两个对象:球和长方体,绘制顺序是先绘制球(在屏幕上显示为圆),再绘制长方体(在屏幕上显示为长方形)。如果深度测试在片元着色器之后执行,那么在渲染长方体时,虽然它的大部分区域都被遮挡在球的后面,即它所覆盖的绝大部分片元根本无法通过深度测试,但是我们仍然需要对这些片元执行片元着色器,造成了很大的性能浪费
图2.18 CPU、OpenGL/DirectX、显卡驱动和GPU之间的关系
图2.19 命令缓冲区。CPU通过图像编程接口向命令缓冲区中添加命令,而GPU从中读取命令并执行。黄色方框内的命令就是Draw Call,而红色方框内的命令用于改变渲染状态。我们使用红色方框来表示改变渲染状态的命令,
是因为这些命令往往更加耗时
图2.20 命令缓冲区中的虚线方框表示GPU已经完成的命令。此时,命令缓冲区中没有可以执行的命令了,GPU处于空闲状态,而CPU还没有准备好下一个渲染命令。
图2.21 利用批处理,CPU在RAM把多个网格合并成一个更大的网格,再发送给GPU,然后在一个Draw Call中渲染它们。但要注意的是,使用批处理合并的网格将会使用同一种渲染状态。也就是说,如果网格之间需要使用不同的渲染状态,那么就无法使用批处理技术
第3章 Unity Shader基础
![material_shader.png-125.8kB](http://static.zybuluo.com/candycat/hojqrwubqu22k9jo0ues60hd/material_shader.png)
第4章 学习Shader所需的数学基础
![little_cow.png-293.5kB](http://static.zybuluo.com/candycat/tdhtbh0rhx1dw94fbegmfxg9/little_cow.png)
第5章 开始Unity Shader学习之旅
![new_scene.png-74.3kB](http://static.zybuluo.com/candycat/9b4lok82evuyq772bhbnnl6x/new_scene.png)
第6章 Unity中的基础光照
![irradiance.png-60.3kB](http://static.zybuluo.com/candycat/tzgu5oq816ojbkjo4y05rvij/irradiance.png)
第7章 基础纹理
![texture_coordinate.png-349.3kB](http://static.zybuluo.com/candycat/rcl2u5im3ef0pb1esf4pvz06/texture_coordinate.png)
第8章 透明效果
![render_order_0.png-10.7kB](http://static.zybuluo.com/candycat/48l0aapqc57v0gn367tk2akx/render_order_0.png)
第9章 更复杂的光照
![rendering_path_setting.png-30kB](http://static.zybuluo.com/candycat/n67qqzd3bc0q3gca2heih70h/rendering_path_setting.png)
第10章 高级纹理
![cubemap_sample.png-20.1kB](http://static.zybuluo.com/candycat/2r8xxicnsapkqbteoto79pxu/cubemap_sample.png)
第11章 让画面动起来
![boom.png-140.2kB](http://static.zybuluo.com/candycat/l0k525lbsoqgxvy6hx0qcypv/boom.png)
第12章 屏幕后处理效果
![brtsatcon.png-651.1kB](http://static.zybuluo.com/candycat/szhonaye4dir2otxjsjc0836/brtsatcon.png)
第13章 使用深度和法线纹理
![projection_matrix.png-150.4kB](http://static.zybuluo.com/candycat/u6fma5c4boo56dgjbgczlb2i/projection_matrix.png)
第14章 非真实感渲染
![okami_announce_screens6.jpg-169.9kB](http://static.zybuluo.com/candycat/aa2hjqkoibcqmq5g5azdkrfb/okami_announce_screens6.jpg)
第15章 使用噪声
![burn.png-429.1kB](http://static.zybuluo.com/candycat/43pgznadojl5el7s23zpki7x/burn.png)
第16章 Unity中的渲染优化技术
![render_static_window.png-156.1kB](http://static.zybuluo.com/candycat/mw2e3pfqk097fps9wbcwv8ff/render_static_window.png)
第17章 Surface Shader探秘
![bumped_diffuse.png-164.7kB](http://static.zybuluo.com/candycat/slo759tsffn90428bqqkt054/bumped_diffuse.png)
第18章 基于物理的渲染
![reflect_refract.png-26.9kB](http://static.zybuluo.com/candycat/nw3v0p25h9165552cshmr1t1/reflect_refract.png)