CocosCreator2.x_Shader(一)

一、什么是shader?

shader专业直译名词是：着色器，着色程序，渲染。

它是代替固定渲染管线来实现图像渲染的可编辑程序，可编辑就代表了它的多态性，可以实现各种各样的图像效果而不用受显卡的固定渲染管线限制。

其中Vertex Shader（顶点着色器）主要负责顶点的几何关系等的运算，Pixel Shader（像素着色器）主要负责片源颜色等的计算。

理解上Shader是一段代码，通过编程告诉GPU如何绘制顶点和颜色，从而实现各种各样的图像效果

上下文的理解都参照了《博客园》昵称叫“gamedaybyday”的《CocosCreator Shader笔记》这篇文章，并不是说这篇文章写的有多完整，而是它为我指明了shader入门方向，这非常重要，非常感谢，再次感谢。

二、cocosCreator中的shader基础

在cocoscreator2.x中，每一个cc.Sprite组件和cc.Label组件都有一个默认Materials材质属性

每个材质，都对应一个shader，编辑器有默认的materials目录（存放材质），和effects程序目录（存放shader）

选中一个shader，就可以在属性检查器里预览其代码

既然shader是一段编程，那么就有对应的编程语言，我暂时理解为和C++,java等语言差不多shader语言有3种：

1.基于OpenGL的OpenGL Shading Language，简称GLSL。

2.基于DirectX的High Level Shading Language,简称HLSL。

3. NVIDIA公司的C for Graphic，简称Cg语言。

cocos结合了YAML和GLSL，使用一种单源码嵌入式领域特定语言Cocos Effect；

YAML 是一种标记语言，语法和其他高级语言类似，可以简单表达清单、散列表，标量等数据形态。特别适合用来表达或编辑数据结构、各种配置文件、倾印调试内容、文件大纲（例如：许多电子邮件标题格式和YAML非常接近）。YAML 的配置文件后缀为 .yml，runoob.yml 。

在cocos Effect中，YAML 部分声明流程控制清单, GLSL 部分声明实际的 shader 片段，这两部分内容上相互补充, 共同构成了一个完整的渲染流程描述

关于cocos Effect语法：https://docs.cocos.com/creator3d/manual/zh/material-system/effect-syntax.html

官网其实介绍的很详细，不过这里还是跟着官网介绍记录一下。

shader编辑官方推荐使用VSCode，在vscode中安装Cocos Effect插件，该插件可以高亮effect文件，方便阅读和编辑代码

在解析官方自带的shader内容之前，先得熟悉下声明渲染流程控制清单的YAML语法和片段语言GLSL的语法。

这部分专门在CocosCreator2.x_Shader(二)中介绍

工欲善其事，必先利其器，心急吃不了热豆腐啊，还是得一步一步来...加油