cocos2d-x3.2中用shader使图片背景透明

概述    今天有人问我问题，说怎么实现背景虚化，换句话说，就是把某张图片的背景颜色（比如白色）给弄没了，不然贴在屏幕上有白色背景。下面是解决方法。用shader处理了像素，使黑色背景透明。 Shader.h #ifndef __TestShader__ShaderSprite__#define __TestShader__ShaderSprite__#include "cocos2d.h"U

今天有人问我问题，说怎么实现背景虚化，换句话说，就是把某张图片的背景颜色（比如白色）给弄没了，不然贴在屏幕上有白色背景。下面是解决方法。用shader处理了像素，使黑色背景透明。

Shader.h

#ifndef __TestShader__ShaderSprite__#define __TestShader__ShaderSprite__#include "cocos2d.h"USING_NS_CC;class ShaderSprite : public CCSprite {    public:    static ShaderSprite* create(const char* pszfilename);    virtual bool initWithTexture(CCTexture2D *pTexture,const CCRect& rect);    virtual voID draw(voID);};#endif /* defined(__TestShader__ShaderSprite__) */

Shader.cpp

#include "ShaderSprite.h"static CC_DLL const GLchar *transparentshader =#include "tansparentshader.h"ShaderSprite* ShaderSprite::create(const char *pszfilename){    ShaderSprite *pRet = new ShaderSprite();    if (pRet && pRet->initWithfile(pszfilename)) {        pRet->autorelease();        return pRet;    }    else    {        delete pRet;        pRet = NulL;        return NulL;    }}bool ShaderSprite::initWithTexture(CCTexture2D *pTexture,const CCRect& rect){    do{//        cclog("overrIDe initWithTexture!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");        CC_BREAK_IF(!CCSprite::initWithTexture(pTexture,rect));                // 加载顶点着色器和片元着色器        m_pShaderProgram = new  CCGLProgram();        m_pShaderProgram ->initWithVertexShaderByteArray(ccpositionTextureA8color_vert,transparentshader);                CHECK_GL_ERROR_DEBUG();                // 启用顶点着色器的attribute变量，坐标、纹理坐标、颜色        m_pShaderProgram->addAttribute(kCCAttributenameposition,kCCVertexAttrib_position);        m_pShaderProgram->addAttribute(kCCAttributenamecolor,kCCVertexAttrib_color);        m_pShaderProgram->addAttribute(kCCAttributenameTexCoord,kCCVertexAttrib_TexCoords);                CHECK_GL_ERROR_DEBUG();                // 自定义着色器链接        m_pShaderProgram->link();                CHECK_GL_ERROR_DEBUG();                // 设置移动、缩放、旋转矩阵        m_pShaderProgram->updateUniforms();                CHECK_GL_ERROR_DEBUG();                return true;            }while(0);    return false;}voID ShaderSprite::draw(voID){//    cclog("overrIDe draw!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");    CC_PROfileR_START_category(kCCProfilercategorySprite,"CCSprite - draw");        CCAssert(!m_pobBatchNode,"If CCSprite is being rendered by CCSpriteBatchNode,CCSprite#draw SHOulD NOT be called");        CC_NODE_DRAW_SETUP();        //	// 启用attributes变量输入，顶点坐标，纹理坐标，颜色	//	ccGLEnabLevertexAttribs( kCCVertexAttribFlag_PoscolorTex );    ccGLBlendFunc(m_sBlendFunc.src,m_sBlendFunc.dst);        m_pShaderProgram->use();    m_pShaderProgram->setUniformsForBuiltins();        // 绑定纹理到纹理槽0    ccGLBindTexture2D(m_pobTexture->getname());    #define kQuadSize sizeof(m_squad.bl)	long offset = (long)&m_squad;    	// vertex	int diff = offsetof( ccV3F_C4B_T2F,vertices);	glVertexAttribPointer(kCCVertexAttrib_position,3,GL_float,GL_FALSE,kQuadSize,(voID*) (offset + diff));    	// texCoods	diff = offsetof( ccV3F_C4B_T2F,texCoords);	glVertexAttribPointer(kCCVertexAttrib_TexCoords,2,(voID*)(offset + diff));    	// color	diff = offsetof( ccV3F_C4B_T2F,colors);	glVertexAttribPointer(kCCVertexAttrib_color,4,GL_UNSIGNED_BYTE,GL_TRUE,(voID*)(offset + diff));        	glDrawArrays(GL_TRIANGLE_STRIP,4);    	CHECK_GL_ERROR_DEBUG();    CC_INCREMENT_GL_DRAWS(1);    CC_PROfileR_Stop_category(kCCProfilercategorySprite,"CCSprite - draw");}

片段着色器代码

tansparentshader.h

#ifdef GL_ES                                            precision lowp float;                                   #endif                                                  varying vec4 v_fragmentcolor;                           varying vec2 v_texCoord;                                uniform sampler2D u_texture;                            voID main()                                             {                                                           float ratio=0.0;                                        vec4 texcolor = texture2D(u_texture,v_texCoord);       ratio = texcolor[0] > texcolor[1]?(texcolor[0] > texcolor[2] ? texcolor[0] : texcolor[2]) :(texcolor[1] > texcolor[2]? texcolor[1] : texcolor[2]);                                      \n\if (ratio != 0.0)                                          {                                                              texcolor[0] = texcolor[0] /  ratio;                        texcolor[1] = texcolor[1] /  ratio;                        texcolor[2] = texcolor[2] /  ratio;                        texcolor[3] = ratio;                                   }                                                          else                                                      {                                                              texcolor[3] = 0.0;                                     }                                                          gl_Fragcolor = v_fragmentcolor*texcolor;                   }";

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

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

上图看看吧

改变前：

改变后：

本人cocos2dx 2.x和3.x的源码淘宝地址（欢迎大家光顾）：https://shop141567464.taobao.com/?spm=a313o.7775905.1998679131.d0011.pzUIU4

不懂的可以加我的QQ群： 239982941（cocos2d-x 3.x学习群）欢迎你的到来哦，看了博文给点脚印呗，谢谢啦~~

总结

以上是内存溢出为你收集整理的cocos2d-x3.2中用shader使图片背景透明全部内容，希望文章能够帮你解决cocos2d-x3.2中用shader使图片背景透明所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。