cocos2dx 2.1.4 shader解析3 - cocos2dx自带的shader分析

原文：http://www.jb51.cc/article/p-sndeoaoh-bdu.html

CCShaderCache 类似 textureCache，spriteFrameCache ，AnimationCache，主要功能是对ShaderProgram进行记录，保留一份索引，供其他模块调用获取需要的shaderProgram，不过CCShaderCache在初始化的时候会创建几个cocos2dx内部使用的shader：

[c++] view plain copy print ?

2. voidCCShaderCache::loadDefaultShader(CCGLProgram*p,inttype)
3. {
4. switch(type){
5. casekCCShaderType_PositionTextureColor:
6. p->initWithVertexShaderByteArray(ccPositionTextureColor_vert,ccPositionTextureColor_frag);
8. p->addAttribute(kCCAttributeNamePosition,kCCVertexAttrib_Position);
9. p->addAttribute(kCCAttributeNameColor,kCCVertexAttrib_Color);
10. p->addAttribute(kCCAttributeNameTexCoord,kCCVertexAttrib_TexCoords);
11. break;
12. casekCCShaderType_PositionTextureColorAlphaTest:
13. casekCCShaderType_PositionColor:
14. p->initWithVertexShaderByteArray(ccPositionColor_vert,ccPositionColor_frag);
16. break;
17. casekCCShaderType_PositionTexture:
18. p->initWithVertexShaderByteArray(ccPositionTexture_vert,ccPositionTexture_frag);
19. p->addAttribute(kCCAttributeNamePosition,kCCVertexAttrib_Position);
20. casekCCShaderType_PositionTexture_uColor:
21. p->initWithVertexShaderByteArray(ccPositionTexture_uColor_vert,ccPositionTexture_uColor_frag);
22. p->addAttribute(kCCAttributeNameTexCoord,kCCVertexAttrib_TexCoords);
23. casekCCShaderType_PositionTextureA8Color:
24. p->initWithVertexShaderByteArray(ccPositionTextureA8Color_vert,ccPositionTextureA8Color_frag);
25. p->addAttribute(kCCAttributeNameColor,kCCVertexAttrib_Color);
26. casekCCShaderType_Position_uColor:
27. p->initWithVertexShaderByteArray(ccPosition_uColor_vert,ccPosition_uColor_frag);
28. p->addAttribute("aVertex",kCCVertexAttrib_Position);
29. casekCCShaderType_PositionLengthTexureColor:
30. p->initWithVertexShaderByteArray(ccPositionColorLengthTexture_vert,ccPositionColorLengthTexture_frag);
31. default:
32. CCLOG("cocos2d:%s:%d,errorshadertype",__FUNCTION__,__LINE__);
33. return;
34. }
35. p->link();
36. p->updateUniforms();
37. CHECK_GL_ERROR_DEBUG();
38. }

内部创建的shaderProgram一共有 8 种：

enum {
kCCShaderType_PositionTextureColor,
kCCShaderType_PositionTextureColorAlphaTest,
kCCShaderType_PositionColor,
kCCShaderType_PositionTexture,
kCCShaderType_PositionTexture_uColor,
kCCShaderType_PositionTextureA8Color,
kCCShaderType_Position_uColor,
kCCShaderType_PositionLengthTexureColor,

kCCShaderType_MAX,
};

当链接生成顶点与像素渲染器代码时，2dx会默认添加如下代码：

"uniform mat4 CC_PMatrix;\n"
"uniform mat4 CC_MVMatrix;\n"
"uniform mat4 CC_MVPMatrix;\n"
"uniform vec4 CC_Time;\n"
"uniform vec4 CC_SinTime;\n"
"uniform vec4 CC_CosTime;\n"
"uniform vec4 CC_Random01;\n"

下面对这8中shader进行简单分析

1.kCCShaderType_PositionTextureColor

vertex shader 源代码：

//传入顶点流的每一个顶点对应的3个属性
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;

#ifdef GL_ES
varying lowp vec4 v_fragmentColor; //一个颜色值的插值变量，在像素渲染器中对应的v_fragmentColor是由其对应三角形的3个v_fragmentColor插值而来
varying mediump vec2 v_texCoord; //纹理坐标插值变量
#else
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
#endif

void main()
{
gl_Position = CC_MVPMatrix * a_position; //根据顶点的坐标经过model view projection transform 输出结果坐标位置
v_fragmentColor = a_color;//直接输出顶点颜色属性的值
v_texCoord = a_texCoord;//直接输出顶点纹理坐标值
}

fragment shader源代码：

#ifdef GL_ES
precision lowp float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
uniform sampler2D CC_Texture0;//2d纹理采样器

void main()
{
gl_FragColor = v_fragmentColor * texture2D(CC_Texture0,v_texCoord);//直接由顶点颜色值与采样后的纹理颜色相乘输出结果的颜色
}

2.kCCShaderType_PositionTextureColorAlphaTest

顶点渲染器跟kCCShaderType_PositionTextureColor一致

像素渲染器：

#ifdef GL_ES
precision lowp float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
uniform sampler2D CC_Texture0;
uniform float CC_alpha_value;

//像素渲染器使用了alpha测试使用cocos自带的采样器进行纹理采样，

并且测试采样的纹理的alpha值如果小于设置的alpha参考值则丢弃渲染该像素
void main()
{
vec4 texColor = texture2D(CC_Texture0,v_texCoord);

// mimic: glAlphaFunc(GL_GREATER)
// pass if ( incoming_pixel >= CC_alpha_value ) => fail if incoming_pixel < CC_alpha_value

if ( texColor.a <= CC_alpha_value )
discard;

gl_FragColor = texColor * v_fragmentColor;
}

3.kCCShaderType_PositionColor

与kCCShaderType_PositionTextureColor相比顶点渲染器与像素渲染器都少了对纹理坐标的处理以及纹理的采样，只输出颜色值

4.kCCShaderType_PositionTexture

与kCCShaderType_PositionTextureColor相比顶点渲染器与像素渲染器都忽略顶点的颜色属性，只输出纹理颜色值。

5.kCCShaderType_PositionTexture_uColor

顶点渲染器与kCCShaderType_PositionTexture相同

像素渲染器：

uniform vec4 u_color;

varying vec2 v_texCoord;

uniform sampler2D CC_Texture0;

void main()
{
gl_FragColor = texture2D(CC_Texture0,v_texCoord) * u_color;
}

根据cocos2dx自带的纹理采样器采样纹理并将结果与它管理的 uniform u_color变量相乘输出结果

6.kCCShaderType_PositionTextureA8Color

顶点渲染器与kCCShaderType_PositionTextureColor相同

输出的颜色只依赖纹理中的alpha值

像素渲染器：

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
uniform sampler2D CC_Texture0;

void main()
{
gl_FragColor = vec4( v_fragmentColor.rgb,
v_fragmentColor.a * texture2D(CC_Texture0,v_texCoord).a
);
}

7.kCCShaderType_Position_uColor

(猜测此渲染器用于例子系统)

顶点渲染器：

//只用到了顶点坐标属性

attribute vec4 a_position;

uniform vec4 u_color;
uniform float u_pointSize;

#ifdef GL_ES
varying lowp vec4 v_fragmentColor;
#else
varying vec4 v_fragmentColor;
#endif

void main()
{
gl_Position = CC_MVPMatrix * a_position;
gl_PointSize = u_pointSize;
v_fragmentColor = u_color;
}

像素渲染器

varying vec4 v_fragmentColor;

void main()
{
gl_FragColor = v_fragmentColor;
}

8.kCCShaderType_PositionLengthTexureColor

顶点渲染器：

#ifdef GL_ES
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;

#else
attribute vec4 a_position;
attribute vec2 a_texcoord;
attribute vec4 a_color;

varying vec4 v_color;
varying vec2 v_texcoord;
#endif

void main()
{

//顶点颜色值根据alpha值再进行一次消减
v_color = vec4(a_color.rgb * a_color.a,a_color.a);

v_texcoord = a_texcoord;

gl_Position = CC_MVPMatrix * a_position;
}

像素渲染器：

#ifdef GL_ES
// #extension GL_OES_standard_derivatives : enable

varying mediump vec4 v_color;
varying mediump vec2 v_texcoord;
#else
varying vec4 v_color;
varying vec2 v_texcoord;
#endif

void main()
{

用到的glsl内部函数解释：

genType step (genType edge,genType x)，genType step (float edge,genType x)

如果x < edge，返回0.0，否则返回1.0

genType smoothstep (genType edge0,genType edge1,genType x)，genType smoothstep (float edge0,float edge1,genType x)

如果x <= edge0，返回0.0 ；如果x >= edge1 返回1.0；如果edge0 < x < edge1，则执行0~1之间的平滑埃尔米特差值。

如果edge0 >= edge1，结果是未定义的。

// #if defined GL_OES_standard_derivatives \n\
// gl_FragColor = v_color*smoothstep(0.0,length(fwidth(v_texcoord)),1.0 - length(v_texcoord)); \n\
// #else \n\
gl_FragColor = v_color*step(0.0,1.0 - length(v_texcoord)); \n\
// #endif
}

OK解析完毕