上一篇我们介绍了cocos2d-x绘制基本图形的基本流程，我们还留下了一个着色器的部分没有讲，本篇内容将从openGL的渲染流程讲起，介绍cocos2d-x中的着色器，openGL的渲染流程如图所示：

openGL的绘制通常就是将顶点数据传输到openGL服务端。我们可以将一个顶点视为一个需要统一处理的数据包，这个包中的数据可以是我们需要的任何数据，通常其中几乎始终会包含位置数据。其他数据可能用来决定一个像素的最终颜色。

顶点着色器：一个复杂的应用程序可能包含许多个顶点着色器，但是在同一时刻只能有一个顶点着色器起作用，它用来进行顶点的变换，可能会非常简单，简单到传递着色器，也可能包含大量的计算。

几何着色器：对几何图元做处理，可以创建新的图元，这个阶段是可选的

细分着色器：顶点着色器存在一些限制，一个就是它们在执行的过程中无法创建额外的几何图形，它们仅仅更新与它们当前所处理的顶点相关数据，无法访问当前图元中其他顶点数据，它包含细分控制着色器和细分计算着色器。

像素着色器（片元着色器）：通过编程控制在屏幕上显示颜色的阶段，在这个阶段中，我们使用着色器来计算片元的最终颜色和它的深度值。片元着色器非常强大，在这里我们会使用纹理映射的方式，对顶点处理阶段进行补充。可能还会丢弃不需要处理的片元

简而言之，顶点着色器决定一个图元应该位于屏幕什么位置，而片元着色器使用这些信息来决定摸个片元的颜色是什么。这两个着色器是必选的。另外因为顶点着色器阶段处理的顶点比较少，而在像素着色阶段处理的像素会很多，所以有时会在顶点阶段处理颜色和光照，其余的像素进行插值处理，为了节约效率，当然效果要差些了。

下面来看cocos2d-x的着色器流程，回到上一篇讲的DrawNode的init函数中

    //设置着色器
    setGLProgramState(GLProgramState::getOrCreateWithGLProgramName(GLProgram::SHADER_NAME_POSITION_LENGTH_TEXTURE_COLOR));

void Node::setGLProgramState(cocos2d::GLProgramState* glProgramState)
{
    if (glProgramState != _glProgramState)
    {
        CC_SAFE_RELEASE(_glProgramState);
        _glProgramState = glProgramState;
        CC_SAFE_RETAIN(_glProgramState);

        if (_glProgramState)
            _glProgramState->setNodeBinding(this);
    }
}

auto glProgram = getGLProgram();
glProgram->use();
glProgram->setUniformsForBuiltins(transform);

GLProgram * Node::getGLProgram() const
{
    return _glProgramState ? _glProgramState->getGLProgram() : nullptr;
}

auto glProgram = GLProgramCache::getInstance()->getGLProgram(GLProgram::SHADER_NAME_POSITION_LENGTH_TEXTURE_COLOR);
glProgram->use();
glProgram->setUniformsForBuiltins(transform);

const char* ccPositionColorLengthTexture_vert = STRINGIFY(

\n#ifdef GL_ES\n
attribute mediump vec4 a_position;
attribute mediump vec2 a_texcoord;
attribute mediump vec4 a_color;

varying mediump vec4 v_color;
varying mediump vec2 v_texcoord;

\n#else\n

attribute vec4 a_position;
attribute vec2 a_texcoord;
attribute vec4 a_color;

varying vec4 v_color;
varying vec2 v_texcoord;

\n#endif\n

void main()
{
    v_color = vec4(a_color.rgb * a_color.a,a_color.a);
    v_texcoord = a_texcoord;

    gl_Position = CC_MVPMatrix * a_position;
}
);