Cocos Creator Shader入门实战(三)：CCEffect参数配置讲解

引擎版本：3.8.5

您好，我是鹤九日！

回顾

---

稍微回顾下前面两篇博客讲解的内容：

一、Cocos渲染效果的实现需要Material材质和Effect资源的互相配合。

二、Effect资源负责Shader片段的编写和属性配置，Material材质负责对Effect资源的包装和可视化调整。

三、官方引擎使用的是OpenGL ES渲染，语言是类C语言的GLSL。

四、在可编程渲染管线中用户只需关注顶点着色器和片段着色器的编写，顶点着色器用于坐标转换，片段着色器用于着色。

学习Shader，我们需要做到：遵循引擎设定规则，按照官方要求规范，才能更好的理解、使用Shader。

简介

---

上篇文章中，我们介绍了下OpenGL的渲染流程和GLSL的一些语法，主要为了能够理解着色器的一些流程原理。

但是这些内容，在引擎的设定规则中：Shader着色器代码相关，仅属于Effect资源配置的一部分。

Effect资源，结构主要有两部分：

一、借助 GLSL 类C语言，实现顶点、片段着色器的部分代码编写，通过CCProgram来配置。

二、借助 YAML 类Json语言，声明的渲染流程的一些属性参数，通过CCEffect来配置。

两部分内容互相补充，才能共同构建一个完整的渲染流程描述，这样的描述才能被Material材质资源使用。

Effect资源的大概结构如下：

CCEffect %{
    // 渲染技术、过程、状态、材质和属性参数的配置
}

CCProgram sprite-vs %{
    // 顶点着色器的片段代码
}%

CCProgram sprite-fs %{
    // 片段着色器的片段代码
}%

• CCEffect %{}% 实现渲染参数配置相关
• CCProgram %{}% 实现着色器片段代码逻辑

今天的内容，讲解关于Effect资源下的流程配置参数，即CCEffect。

理解了它，再结合着色器片段代码，我们便理解：Material材质对Effect包装后，通过属性检查器的一些属性展示，以及后续如何通过代码来配置自定义的属性参数。

注：能力有限，理解可能有误，期待您的谅解，并欢迎您的指出，感谢。

YAML

---

CCEffect的配置是通过YAML实现的，它是一种数据序列化格式，主要用于配置文件、数据交换等。

特点：简洁易读、层次结构清晰，支持多种数据类型，兼容性强，可转换为Json、XML、CSV等。

刚开始学习的阶段，YAML语言看似对初学者是不友好的。

还好，官方的引擎采用的是YAML 1.2标准的解析器，我们也能使用JSON进行配置，只是JSON的配置难免会繁琐些。

以builtin-sprite.effect为例，看下官方内置的Effect属性配置。

路径：../internal/effects/builtin-sprite.effect

CCEffect %{
  techniques:
  - passes:
    - vert: sprite-vs:vert
      frag: sprite-fs:frag
      depthStencilState:
        depthTest: false
        depthWrite: false
      blendState:
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
          blendDstAlpha: one_minus_src_alpha
      rasterizerState:
        cullMode: none
      properties:
        alphaThreshold: { value: 0.5 }
}%

将它转换为Json内容：

这样的对比，是否能看清晰的看到YAML和JSON的区别呢。工具相关

https://www.lddgo.net/convert/yaml-to-json : 没有广告，但不支持XML、CSV的转换

https://codebeautify.org/yaml-to-json-xml-csv：功能强大，但有广告

特性

YAML语言，真正的强大不是简洁，而是是引用和继承。

先以官方文档的示例演示下：

• 引用的主要结构是： &name 和 *name
  

• 继承的主要结构是：&name 和 <<: *name
  

再以builtin-unit.effect的部分配置为例：

路径：../internal/effects/builtin-unit.effect

注： 右侧便是最下面引用的数据字段

引用和继承，这两个特性是可以实现对配置的复用的。

语法

YAML的语法，没有想象中的那么难，只是新的东西，恐惧让我们畏难而已。

注意：千万不要将CCEffect的参数设置认定为语法的组成部分，我当时就是这么想的，愁坏我了…

语法相关，主要内容相关如下：

一、行首的空格代表数据的层级

二、所有的引号、逗号都可以省略，但空格和冒号不可省略

三、以减号加空格开头的，表示数组元素

四、引用的主要结构是： &name 和 *name

五、继承的主要结构是：&name 和 <<: *name

这就够用了。

属性结构

---

YAML语法的使用，主要是用于配置渲染的属性参数，这些参数类型可以这样划分：

一、以techniques命名的渲染技术， CocosShader定义的重要概念

二、以passes命名的渲染过程， CocosShader定义的重要概念

每个渲染过程 pass 主要包括的参数有：

1. 必备参数：顶点、片段着色器的名字配置

2. 可选参数：着色器不同状态的设置，比如深度、模板、混合模式、光栅化等

3. 可选参数：自定义属性参数的配置，主要用于uniform或材质中属性的调整

简单的理解：渲染技术用于实现不同的渲染模式，渲染过程用于配置不同渲染模式下的参数和属性。

渲染技术可定义多个，每个渲染技术可包含多个渲染过程，每个渲染过程必须带有顶点和片段着色器的配置。

这就是YAML配置下的整体CCEffect的结构。

以bultin-sprite.effect为例, 配置属性如下：

注：如果渲染技术只有一个，name名字可忽略

CCEffect %{
  # 声明渲染技术
  techniques:
  # 声明渲染流程
  - passes:
    # 声明顶点、片段着色器名和入口名  
    - vert: sprite-vs:vert
      frag: sprite-fs:frag
      # 设置深度、模板测试的状态
      depthStencilState:
        depthTest: false
        depthWrite: false
      # 设置混合模式
      blendState:
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
          blendDstAlpha: one_minus_src_alpha
      # 设置光栅化状态
      rasterizerState:
        cullMode: none
      # 自定义属性
      properties:
        alphaThreshold: { value: 0.5 }
}%

注：在学习2D shader的过程中，此属性结构除了properties自定义属性外，大多为通用性配置。

接下来，我们简要说明下每块的属性相关。

渲染技术(Technique)

渲染技术是Cocos Shader定义的一个重要概念，用于描述渲染过程(pass)的整体结构和配置。

多个渲染技术存在的情况下，每个渲染技术都必须特定的名称(name)，用于标记渲染技术的用途，CCEffect配置支持定义多个，但实际的应用只能有一个。

Cocos引擎，这样的设计目的可能是：

一、通过定义多个不同技术，用于实现不同的渲染模式。就如builtin-unlit.effect 中包含四种技术：

• opaque 用于渲染不透明物体
• transparent 用于渲染半透明物体
• add 采用加法混合模式，渲染半透明物体
• alpha-blend 采用透明混合模式，渲染半透明物体

二、满足不同场景的需求，优化性能，避免不必要的计算和渲染开销。

三、作为跨平台引擎，用于满足不同平台的特性

在Material材质的属性检查器中，通过Technique 便可选择不同类型的渲染技术。

渲染过程(Pass)

它同样是Cocos Shader定义的一个重要概念，它主要用于定义和配置对象的渲染状态和属性。

每一个Pass都是一个独立的渲染指令集合，在每个渲染技术(technique)中，可包含多个。

每个渲染过程(pass)都必须配置vert和frag的名字和入口参数，其它都是可选。

注：名字和入口，可以是文件中CCProgram声明的，也可以是引擎提供的标准头文件相关

比如：我们创建的无光照effect文件，它的顶点着色器就是引用的引擎提供的：

techniques:
  - name: opaque
    passes:
      # 引擎提供的通用性片段相关，在引擎中这些封装被称为Chunks
    - vert: legacy/main-functions/general-vs:vert # builtin header]
      # Effect资源配置文件下的内部定义
      frag: unlit-fs:frag
      ...

注：自定义的着色器入口名不要使用main，因为引擎编译的时候会自动添加main作为渲染的入口

在CocosShader的渲染中，渲染过程是按照顺序依次执行的，组合起来便是复杂的渲染效果。

以builtin-unlit.effect的opaque渲染技术为例:

• Pass 0: 基础渲染，用于渲染不透明物体的主体部分
• Pass 1: 平面阴影渲染，用于在场景中添加简单的阴影效果。
• Pass 2: 延迟前向渲染
  
  

渲染管线状态

渲染过程(pass)中配置一些参数，比如：光栅化、混合模式、深度和模版测试等，这些又被官方称为PipelineStates。

更多的参数说明可参考官方文档：PipelineStates

这里简单罗列三个：

一、DepthStencilState 光栅化时的可选渲染状态

二、RasterizerState 深度和模板缓存的测试与状态

三、BlendState 材质混合状态

 # 配置深度、模板测试
 depthStencilState:
    # 禁用深度测试，它用于判断一个像素是否被其他像素遮挡
    depthTest: false
    # 禁用深度写入
    depthWrite: false
 # 配置透明混合状态
 blendState:
    targets:
      # 启用混合模式
      # 这种混合模式是最常见的 透明度混合模式，公式为：
      # Final Color = SrcColor * SrcAlpha + DstColor * (1 - SrcAlpha)
      # 它适用于常见的半透明效果，例如透明纹理、UI元素等。
    - blend: true
      # 源因子设置为 src_alpha，表示使用片段颜色的 alpha 值作为混合因子
      blendSrc: src_alpha
      # 目标因子设置为 one_minus_src_alpha，表示使用 1 - src_alpha 作为混合因子
      blendDst: one_minus_src_alpha
      blendDstAlpha: one_minus_src_alpha
 # 配置光栅器状态
 rasterizerState:
    # 禁用面剔除，常见参数有：front, back, none
    cullMode: none

注：能力有限，后续的学习再逐渐的补充原理相关…

属性参数(properties)

属性参数在CCEffect配置中，简单可理解为：

一、定义着色器中的unifrom变量，用于处理着色器的实现逻辑。

二、在Material的属性检查器中显示，用于Shader效果的可视化调整。

虽然是自定义，但毕竟涉及到Shader的实现和可视化。除了通用的属性值：value 以外，我们可以将其分为两部分：

注：更多参数可参考：Property 参数列表

一、samples 纹理相关

二、editor参数

主要应用于编译器的属性检查器中， 主要属性有:

简单的示例：

lightCenterPoint: { value: [0.2, 0.2], editor: { tooltip: "光束中心点坐标" }}
lightAngle: { value: 36.0, editor: { tooltip: "光束倾斜角度" }}

最后

---

今天的文章内容大概就说到这里了，内容相关部分参考了官方文档的一些说明，主要有：

着色器语法 ：文档内容主要讲解的是Effect资源的配置结构

Pass可选配置参数： 文档内容主要对Pass渲染中的参数进行了详细的说明

YAML 语法：主要说明了YAML语法的使用

不瞒您说，Shader的基础理论的确枯燥无味，然而又不得不懂，学习的过程中，好奇是虽然都存在的，我们都一样。

就看能不能熬下去了，这里想说两点：

一、为自己的能力不足，不能为您深入讲解感到抱歉

二、期待与您一起在学习的路上变的强大

我是鹤九日，祝您生活愉快！