Cocos Creator Shader入门实战(一)：材质和Effect的了解

引擎版本：3.8.5

环境： Windows

简介

---

在Cocos Creator中，游戏炫彩缤纷的效果是借助着色器(Shader)来实现的。

Cocos主要基于OpenGL ES，而Shader的编写则是在可编程渲染管线中基于修改：顶点着色器(Vertex) 和 片段着色器(Fragment) 完成的。

Cocos官方，为了简化着色器的复杂配置，更多灵活性，以及能够通过编译器进行可视化管理等等，在Cocos Creator中，实现Shader主要借助两个文件：EffectAsset 和 Material材质。

两者都属于资源文件，简单的理解：

一、EffectAsset 负责Shader的编写、配置和各种属性定义等

二、Material材质 负责对EffectAsset的数据包装，并将一些属性数据可视化显示在属性检查器中，方便用户管理和操作。

可以认为：在Cocos Creator中，想实现各种不同的渲染效果；需要通过Effect配置属性和着色器编写，通过材质来实现对Effect的包装，进而显示出不同的效果。

两者是相辅相成的，缺一不可的。

学习的困惑

---

初次接触材质和Effect的时候，我一脸的茫然。

毕竟从事游戏开发，像OpenGL、渲染、Shader等这些专业的术语，即使不曾使用，在面试中也是无法摆脱的。

当我第一次看到Material材质的属性配置：

第一次看到Effect的属性配置：

即使有着官方文档的加持，我也是一脸的茫然，不知道这些到底代表着什么，以及如何使用。

再到后来，慢慢的明白：看似好像没有接触使用过它们，但实际上它们就像是空气一样，在你的周围弥漫。

因为不管怎样，游戏客户端中所展现的任何可视性的效果都是渲染。

如果从细节上来说，比如：

在Creator 2.4.x版本中，关于某个Sprite的属性显示：

在Creator 3.8.x版本中，关于某个Sprite的属性显示：

这些都是官方对渲染组件的默认配置，前者展示了默认的材质配置，而后者虽然没有显示出来，但依然会默认配置。

稍微延伸下，为什么CocosCreator针对于组件的设定，分为UI组件和渲染组件呢，原因也在这里。

困惑、畏难这些都是难免的，早晚都需要经历和学习，这里提前预祝您的成功。

注：当你慢慢开始学习的时候，你可能会想我一样：哦，原来是这样子！

编译器创建

---

接下来，我们继续说明材质Material和EffectAsset。在编译器中，它们都是支持编译器创建的。

材质的构建

主要有两种：

一、物理材质：Physics Material，主要用于记录物体的物理属性相关，被用于碰撞系统。

二、普通材质： Material，主要被用于管理Effect资源，并控制着色效果的展示。

以普通材质Material为例，创建后的属性如下图所示：

主要属性有：

• sphere: 材质的预览效果，可选择box、sphere、capsule等进行预览
• Light: 指的是是否启用光照效果
• Effect: 指的是材质当前使用的着色器，可通过下拉框进行选择
• Technique: 指的是材质使用着色器中的哪种技术
• Pass… 指的是Effect中Technique所包含的Pass流程，每种Technique可以包含多个Pass
• USE INSTANCING 指的是Effect中宏定义的开关

针对于Technique、Pass和宏定义这三个参数，是在Effect中使用 YAML语言配置的参数属性。

EffectAsset的构建

着色器资源的创建，编译器同样支持两种：

一、传统无光照着色器： Effect，同文字描述所言，没有光照效果的实现。

二、表面着色器：Surface Effect， 基于PBR的着色器。

PBR全称：Physically Based Rendering 基于物理的光照模型

CocosCreator 从 v3.0 开始提供了基于物理渲染（PBR）的光照着色器：builtin-standard.effect。

它可根据现实中光线传播原理和能量守恒定律，模拟出近似于真实物理光照的效果，主要用于3D。

这里以构建无光照的着色器为例，创建后的属性如下：

主要属性部分有：

• shaders : 当前的着色器名称相关
• Precompile Combinations 预处理宏定义组合相关，通过on/off的开关来决定是否是否启用
• GLSL 300 ES/100 Output 着色器的输出模式和预览

这里要说明下：

一、宏定义的组合可以更灵活的实现不同着色器效果的实现，并实现复用性。

二、300 ES 和 100 是引擎主要用于适配不同的WebGL版本和硬件支持。

前者基于WebGL 2.0标准，支持更多的图形功能、更复杂着色器功能实现和更高的性能化；而后者主要基于WebGL 1.0标准，功能有限，主要用于向下兼容旧的硬件和浏览器。

三、输出的代码是引擎根据Effect提供的配置参数，解析后生成的。

在实际的编写中，我们只需关注：

• CCEffect属性的配置

• CCProgram着色器片段的编写

写到最后

今天的文章暂且就告一段落，因为贪多嚼不烂。

另外，总结了几个小小的想法或者说是建议，主要有这么几点：

一、Shader的使用，由于游戏引擎的封装的便利性，很可能导致我们认为这是一门很遥远的技术，不是不用，而是没有关注过。

二、请不要过于的追求极致性，还有真正的了解，便开始了各种底层的学习，先模仿再创造，先完成再完美。

三、CocosShader效果的实现需要借助Material来，我们通过代码实现Effect效果也是通过获取材质来设置属性。

四、Effect的实现主要两部分： 一是通过CCEffect配置属性 二是通过CCProgram编写着色器片段。

理解可能有误，但依然希望能够帮助到您，感谢!