cocos2d-x—使用shader使图片背景透明

这里用shader处理了像素，使黑色背景透明，直接上代码

ShaderSprite.h

[cpp] view
plaincopyprint?

1. #ifndef __TestShader__ShaderSprite__
2. #define __TestShader__ShaderSprite__
3. #include "cocos2d.h"
4. USING_NS_CC;
5. class ShaderSprite : public CCSprite {
6. public:
7. static ShaderSprite* create(const char* pszFileName);
8. virtual bool initWithTexture(CCTexture2D *pTexture, const CCRect& rect);
9. virtual void draw(void);
10. };
11. #endif /* defined(__TestShader__ShaderSprite__) */

ShaderSprite.cpp

[cpp] view
plaincopyprint?

1. #include "ShaderSprite.h"
2. static CC_DLL const GLchar *transparentshader =
3. #include "tansparentshader.h"
4. ShaderSprite* ShaderSprite::create(const char *pszFileName)
5. {
6. ShaderSprite *pRet = new ShaderSprite();
7. if (pRet && pRet->initWithFile(pszFileName)) {
8. pRet->autorelease();
9. return pRet;
10. }
11. else
12. {
13. delete pRet;
14. pRet = NULL;
15. return NULL;
16. }
17. }
18. bool ShaderSprite::initWithTexture(CCTexture2D *pTexture, const CCRect& rect)
19. {
20. do{
21. //        CCLog("override initWithTexture!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
22. CC_BREAK_IF(!CCSprite::initWithTexture(pTexture, rect));
23. // 载入顶点着色器和片元着色器
24. m_pShaderProgram = new  CCGLProgram();
25. m_pShaderProgram ->initWithVertexShaderByteArray(ccPositionTextureA8Color_vert, transparentshader);
26. CHECK_GL_ERROR_DEBUG();
27. // 启用顶点着色器的attribute变量，坐标、纹理坐标、颜色
28. m_pShaderProgram->addAttribute(kCCAttributeNamePosition, kCCVertexAttrib_Position);
29. m_pShaderProgram->addAttribute(kCCAttributeNameColor, kCCVertexAttrib_Color);
30. m_pShaderProgram->addAttribute(kCCAttributeNameTexCoord, kCCVertexAttrib_TexCoords);
31. CHECK_GL_ERROR_DEBUG();
32. // 自己定义着色器链接
33. m_pShaderProgram->link();
34. CHECK_GL_ERROR_DEBUG();
35. // 设置移动、缩放、旋转矩阵
36. m_pShaderProgram->updateUniforms();
37. CHECK_GL_ERROR_DEBUG();
38. return true;
39. }while(0);
40. return false;
41. }
42. void ShaderSprite::draw(void)
43. {
44. //    CCLog("override draw!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
45. CC_PROFILER_START_CATEGORY(kCCProfilerCategorySprite, "CCSprite - draw");
46. CCAssert(!m_pobBatchNode, "If CCSprite is being rendered by CCSpriteBatchNode, CCSprite#draw SHOULD NOT be called");
47. CC_NODE_DRAW_SETUP();
48. //
49. // 启用attributes变量输入，顶点坐标，纹理坐标，颜色
50. //
51. ccGLEnableVertexAttribs( kCCVertexAttribFlag_PosColorTex );
52. ccGLBlendFunc(m_sBlendFunc.src, m_sBlendFunc.dst);
53. m_pShaderProgram->use();
54. m_pShaderProgram->setUniformsForBuiltins();
55. // 绑定纹理到纹理槽0
56. ccGLBindTexture2D(m_pobTexture->getName());
57. #define kQuadSize sizeof(m_sQuad.bl)
58. long offset = (long)&m_sQuad;
59. // vertex
60. int diff = offsetof( ccV3F_C4B_T2F, vertices);
61. glVertexAttribPointer(kCCVertexAttrib_Position, 3, GL_FLOAT, GL_FALSE, kQuadSize, (void*) (offset + diff));
62. // texCoods
63. diff = offsetof( ccV3F_C4B_T2F, texCoords);
64. glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, kQuadSize, (void*)(offset + diff));
65. // color
66. diff = offsetof( ccV3F_C4B_T2F, colors);
67. glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_UNSIGNED_BYTE, GL_TRUE, kQuadSize, (void*)(offset + diff));
68. glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
69. CHECK_GL_ERROR_DEBUG();
70. CC_INCREMENT_GL_DRAWS(1);
71. CC_PROFILER_STOP_CATEGORY(kCCProfilerCategorySprite, "CCSprite - draw");
72. }

片段着色器代码

tansparentshader.h

[cpp] view
plaincopyprint?

1. "                                                       \n\
2. #ifdef GL_ES                                            \n\
3. precision lowp float;                                   \n\
4. #endif                                                  \n\
5. varying vec4 v_fragmentColor;                           \n\
6. varying vec2 v_texCoord;                                \n\
7. uniform sampler2D u_texture;                            \n\
8. void main()                                             \n\
9. {                                                       \n\
10. float ratio=0.0;                                    \n\
11. vec4 texColor = texture2D(u_texture, v_texCoord);   \n\
12. ratio = texColor[0] > texColor[1]?(texColor[0] > texColor[2] ? texColor[0] : texColor[2]) :(texColor[1] > texColor[2]? texColor[1] : texColor[2]);                                      \n\
13. if (ratio != 0.0)                                          \n\
14. {                                                          \n\
15. texColor[0] = texColor[0] /  ratio;                    \n\
16. texColor[1] = texColor[1] /  ratio;                    \n\
17. texColor[2] = texColor[2] /  ratio;                    \n\
18. texColor[3] = ratio;                                   \n\
19. }                                                          \n\
20. else                                                       \n\
21. {                                                          \n\
22. texColor[3] = 0.0;                                     \n\
23. }                                                          \n\
24. gl_FragColor = v_fragmentColor*texColor;                   \n\
25. }";

注意shader编程没有隐士数据类型转换，所以都显示为float了。

然后ratio是指在rgb中找最大的，假设ratio为0直接将alpha设为0，否则alpha设为ratio，然后各rgb除以ratio，这里是为了做渐变，否则变化太生硬。

上图：

好了，上面两张图是一样的。仅仅是屏幕背景一个是白色，一个是黑色。图片背景透明了。