灰度shader
最近在學習shader，就把cocos2d-x 3.x版本中的很簡單也很常用的灰度shader拿出來學習一下。
#ifdef GL_ES
precision mediump float; // ES版本的精度限定符，精度變低后可以提高效率
#endif
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
void main(void)
vec4 c = texture2D(CC_Texture0, v_texCoord);
gl_FragColor.xyz = vec3(0.2126*c.r + 0.7152*c.g + 0.0722*c.b);
gl_FragColor.w = c.w;
}
代碼分析
precision mediump float是open es特有的精度限定符，原本的浮點數精度是double，opengl es為了提高渲染效率，限定精度為float類型。
v_fragmentColor是從頂點着色器設置的顏色經過光柵化階段的線性插值后傳給片段着色器的顏色。
v_texCoord同樣是經過線性插值而來的紋理坐標。
下面是頂點着色器的代碼：
const char* ccPositionTextureColor_noMVP_vert = STRINGIFY(
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
\n#ifdef GL_ES\n
varying lowp vec4 v_fragmentColor;
varying mediump vec2 v_texCoord;
\n#else\n
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
\n#endif\n
void main()
{
gl_Position = CC_PMatrix * a_position;
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
}
);
CC_Texture0是一個采樣器，在load shader的時候，引擎會預先把這些uniform變量給加載進來。
下面這部分代碼就是引擎預先加載進來的uniform變量：
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";
這些變量在shader里面如果沒有用到的話，會被引擎給優化掉。
texture2D()是shader的內建方法，作用是從CC_Texture0采樣器中進行紋理采樣，得到當前片段的顏色值。
gl_FragColor是shader的內建變量，表示當前片段的顏色，代碼中是把從采樣器中拿到的顏色值進行一個變灰處理后，最后得到的顏色值再賦值給gl_FragColor。gl_FragColor就是最終的顏色。
這個shader很簡單，就是改變了一下rgb的值。0.2126，0.7152，0.0722這幾個系數據說是根據人眼對rgb這三種基本顏色識別的強弱算出來的。
使用示例
在cocos2dx 3.x版本中sprite變灰的代碼例子：
auto sprite = Sprite::create("HelloWorld.png");
sprite->setGLProgramState(GLProgramState::getOrCreateWithGLProgramName(GLProgram::SHADER_NAME_POSITION_GRAYSCALE));
效果如下圖所示：
