本文主要介绍cocos2d-x如何使用OpenGL实现着色器程序，介绍可以通过GLSL语言实现的两类着色器：顶点着色器和片段着色器。
使用OpenGL ES 编写Shader文件
OpenGL Shader Language,简称GLSL，它是一种类似于C语言的专门为GPU设计的语言，它可以放在GPU里面被并行运行。
cocos2d-x里Shader包含两个文件：***.vert和***.frag文件。在工程../cocos2d/cocos/renderer/里，包含了一批cocos自带的shader文件。
***.vert文件是作用于每一个顶点。渲染节点中包含多少个顶点，vert文件就执行多少次。
***.frag文件是定义最终显示在屏幕上每个像素点的颜色。
Shader代码可以以.vert和.frag文件的方式存储，也可以直接以字符串的方式存储在代码中。
编写Vertex Shader和Fragment Shader
首先创建一个VertexShader文件，把它命名为VertextShader.vert, 并输入下列代码：
//attribute是协定好的参数，不应该去修改它的命名，否则引擎不能正常渲染。
attribute vec4 a_position; //顶点坐标
attribute vec4 a_color; //顶点颜色
//attribute vec2 a_texCoord； //纹理坐标
//varying输出到片段着色器的参数
varying vec4 v_fragmentColor; //顶点颜色
void main()
{
gl_Position = CC_MVPMatrix * a_position;
v_fragmentColor = a_color;
}
首先，每一个Shader程序都有一个main函数，这一点和c语言是一样的。
这里面有两种类型的变量，一种是attribute，另一种是varying。
attribute是从外部传进来的，每一个顶点都会有这两个属性，所以它也叫做vertex attribute（顶点属性）。
而varying类型的变量是在vertex shader和fragment shader之间传递数据用的。
这里的变量命名规则保持跟c一样就行了，注意gl_开头的变量名是系统内置的变量，所以大家在定义自己的变量名时，请不要以gl_开头。
而CC_MVPMatrix是一个mat4类型的变量，它是在cocos2d-x内部设置进来的。
即：
attribute：外部传入vsh文件的变量 每帧的渲染的可变参数 变化率高 用于定义每个点。
varying：用于 vsh和fsh之间相互传递的参数。
precision mediump float 定义中等精度的浮点数。
uniform 外部传入vsh文件的变量 变化率较低 对于可能在整个渲染过程没有改变 只是个常量。
vertex shader是作用于每一个顶点的，如果vertex有三个点，那么vertex shader会被执行三次。
接下来编写Fragment Shader文件，创建一个命名为FragmentShader.frag的文件, 并输入下列代码：
varying vec4 v_fragmentColor; //由顶点着色器传过来，参数类型必须完全相同
void main()
{
gl_FragColor = v_fragmentColor;
}
fragment shader中也有一个main函数，同时我们看到这里也声明了一个与vertex shader相同的变量。
这个变量是用来在vertex shader和fragment shader之间传递数据用的。所以，它们的参数类型必须完全相同。
而gl_FragColor我们知道它肯定是一个系统内置变量了，它的作用是定义最终画在屏幕上面的像素点的颜色。
最后，添加到cocos2d-x的shader progam的代码：
//精灵
auto splash = Sprite::create("HelloWorld.png");
splash->setPosition(100, 100);
this->addChild(splash, 1);
//vert:顶点着色器 frag:片段着色器
auto glprogram = GLProgram::createWithFilenames("VertextShader.vert", "FragmentShader.frag");
auto glprogramstate = GLProgramState::getOrCreateWithGLProgram(glprogram);
//设置GL状态
splash->setGLProgramState(glprogramstate);
GLProgramState持有GL编程的状态(制服和属性).
一个GL编程可以被上千个节点(Nodes)使用,但如果不同的制服值被使用,各个节点将需要自己的GLProgramState。
GLProgram是通用的，而GLProgramState是每个Node私有的状态.
基本概念：
GLSL的变量的限定符的作用
uniform 表明是外部程序传递给顶点着色器和片段着色器的变量
attribute 表明是只能在顶点着色器使用的变量，用来表示顶点坐标，法线，纹理坐标。
cocos2d-x里通过GL::enableVertexAttribs开启设置
varying 表明是用于顶点着色器和片段着色器之间传递数据之用
数据类型
OpenGL 着色语言规格定义了 22 个基本资料类型，有些用法与 C 相同，其它的是绘图处理器特有的。
void – 用于没有返回值的函式
bool – 条件类型，其值可以是真或假
int – 带负号整数
float – 浮点数
vec2 – 2 个浮点数组成的向量
vec3 – 3 个浮点数组成的向量
vec4 – 4 个浮点数组成的向量
bvec2 – 2 个布林组成的向量
bvec3 – 3 个布林组成的向量
bvec4 – 4 个布林组成的向量
ivec2 – 2 个整数组成的向量
ivec3 – 3 个整数组成的向量
ivec4 – 4 个整数组成的向量
mat2 – 浮点数的 2X2 矩阵
mat3 – 浮点数的 3X3 矩阵
mat4 – 浮点数的 4X4 矩阵
sampler1D – 用来存取一维纹理的句柄（handle）（或：操作，作名词解。）
sampler2D – 用来存取二维纹理的句柄
sampler3D – 用来存取三维纹理的句柄
samplerCube – 用来存取立方映射纹理的句柄
sampler1Dshadow – 用来存取一维深度纹理的句柄
sampler2Dshadow – 用来存取二维深度纹理的句柄
总结：
对于着色器的编程并不是很困难，完全是C的语法。但是debug比较麻烦，对于类型的约束也很严格，必须是相同类型的才能进行算术运算。我们理解了这两个文件之后，就可以发挥我们的想象对纹理图片做出各种的处理。
vsh 负责搞定像素位置 ,填写 gl_Posizion 变量，偶尔搞定一下点大小的问题，填写 gl_PixelSize。
fsh 负责搞定像素外观，填写 gl_FragColor ，偶尔配套填写另外一组变量。
他们都是一个像素运行一次的，也可能运行多次。为了“这一像素”而努力计算。
参考资料：https://zilongshanren.com/blog/2014-06-07-write-your-own-shader.html
Shader基本概念资料：http://www.voidcn.com/blog/bianchengxiaosheng/article/p-5805302.html
GLES语言内建函数资料：http://blog.csdn.net/wangyuchun_799/article/details/7770500
网友评论