今天有人问我问题,说怎么实现背景虚化,换句话说,就是把某张图片的背景颜色(比如白色)给弄没了,不然贴在屏幕上有白色背景。下面是解决方法。用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, GL_FLOAT, GL_FALSE, kQuadSize, (void*)(offset + diff));
// color
diff = offsetof( ccV3F_C4B_T2F, colors);
glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_UNSIGNED_BYTE, GL_TRUE, kQuadSize, (void*)(offset + diff));
glDrawArrays(GL_TRIANGLE_STRIP, 0, 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,这里是为了做渐变,否则变化太生硬。
上图看看吧
改变前:
改变后:
不懂的可以关注我的公众号,里面有你想要的(有问题公众号留言必回答)https://mp.weixin.qq.com/s?__biz=MzIyOTM4MDMxNw==&mid=2247483836&idx=2&sn=1e1d922b5f2511e550da712921992d32&chksm=e842d80edf35511810bc8e383992c2e6a38665e466328200265386ab16fc4601d4822badf546&token=573588601&lang=zh_CN#rd