着色器

cocos里可以直接创建着色器(表明着色器)，也可以只创建着色器片段。

Cocos Effect 通常由两个部分组成：

CCEffect：用于声明渲染技术（Technique）、渲染过程（Pass）、渲染状态、材质参数等属性。
CCProgram：用于声明顶点着色器（Vertex Shader）和片元着色器（Fragment Shader）代码片段。

CCEffect

由 CCEffect 包裹的部分是由 YAML 语法声明的渲染流程相关的描述信息。

CCEffect 的核心内容是渲染技术（technique），一个 CCEffect 中支持定义多个渲染技术，但在实际渲染过程中，只有其中一个会被采用。每个渲染技术（technique）都包含了名称（name）和渲染过程（pass），名称用于标记渲染技术的用途，渲染过程则定义了一个完整的渲染流程所需要的全部信息。

一个渲染技术可以包含多个渲染过程，渲染过程按定义的先后顺序逐一执行。

一个渲染过程必须包含一个顶点着色器（Vertex Shader）和一个片元着色器（Fragment Shader），其余都是可选配置项。
顶点/片元着色器需要指定使用的 Shader（也就是用下文中介绍的 CCProgram 声明的着色器），以及指定着色器的入口函数。

以下是引擎里的代码示例：

CCEffect %{
  techniques:
  - name: tag
    passes:
    - vert: vs:entry
      frag: fs:entry
      <optional: material properties>
      <optional: pipeline states>
      <optional: one or more definitions>
    ...
  ...
}%

渲染过程(Pass)可选参数

每个渲染过程都只有 vert 和 frag 两个必填参数，分别用于声明当前渲染过程使用的顶点着色器和片元着色器，格式为片段名: 入口函数名。

注意：自定义着色器的代码中不应该使用 main 函数，Cocos Effect 在编译时会自动添加一个 main 函数并调用渲染过程的入口函数（例如 vert 或 frag），main 函数会将入口函数的返回值作为当前 Shader 的输出（例如 gl_Position 或 gl_FragColor）。

CCProgram

以下是引擎里的代码示例：

CCProgram shader-name %{
  <required: precision settings>
  <optional: include>  
  <optional: ubo>
  <optional: custom attribute>
  <optional: >
  vec4 entry(){
    // 需要返回一个 vec4 类型数据
  }
}%

着色器 ​

CCEffect ​

渲染过程(Pass)可选参数 ​

CCProgram ​

着色器

CCEffect

渲染过程(Pass)可选参数

CCProgram