快速入门 Cocos Creator 3D Shader 上篇

前言

Shader，又名着色器，是控制 GPU 绘制的指令集。从某种意义来说，着色器是一个把输入转换到输出的程序，为图形渲染管线的某个特定部分而运行。图形渲染管线是渲染的核心组件。通过给定虚拟相机、3D 模型以及光源等场景要素来生成图像。整个渲染流程又可以大致分为：应用阶段、几何阶段、光栅化阶段。其中，应用阶段是在 CPU 上进行，主要负责场景渲染数据的准备，比如顶点数据，相机数据等；几何阶段是在 GPU 进行，主要负责和渲染图元打交道，处理需要绘制的几何相关工作，决定图元怎样绘制，在哪里绘制；光栅化阶段也是在 GPU 上处理，主要是将几何图元进行逐像素处理，最终渲染到屏幕上。下面，引用网络上的一个渲染流程的图片让大家基本了解一下整个过程。

在 Cocos Creator 3D 中主要采用的是 YAML 格式搭配 GLSL 语法以及基本着色器（顶点、片段着色器）来书写 Shader。编辑器中可以通过在 资源管理器 面板，右键选择 新建/Effect 来创建 Shader 资源。但是在实际的项目开发中，通常很多美术效果的表现都没法由程序来独立完成，那这时就会涉及到，如何让 Shader 变成更加简便，可操控的资源呢？那就引入了材质的概念。一个材质依赖一个 Shader 资源，可以通过属性开放的方式提供可调配界面来达到不改一行 Shader 代码就能实现不同的效果。同样通过类似创建 Shader 资源的方式来创建 Material 资源。并选择这个 Material 的 Effect 为前面创建的 Shader。

结构介绍

经过上面的操作后创建的默认 Shader 是一个不带光照，只开放贴图和颜色属性的 shader。这样的 Shader 一般可以应用于 UI 以及粒子上。

接着，把默认创建的 Shader 做一个拆分，剔除掉内容后，基本结构大致是这个样子。

CCEffect %{
    techniques:
    - name: xxx
      passes:
      - vert: program-name:function-name
        frag: program-name:function-name
        [properties]
    - name: xxx
      [passes]
}%

CCProgram vs-name %{}%

CCProgram fs-name %{}%

其中，带 [] 代表的是可以有多个数据。 CCEffect 是一个渲染流程的清单，里面包含了这个 Shader 所包含的所有 pass，顶点、片段选取，属性声明和初始设置以及测试模版配置等等。而 CCProgram 是一个 Shader（顶点/片段着色器） 片段，一个 Shader 文件里又可以包含多个顶点/片段着色器来共 pass 使用。

语法格式

1. CCEffect 格式介绍

在之前的结构介绍里可以看到 CCEffect 是由多个 technique 组成，technique 代表一个实现技术，每一个材质只能选用对应 Shader 的其中一个 technique，每个 technique 可以有多个 pass，pass 就是代表渲染一