用shader使圖片背景透明

轉自：http://blog.csdn.net/dawn_moon/article/details/8631783

好吧，終於抽時間寫這篇文章了。

手頭上有很多人物行走圖，技能特效圖等，但這些圖都有個純黑色背景，怎么樣將內容顯示出來，讓背景透明呢？前段時間搞了一下，感謝群里的童鞋們，提供了思路和方法。

 

這里用shader處理了像素，使黑色背景透明，直接上代碼

ShaderSprite.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__) */

ShaderSprite.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

"                                                       \n\
#ifdef GL_ES                                            \n\
precision lowp float;                                   \n\
#endif                                                  \n\
varying vec4 v_fragmentColor;                           \n\
varying vec2 v_texCoord;                                \n\
uniform sampler2D u_texture;                            \n\
void main()                                             \n\
{                                                       \n\
    float ratio=0.0;                                    \n\
    vec4 texColor = texture2D(u_texture, v_texCoord);   \n\
    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)                                          \n\
{                                                          \n\
    texColor[0] = texColor[0] /  ratio;                    \n\
    texColor[1] = texColor[1] /  ratio;                    \n\
    texColor[2] = texColor[2] /  ratio;                    \n\
    texColor[3] = ratio;                                   \n\
}                                                          \n\
else                                                       \n\
{                                                          \n\
    texColor[3] = 0.0;                                     \n\
}                                                          \n\
gl_FragColor = v_fragmentColor*texColor;                   \n\
}";

注意shader編程沒有隱士數據類型轉換，所以都顯示為float了。

 

然后ratio是指在rgb中找最大的，如果ratio為0直接將alpha設為0，否則alpha設為ratio，然后各rgb除以ratio，這里是為了做漸變，否則變化太生硬。

上圖：

好了，上面兩張圖是一樣的。只是屏幕背景一個是白色，一個是黑色。圖片背景透明了。