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

简介: <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:Arial; font-size:13.63636302947998px; line-height:26px"> <span style="font-size:18px">这里用shader处理了像素,

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

ShaderSprite.h

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

ShaderSprite.cpp

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

片段着色器代码

tansparentshader.h

  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,这里是为了做渐变,否则变化太生硬。

上图:

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

相关文章
|
图形学
unity3d UI特效处理,image置灰shader
新建材质,材质指定该shader,然后将材质球拖拽到image上面,效果就显示出来了 图片.png Shader "UI/ImageGreyShader" { Properties { [PerRendere...
3295 0
|
6月前
|
图形学
【实现100个unity特效之2】使用shader和shader Graph实现2d图片描边效果(附源码)
【实现100个unity特效之2】使用shader和shader Graph实现2d图片描边效果(附源码)
296 0
|
7月前
|
图形学
【Unity Shader 中SubShader相关介绍】
【Unity Shader 中SubShader相关介绍】
|
7月前
|
缓存 图形学 异构计算
【#Unity Shader#Amplify Shader Editor(ASE)_第二篇】
【#Unity Shader#Amplify Shader Editor(ASE)_第二篇】
|
7月前
|
前端开发 图形学
【#Unity Shader#Amplify Shader Editor(ASE)_第一篇】
【#Unity Shader#Amplify Shader Editor(ASE)_第一篇】
cocos creator shader 入门教程3:实现一个左右不同颜色的shader
cocos creator shader 入门教程3:实现一个左右不同颜色的shader
683 0
Flutter实现圆形图片+描边
Flutter实现圆形图片+描边
179 0
|
图形学
Unity Shader Graph 制作 Fade 淡入淡出效果
Unity Shader Graph 制作 Fade 淡入淡出效果
658 1
Unity Shader Graph 制作 Fade 淡入淡出效果
实现圆形进度条(Unity3D)
今天分享一个制作圆形进度条的方法,原教程比较繁琐,这里给精简一下,更适合于新手
|
算法 图形学
【Unity3D Shader】学习笔记-图片滤镜①
效果和上面的比较相似,Photoshop CS图像黑白调整功能的计算公式为: gray= (max - mid) * ratio_max + (mid - min) * ratio_max_mid + min 公式中:gray为像素灰度值,max、mid和min分别为图像像素R、G、B分量颜色的最大值、中间值和最小值,ratio_max为max所代表的分量颜色(单色)比率,ratio_max_mid则为max与mid两种分量颜色所形成的复色比率。 默认的单色及复色比率为:
948 0
【Unity3D Shader】学习笔记-图片滤镜①