基础篇

渲染流水线

• 定义：渲染流水线的工作任务由一个三维场景出发，生成（或者渲染）一张二维图像。换句话说，计算机需要从一系列的顶点数据，纹理等信息出发，把这些信息最终转换成一张人眼可见的图像。这个工作有GPU和CPU共同完成

• 三个阶段

  
  渲染流水线的三个概念阶段.png
  • 应用阶段：应用主导，CPU实现，开发者可以控制
  • 几何阶段：对渲染图元进行处理，由GPU实现
  • 光栅化阶段：使用上一阶段传递的数据来产生屏幕像素，最终渲染出图像，由GPU实现
• CPU和GPU之间的通信

  • 数据加载到显存

    
    渲染所需的数据（两张纹理以及3个网格）从硬盘最终加载到显存中。在渲染时，GPU可以快速访问这些数据.png

  • 设置渲染状态（渲染状态：定义了场景的网格是怎样渲染的，使用哪个顶点着色器/片元着色器、光源属性、材质等）

    
    在同一状态下渲染三个网格。由于没有更改渲染状态，因此三个网格的外观看起来像是同一种材质的物体.png

  • 调用Draw Call

    
    CPU通过调用Draw Call来告诉GPU开始进行一个渲染过程。一个Draw Call会指向本次调用需要渲染的图元列表.png

• GPU流水线
  概述：当GPU从CPU那里得到渲染命令后，就会进行一系列流水操作，最终渲染到屏幕上，用一幅图表示：

  
  image.png

  • 顶点着色器（Vertex Shader）：可编程的，用于实现顶点的空间变换、顶点着色等功能，需要完成坐标变换和逐顶点光照。

    
    GPU在每个输入的网格顶点上都会调用顶点着色器。进行顶点的坐标变换，需要时还可以计算和输出顶点的颜色.png
    顶点着色器会将模型顶点的位置变换到齐次裁剪坐标空间下.png

  • 剪裁
    概述：由于场景可能很大，摄像机覆盖不到所有的物体，不在视野内的无需处理，所以有了剪裁

    
    只有在单位立方体的图元才需要被继续处理.png

  • 屏幕映射
    概述：屏幕映射的任务时把每个图元的x和y坐标转换到屏幕坐标系下（输入的z坐标不处理，直接传递到光栅化阶段）

    
    屏幕映射将x、y坐标从（-1, 1）范围转换到屏幕坐标系中.png
    OpenGL和DirectX的屏幕坐标系差异.png
  • 三角形设置
  • 三角形遍历

  • 片元着色器
    概述：另一个非常重要的可编程着色器。输入是上一阶段对顶点的插值结果，使用到重要的渲染技术是纹理采样。

    
    根据上一步插值后的片元信息，片元着色器计算该片元的输出颜色.png
  • 逐片元操作
    渲染最后一步：测试、合并/混合。
    两个重要的概念：深度测试和混合Blend
    逐片元操作阶段所做的操作.png
• 一些容易困惑的地方
  • 什么是OpenGL和DirectX：图像应用编程接口，这些接口架起了上层应用和底层GPU的沟通桥梁
  • 什么是HLSL、GLSL、CG：对应DirectX、OpenGL、NVIDIA的着色语言
  • 如何减少Draw Call：主要使用批处理技术

Unity Shader 基础

• Unity Shader概述：一对好兄弟，材质（Material）和Unity Shader，Unity中需要材质和Shader配合才能达到效果。材质需要赋值给Mesh或者粒子系统

• Unity Shader的基础：ShaderLab，专门为Unity Shader服务的语言

  
  Unity Shader为控制渲染过程提供了一层抽象。如果没有使用Unity Shader（左图），开发者需要和很多文件和设置打交道，才能让画面呈现出想要的效果；而在Unity Shader的帮助下（右图），开发者只需要使用ShaderLab来编写Unity Shader文件就可以完成所有的工作.png
• Unity Shader结构
  • 名字

  Shader "Custom/MyShader"
  

  • Properites：显示在面板中
  • SubShader：重量级成员，至少需要一个
  • Fallback：如果所以的SubShader都不能在这块显卡运行，则使用兜底的这个Shader
• Shader的形式
  • 表面着色器
  • 顶点/片元着色器
  • 固定函数着色器（被抛弃）

  • 如何选择

    
    选择哪种着色器.png

学习Shader所需的数学基础

• 简介：这张主要介绍数学基础，讲述了各个坐标系、点和矢量、矩阵、坐标空间等知识，有些枯燥和难懂，建议自行阅读书籍深入学习。

初级篇

开始Unity Shader的学习之旅

• 一个最简单的顶点/片元着色器

  
  image.png

• ShaderLab属性和CG对应关系

  
  image.png
• Unity提供的内置变量，可以从官网下载

  http://unity3d.com/cn/get-unity/download/achive
  

image.png

• CGIncludes中主要包含的文件以及它们的主要用处

  
  image.png

• UnityCG.cginc一些常用的结构体

  
  image.png

• UnityCG.cginc一些常用的帮助函数

  
  image.png

• 从应用传递模型数据给顶点着色器是Unity支持的常用语义

  
  image.png

• 从顶点着色器传递给片元着色器时Unity使用的常用语义

  
  image.png

• 片元着色器输出时Unity支持的常用语义

  
  image.png

• 如何定义复杂的变量类型，例如：

  
  image.png
• 如何Debug
  • 使用假彩色图像输出到屏幕
  • 使用Visual Studio

  • 最新利器：帧调试器（Frame Debugger）

    
    帧调试器.png
• shader整洁之道
  • float、half、fixed等使用合适的精度
  • 慎用分支和循环
  • 不要除以0

  • 避免不必要的计算

    
    image.png

Unity中的基础光照

• 我们如何看到这个世界的？
  • 光源
  • 吸收和散射
  • 着色：根据材质属性、光源信息计算沿某个观察方向的出射度，也称为光照模型
  • BRDF光照模型
• 标准光照模型
  • 环境光
  • 自发光
  • 漫反射
  • 高光反射
  • 逐像素还是逐定点：在片元着色器中计算，也被称为逐像素光照；在顶点着色器中计算，也被称为逐顶点光照

基础纹理

• 目的

  
  image.png

• 纹理属性

  
  image.png
• Wrap Mode
  • Repeat：如果纹理坐标超过1，整数部分舍弃，使用小数部分采用，这样的纹理结果会不断重复
  • Clamp：该模式下，如果纹理坐标超过1，将会截取到1.如果小于0，截取到0

• 两种模式对比

  
  Wrap Mode决定了当纹理坐标超过[0, 1]范围后将会如何被平铺.png

• 偏移属性（Offset）

  
  偏移（Offset）属性决定了纹理坐标的偏移量.png

透明效果

• 概述
  image.png
• 为什么渲染顺序很重要？
  image.png
  image.png
• Unity Shader渲染顺序
  渲染队列.png
  image.png

• ShaderLab混合指令

  
  image.png

• ShaderLab混合因子

  
  image.png

• ShaderLab混合操作

  
  image.png

• 双面渲染透明效果

  
  image.png

中级篇和高级篇

• 比较复杂了，需要结合实际运用，在此就不叙述了

总结

• 这本书可以说是很经典的入门书籍，特别适合有一定数学基础和或者想往技术美术方向发展的人学习。看完后觉得Shader就这样，不算难。但是真正要实现一个特效时，又无从下手，就是这么神奇。收获还挺大的，学到了很多Shader方面的基本概念。以后有机会再回过头来看一看吧。