Cocos2dx--使用Shader

Cocos2dx的Shader架构

Cocos2dx的Shader由GLProgram、GLProgramState、GLProgramCache、GLProgramStateCache组成。
GLProgram是Cocos2dx对Program的封装，一般提供一些静态方法，被多个节点复用。而GLProgramState是对GLProgram的封装，提供更加便捷的操作接口，内部记录了Uniform和Attribute，可以看作一个动态的对象。GLProgram和GLProgramState可以对比理解类和对象的区别。
它们分别对应的xxCache类顾名思义用来做缓冲的，如Cocos2dx中所有内置Shader的名字，就在GLProgramCache的loadDefaultGLProgram()方法中，将所有内置的Shader都创建了出来并缓存。

Cocos2dx内置Shader规则

下面我们先来分析下源码，看看Cocos2dx对Shader是怎么封装的，它与一般OpenGL编写的Shader脚本不同。
首先是GLProgram的compileShader()方法中，编译Shader前使用了precision关键字来设定数值的精度。总共有低精度lowp、中精度mediump、高精度highp可以选择，可以为浮点数或整数指定精度，精度越高效果越好，但消耗也越大。另外，顶点着色器支持的精度要比片段着色器高，片段着色器的highp精度的支持对于显卡而言，是可选的。
然后，它还会在Shader脚本前定义一系列Uniform变量。这些都是Cocos2dx内置的Uniform，在Shader中可以直接使用。下面是源码剪切：

bool GLProgram::compileShader(GLuint* shader, GLenum type, const GLchar* source, const std::string& convertedDefines)
{GLint status;if (!source){return false;}const GLchar *sources[] = {
#if CC_TARGET_PLATFORM == CC_PLATFORM_WINRT(type == GL_VERTEX_SHADER ? "precision mediump float;\n precision mediump int;\n" : "precision mediump float;\n precision mediump int;\n"),
#elif (CC_TARGET_PLATFORM != CC_PLATFORM_WIN32 && CC_TARGET_PLATFORM != CC_PLATFORM_LINUX && CC_TARGET_PLATFORM != CC_PLATFORM_MAC)(type == GL_VERTEX_SHADER ? "precision highp float;\n precision highp int;\n" : "precision mediump float;\n precision mediump int;\n"),
#endifCOCOS2D_SHADER_UNIFORMS,convertedDefines.c_str(),source};*shader = glCreateShader(type);glShaderSource(*shader, sizeof(sources)/sizeof(*sources), sources, nullptr);glCompileShader(*shader);glGetShaderiv(*shader, GL_COMPILE_STATUS, &status);if (! status){GLsizei length;glGetShaderiv(*shader, GL_SHADER_SOURCE_LENGTH, &length);GLchar* src = (GLchar *)malloc(sizeof(GLchar) * length);glGetShaderSource(*shader, length, nullptr, src);CCLOG("cocos2d: ERROR: Failed to compile shader:\n%s", src);if (type == GL_VERTEX_SHADER){CCLOG("cocos2d: %s", getVertexShaderLog().c_str());}else{CCLOG("cocos2d: %s", getFragmentShaderLog().c_str());}free(src);return false;}return (status == GL_TRUE);
}

static const char * COCOS2D_SHADER_UNIFORMS ="uniform mat4 CC_PMatrix;\n""uniform mat4 CC_MVMatrix;\n""uniform mat4 CC_MVPMatrix;\n""uniform mat3 CC_NormalMatrix;\n""uniform vec4 CC_Time;\n""uniform vec4 CC_SinTime;\n""uniform vec4 CC_CosTime;\n""uniform vec4 CC_Random01;\n""uniform sampler2D CC_Texture0;\n""uniform sampler2D CC_Texture1;\n""uniform sampler2D CC_Texture2;\n""uniform sampler2D CC_Texture3;\n""//CC INCLUDES END\n\n";

在初始化GLProgram时，Cocos2dx会自动根据Shader是否使用了相应的Uniform变量来初始化_flags成员变量相对应的属性。在编译Shader时，GLSL的编译器会自动将没有使用到的Uniform移除(用glGetUniformLocation()方法判断，返回-1就是没有使用)。

void GLProgram::updateUniforms()
{_builtInUniforms[UNIFORM_AMBIENT_COLOR] = glGetUniformLocation(_program, UNIFORM_NAME_AMBIENT_COLOR);_builtInUniforms[UNIFORM_P_MATRIX] = glGetUniformLocation(_program, UNIFORM_NAME_P_MATRIX);_builtInUniforms[UNIFORM_MV_MATRIX] = glGetUniformLocation(_program, UNIFORM_NAME_MV_MATRIX);_builtInUniforms[UNIFORM_MVP_MATRIX] = glGetUniformLocation(_program, UNIFORM_NAME_MVP_MATRIX);_builtInUniforms[UNIFORM_NORMAL_MATRIX] = glGetUniformLocation(_program, UNIFORM_NAME_NORMAL_MATRIX);_builtInUniforms[UNIFORM_TIME] = glGetUniformLocation(_program, UNIFORM_NAME_TIME);_builtInUniforms[UNIFORM_SIN_TIME] = glGetUniformLocation(_program, UNIFORM_NAME_SIN_TIME);_builtInUniforms[UNIFORM_COS_TIME] = glGetUniformLocation(_program, UNIFORM_NAME_COS_TIME);_builtInUniforms[UNIFORM_RANDOM01] = glGetUniformLocation(_program, UNIFORM_NAME_RANDOM01);_builtInUniforms[UNIFORM_SAMPLER0] = glGetUniformLocation(_program, UNIFORM_NAME_SAMPLER0);_builtInUniforms[UNIFORM_SAMPLER1] = glGetUniformLocation(_program, UNIFORM_NAME_SAMPLER1);_builtInUniforms[UNIFORM_SAMPLER2] = glGetUniformLocation(_program, UNIFORM_NAME_SAMPLER2);_builtInUniforms[UNIFORM_SAMPLER3] = glGetUniformLocation(_program, UNIFORM_NAME_SAMPLER3);_flags.usesP = _builtInUniforms[UNIFORM_P_MATRIX] != -1;_flags.usesMV = _builtInUniforms[UNIFORM_MV_MATRIX] != -1;_flags.usesMVP = _builtInUniforms[UNIFORM_MVP_MATRIX] != -1;_flags.usesNormal = _builtInUniforms[UNIFORM_NORMAL_MATRIX] != -1;_flags.usesTime = (_builtInUniforms[UNIFORM_TIME] != -1 ||_builtInUniforms[UNIFORM_SIN_TIME] != -1 ||_builtInUniforms[UNIFORM_COS_TIME] != -1);_flags.usesRandom = _builtInUniforms[UNIFORM_RANDOM01] != -1;this->use();// Since sample most probably won't change, set it to 0,1,2,3 now.if(_builtInUniforms[UNIFORM_SAMPLER0] != -1)setUniformLocationWith1i(_builtInUniforms[UNIFORM_SAMPLER0], 0);if(_builtInUniforms[UNIFORM_SAMPLER1] != -1)setUniformLocationWith1i(_builtInUniforms[UNIFORM_SAMPLER1], 1);if(_builtInUniforms[UNIFORM_SAMPLER2] != -1)setUniformLocationWith1i(_builtInUniforms[UNIFORM_SAMPLER2], 2);if(_builtInUniforms[UNIFORM_SAMPLER3] != -1)setUniformLocationWith1i(_builtInUniforms[UNIFORM_SAMPLER3], 3);
}

上面我们分析了Cocos2dx的Shader会内置很多Uniform变量，也知道了这些Uniform变量是否使用了。那么下一个问题，如果使用了，这些Uniform是什么时候被设置的呢？它们的值又是多少呢？
如果是纹理Uniform，在一开始就会被设置为固定的值，上面源码中也可以看到，同时可以使用4个纹理，在渲染的时候，Cocos2dx会将纹理绑定到指定的纹理采样器中，我们在Shader脚本中可以访问这些采样器，而采样器对应的纹理，由Cocos2dx调用OpenGL的glBindTexture()等方法绑定，因此这个Uniform的值不需要我们设置。
而其它的如矩阵、时间、法线、随机数等Uniform，是在运行的时候动态设置的，这些属性是实时变化的，在程序运行时，Cocos2dx会每帧调用setUniformsForBuiltins()自动设置它们。

void GLProgram::setUniformsForBuiltins(const Mat4 &matrixMV)
{const auto& matrixP = _director->getMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION);if (_flags.usesP)setUniformLocationWithMatrix4fv(_builtInUniforms[UNIFORM_P_MATRIX], matrixP.m, 1);if (_flags.usesMV)setUniformLocationWithMatrix4fv(_builtInUniforms[UNIFORM_MV_MATRIX], matrixMV.m, 1);if (_flags.usesMVP){Mat4 matrixMVP = matrixP * matrixMV;setUniformLocationWithMatrix4fv(_builtInUniforms[UNIFORM_MVP_MATRIX], matrixMVP.m, 1);}if (_flags.usesNormal){Mat4 mvInverse = matrixMV;mvInverse.m[12] = mvInverse.m[13] = mvInverse.m[14] = 0.0f;mvInverse.inverse();mvInverse.transpose();GLfloat normalMat[9];normalMat[0] = mvInverse.m[0];normalMat[1] = mvInverse.m[1];normalMat[2] = mvInverse.m[2];normalMat[3] = mvInverse.m[4];normalMat[4] = mvInverse.m[5];normalMat[5] = mvInverse.m[6];normalMat[6] = mvInverse.m[8];normalMat[7] = mvInverse.m[9];normalMat[8] = mvInverse.m[10];setUniformLocationWithMatrix3fv(_builtInUniforms[UNIFORM_NORMAL_MATRIX], normalMat, 1);}if (_flags.usesTime) {// This doesn't give the most accurate global time value.// Cocos2D doesn't store a high precision time value, so this will have to do.// Getting Mach time per frame per shader using time could be extremely expensive.float time = _director->getTotalFrames() * _director->getAnimationInterval();setUniformLocationWith4f(_builtInUniforms[GLProgram::UNIFORM_TIME], time/10.0, time, time*2, time*4);setUniformLocationWith4f(_builtInUniforms[GLProgram::UNIFORM_SIN_TIME], time/8.0, time/4.0, time/2.0, sinf(time));setUniformLocationWith4f(_builtInUniforms[GLProgram::UNIFORM_COS_TIME], time/8.0, time/4.0, time/2.0, cosf(time));}if (_flags.usesRandom)setUniformLocationWith4f(_builtInUniforms[GLProgram::UNIFORM_RANDOM01], CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1(), CCRANDOM_0_1());
}

当然，除了以上内置的Uniform外，Cocos2dx还内置了一些Attribute，但这些变量是需要在Shader脚本中手动输入的，主要是颜色、坐标、纹理坐标、法线等常用属性。它们被定义在CCGLProgram.cpp中，在Renderer进行渲染时，会调用glVertexAttribPointer()设置它们。

// Attribute names
const char* GLProgram::ATTRIBUTE_NAME_COLOR = "a_color";
const char* GLProgram::ATTRIBUTE_NAME_POSITION = "a_position";
const char* GLProgram::ATTRIBUTE_NAME_TEX_COORD = "a_texCoord";
const char* GLProgram::ATTRIBUTE_NAME_TEX_COORD1 = "a_texCoord1";
const char* GLProgram::ATTRIBUTE_NAME_TEX_COORD2 = "a_texCoord2";
const char* GLProgram::ATTRIBUTE_NAME_TEX_COORD3 = "a_texCoord3";
const char* GLProgram::ATTRIBUTE_NAME_NORMAL = "a_normal";
const char* GLProgram::ATTRIBUTE_NAME_BLEND_WEIGHT = "a_blendWeight";
const char* GLProgram::ATTRIBUTE_NAME_BLEND_INDEX = "a_blendIndex";
const char* GLProgram::ATTRIBUTE_NAME_TANGENT = "a_tangent";
const char* GLProgram::ATTRIBUTE_NAME_BINORMAL = "a_binormal";

整个Cocos2dx的Shader不同的规则大体就是这样了，主要是内置了一系列的变量，由引擎自动设置值，我们可以在自己Shader中直接使用。

Cocos2dx中使用Shader示例

我们就编写一个常用的灰化Shader来演示下Cocos2dx中使用Shader的流程。

灰化原理：灰白图片的特征就是每个像素的RGB三个分量的值均相等，值越高颜色越白，反之颜色越黑。常用的算法有3种，平均值、最大值和加权平均值。

首先，我们得分别编写顶点Shader和片段Shader：

//顶点Shader
attribute vec4 a_position;   //位置(内置)
attribute vec2 a_texCoord;   //纹理坐标(内置)
varying vec2 v_texCoord;     //自定义易变变量(写入值)
void main()
{gl_Position = CC_PMatrix * a_position;v_texCoord = a_texCoord;
}

//片段着色器
//使用加权平均值算RGB分量，即给每个分量指定一个比例，指定比例没有写死，通过一个Uniform变量来设置
varying vec2 v_texCoord;    //接收顶点着色器传递的值(接收值)
uniform vec4 u_grayParam;   //指定rgb颜色分量的比例
void main()
{vec4 texColor = texture2D(CC_Texture0, v_texCoord);texColor.rgb = texColor.r * u_grayParam.r + texColor.g * u_grayParam.g + texColor.b * u_grayParam.b;gl_FragColor = texColor;
}

分别命名为gray.vert和gray.frag保存到磁盘。
好，脚本写完了，下面来看看怎么使用：

#include "renderer/CCGLProgramStateCache.h"
//置灰接口
void grayNode(Node* node)
{//对应xxCache的运用，先成缓存中找，不需要每次都重新创建GLProgram* program = GLProgramCache::getInstance()->getGLProgram("MyGrayShader");if(nullptr == program){//本地磁盘加载shader创建program,还一种字符串的形式效率要高createWithByteArrays()program = GLProgram::createWithFilenames("gray.vert", "gray.frag");//将GLProgram对象缓存到Cache中GLProgramCache::getInstance()->addGLProgram(program, "MyGrayShader");}//通过program创建programState,用它来设置上面自定义的Uniform变量的值GLProgramState* programState = GLProgramState::getOrCreateWithGLProgram(program);programState->setUniformVec4("u_grayParam", Vec4(0.2f,0.3f,0.5f,1.0f));//调用node节点的setGLProgramState，以后此节点渲染就会使用这个Shader了node->setGLProgramState(programState);
}

//使用
auto sprite = Sprite::create(xx.png);
grayNode(sprite);

至此，Cocos2dx中使用Shader流程就讲完了～
最后说下，怎么把置灰的图片再还原回去呢？OpenGL是个状态机的运行机制，所以只需要把设置的Shader还原回去重新设置就行了。这里Sprite对象默认的Shader是GLProgram::SHADER_NAME_POSITION_TEXTRUE_COLOR_NO_MVP，可以通过GLProgramState::getOrCreateWithGLProgramName()传入上面字符串常量来获取它的GLProgramState.