快速记录一下cocos2dx 3.x 全屏幕 blur 效果实现相关代码

1. render texture 相关lua代码:

function TestButtonMediator:getBlurRenderTexture()
    -- body
    logTimeBegin("getBlurRenderTexture")

    local size = cc.Director:getInstance():getWinSize()
    local rendTexture = cc.RenderTexture:create(size.width, size.height,3,35056) -- #define GL_DEPTH24_STENCIL8 0x88F0 (35056)
    rendTexture:setAnchorPoint(cc.p(0,0))
    rendTexture:setPosition(size.width/2,size.height/2)
    rendTexture:begin()
    CCDirector:sharedDirector():getRunningScene():visit();
    rendTexture:endToLua(false)

    local spr =BlurShader:create(rendTexture:getSprite())
    spr:setBlurRadius(3)
    spr:setSampleNum(3)
    spr:getTexture():setAntiAliasTexParameters()
    -- local colorView = ccui.Layout:create();
    -- colorView:setContentSize(size)
    -- colorView:setBackGroundColor(cc.c3b(0, 0, 0))
    -- colorView:setBackGroundColorType(1)
    -- colorView:setBackGroundColorOpacity(250)
    -- colorView:setAnchorPoint(cc.p(0,0))
    -- colorView:setPosition(0,0)
    -- rendTexture:addChild(colorView)
    logTimeEnd("getBlurRenderTexture")
    return rendTexture,spr

end

把 render texture 加到 node 上

    local rendTexture,spr = self:getBlurRenderTexture()
    self:getView():addChild(rendTexture)

vs ccShader_PositionTextureColor_noMVP.vert

attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;

#ifdef GL_ES
varying lowp vec4 v_fragmentColor;
varying mediump vec2 v_texCoord;
#else
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
#endif

void main()
{
    gl_Position = CC_PMatrix * a_position;
    v_fragmentColor = a_color;
    v_texCoord = a_texCoord;
}

fs: example_Blur.fsh

#ifdef GL_ES
precision mediump float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;

uniform float blurRadius;
uniform float sampleNum;
uniform float test;
uniform vec2 resolution;

vec4 blur(vec2);

void main(void)
{
    vec4 col = blur(v_texCoord); //* v_fragmentColor.rgb;
    gl_FragColor = vec4(col) * v_fragmentColor;
}

vec4 blur(vec2 p)
{
    //sampleNum = 2.0;
    //blurRadius = 3.5;
    if (blurRadius > 0.0 && sampleNum > 1.0)
    {
        vec4 col = vec4(0);
        vec4 colaphale = vec4(0);
        vec2 unit = 1.0 / resolution.xy;
        
        float r = blurRadius;
        float sampleStep = r / sampleNum;
        
        float count = 0.0;
        
        for(float x = -r; x < r; x += sampleStep)
        {
            for(float y = -r; y < r; y += sampleStep)
            {
                float weight = (r - abs(x)) * (r - abs(y));
                col += texture2D(CC_Texture0, p + vec2(x * unit.x, y * unit.y)) * weight;
                count += weight;
                #ifdef  USE_ETC
                    colaphale += texture2D(CC_Texture1, p + vec2(x * unit.x, y * unit.y)) * weight;
                #endif
            }
        }
        #ifdef  USE_ETC
            col.a = colaphale.r;
        #endif
        return col / count;
    }
    vec4 texColor = texture2D(CC_Texture0, p);
    #ifdef  USE_ETC
        texColor = FormatEtc(texColor);
    #endif
    return texColor;
}

3. shader lua 交互相关代码

BlurShader = {}
function BlurShader:create(sprite)
    local shader = SpriteShader:create("BlurShader",sprite:isEtc())
    shaderState = sprite:setLuaGLProgram(shader)

    sprite.setResolution = function (self,width,height)
        shaderState:setUniformVec2("resolution", cc.p(width,height))
    end

    sprite.setBlurRadius = function (self,radius)
        shaderState:setUniformFloat("blurRadius", radius)
    end

    sprite.setSampleNum = function (self,sampleNum)
        shaderState:setUniformFloat("sampleNum",sampleNum)
    end
    self:setDefaultValue(sprite)
    return sprite
end