Cocos Creator 2.3.x渲染流程-Effect介绍

时间:2024-03-28 16:07:20

一、Effect 文件

1、创建一个 Sprite 组件的时候,可以看到,所采用的的材质是 builtin-2d-sprite ,其实 Label 组件也是默认用的 builtin-2d-sprite 材质,我们就以此为例

Cocos Creator 2.3.x渲染流程-Effect介绍

二、CCEffect 结构说明

1、以CCEffect结构例子,做了详细注解

Cocos Creator 2.3.x渲染流程-Effect介绍

三、CCProgram 结构说明

1、在 passes 数组中,我们通过 vert 参数指定了顶点着色器,通过 frag 参数指定了片元着色器,而在 Cocos Creator 的 Effect 文件中,是通过 CCProgram 去包裹这两个着色器的实现代码;

四、顶点 Shader 说明

1、以顶点shader为例,做了详细注解

Cocos Creator 2.3.x渲染流程-Effect介绍

五、片元 Shader 说明

1、以片元shader为例,做了详细注解

Cocos Creator 2.3.x渲染流程-Effect介绍

六、uniform 参数

1、所有 uniform 参数在 CCEffect 参数的 properties 中声明,而properties中的参数列表,则会显示在我们的 Inspector 上

Cocos Creator 2.3.x渲染流程-Effect介绍

2、在 CCProgram fs 结构中,我可以找到 texture 参数的定义

Cocos Creator 2.3.x渲染流程-Effect介绍

3、可以看到,这个 texture 参数是在宏定义 USE_TEXTURE 中定义的,而宏定义,在Inspector中,则会有个虚线框框

Cocos Creator 2.3.x渲染流程-Effect介绍

4、自定义uniform参数,以结构体形式定义,如果properties中声明,就会在编辑器的Inspectar中显示,不声明就不会显示。

Cocos Creator 2.3.x渲染流程-Effect介绍

七、总结

1、所有内置的shader变量都必须通过#include引入头文件

  • 所有头文件都在chunks目录下
  • mac版本为例:/Applications/CocosCreator-2.3.0.app/Contents/Resources/engine/cocos2d/renderer/build/chunks
  • 可以通过项目assets的相对路径or绝对路径引入头文件资源

2、需要篇外阅读

YAML 标准

Pass可配置参数

内置shader变量

Properties中参数列表-默认值