Cocos Creator 3.1 材质升级指南

本文将详细介绍 Cocos Creator 3.0 的材质升级到 v3.1 的注意事项。

1. 着色器升级与变化

1.1 内置头文件变化

原来 v3.0 的标准着色器头文件 shading-standard 在 v3.1 改成了 standard-surface-entry,可以使 effect 同时兼容 forward 渲染管线和 deferred 渲染管线。

原来 v3.0 的 cc-fog 头文件在 v3.1 改成了 cc-fog-vs/fs,拆分成了顶点着色器与片元着色器两个部分。

1.2 顶点着色器

  • gl_Position

    v3.0 的 VS 主函数名称 vert 在 v3.1 改成了 main,并且新增了宏 gl_Position,用于给返回值赋值。

      CCProgram standard-vs %{
          precision highp float;  
    
          // include your headfile
    
          #include <cc-fog-vs> // 注意这里头文件名称的变化
    
          // fill in your data here
    
          void main () {
    
              // fill in your data here
    
              gl_Position = fill in your data result;
          }
      }%
    

1.3 片元着色器

  • CC_STANDARD_SURFACE_ENTRY()

    加载标准着色器头文件 standard-surface-entry,使用 v3.1 的标准着色器输出函数 CC_STANDARD_SURFACE_ENTRY() 替换原有 v3.0 着色器输出的函数 frag()

      CCProgram standard-fs %{
    
          // include your headfile
    
          #include <cc-fog-fs> // 注意这里头文件名称的变化
          #include <standard-surface-entry> // 注意这里标准着色器头文件的名称变化
    
          // fill in your data here
    
          void surf (out StandardSurface s) {
    
              // fill in your data here
    
          }
          CC_STANDARD_SURFACE_ENTRY() // 标准着色器输出函数
      }%
    

2. Deferred 渲染管线

2.1 Deferred Render Pipeline

v3.1 的材质系统与 v3.0 最大的区别在于 v3.1 支持了 deferred 渲染管线,引擎自带标准的 standard-surface-entry 头文件,可以同时支持 forward 渲染管线和 deferred 渲染管线,用法如下:

CCEffect %{
    techniques:

    // fill in your data here

        - &deferred
        vert: // your Vertex shader
        frag: // your Fragment shader
        phase: deferred
        propertyIndex: 0
        blendState:
            targets: // 关闭混合
            - blend: false
            - blend: false
            - blend: false
            - blend: false
            properties: // your properties name

    // fill in your data here

}%

// fill in your data here

CCProgram standard-fs %{
    precision highp float;
    #include <cc-global>
    #include <shared-ubos>
    #include <cc-fog-fs> // 注意这里头文件名称的变化。
    #include <standard-surface-entry> // 注意这里标准着色器头文件的名称变化

    // fill in your data here
    void surf (out StandardSurface s) {

        // fill in your data here

    }
    CC_STANDARD_SURFACE_ENTRY() // 标准着色器输出函数
}%

// fill in your data here

2.2 渲染管线判断

在头文件 standard-surface-entry 会判断选择了哪条渲染管线,光照计算在文件 shading-standard-additive

如果判断是 deferred 渲染管线,会先调用 deferred-lighting effect 文件,随后调用光照计算文件 shading-standard-additive

#define CC_STANDARD_SURFACE_ENTRY()                                 
#if CC_FORWARD_ADD                                                 
  #include <shading-standard-additive>

  // fill in your data here

#elif CC_PIPELINE_TYPE == CC_PIPELINE_TYPE_FORWARD  // 判断是否为前向渲染管线

  // fill in your data here

#elif CC_PIPELINE_TYPE == CC_PIPELINE_TYPE_DEFERRED  // 判断是否为延迟渲染管线

 // fill in your data here

#endif

3. 参数传输升级

v3.0 顶点着色器往片元着色器传递 shadow 参数的宏为 CCPassShadowParams,v3.1 则修改为 CC_TRANSFER_SHADOW

v3.1 顶点着色器往片元着色器传输 FOG 参数时,直接使用 CC_TRANSFER_FOG 宏。

版本对比:

  • v3.0

      v_fog_factor = CC_TRANSFER_FOG(pos);
      CCPassShadowParams(pos);
    
  • v3.1

      CC_TRANSFER_FOG(pos);
      CC_TRANSFER_SHADOW(pos);
    

条与 "" 相匹配的结果

    没有与 "" 匹配的结果