cocos2dx-js Shader的使用(高斯模糊)

可以参考http://blog.csdn.net/afei198409/article/details/50594665了解必须的shader使用知识。
首先.vsh文件(这里有两个,一个test_noMVP.vsh用于本地,一个test.vsh用于浏览器)
test_noMVP.vsh描述如下:
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;
}


test.vsh文件描述如下:
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 * CC_MVMatrix * a_position;
    v_fragmentColor = a_color;
    v_texCoord = a_texCoord;
}


然后是.fsh文件
test.fsh文件描述如下:
#ifdef GL_ES
precision mediump float;
#endif


varying vec4 v_fragmentColor;
varying vec2 v_texCoord;


uniform vec2 blurSize;


void main() {
    vec4 sum = vec4(0.0);
    sum += texture2D(CC_Texture0, v_texCoord - 0.0004 * blurSize) * 0.05;
    sum += texture2D(CC_Texture0, v_texCoord - 0.0003 * blurSize) * 0.09;
    sum += texture2D(CC_Texture0, v_texCoord - 0.0002 * blurSize) * 0.12;
    sum += texture2D(CC_Texture0, v_texCoord - 0.0001 * blurSize) * 0.15;
    sum += texture2D(CC_Texture0, v_texCoord) * 0.16;
    sum += texture2D(CC_Texture0, v_texCoord + 0.0001 * blurSize) * 0.15;
    sum += texture2D(CC_Texture0, v_texCoord + 0.0002 * blurSize) * 0.12;
    sum += texture2D(CC_Texture0, v_texCoord + 0.0003 * blurSize) * 0.09;
    sum += texture2D(CC_Texture0, v_texCoord + 0.0004 * blurSize) * 0.05;


    gl_FragColor = sum * v_fragmentColor;
}


使用如下:
首先创建一个cocos2dx-js的hello world项目,打开app.js进行修改
var HelloWorldLayer = cc.Layer.extend({
    ctor:function () {
        this._super();
        var size = cc.winSize;
        var png = new cc.Sprite("res/HelloWorld.png");
        png.setPosition(size.width * 0.5, size.height * 0.5);
        this.addChild(png, 10);
        this.blurSprite(png);
        return true;
    },
    blurSprite:function(sprite)
    {
        var blurSize = cc.size(40, 40);
        if( 'opengl' in cc.sys.capabilities ) {
            cc.log("support opengl shader");
            //the renderers of webgl and opengl is quite different now, so we have to use different shader and different js code
            if (cc.sys.isNative) {
                var shader = new cc.GLProgram("res/test_noMVP.vsh", "res/test.fsh");
                shader.link();
                shader.updateUniforms();
                var glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram(shader);
//设置参数值(blurSize对应test.fsh里面的blurSize)
                glProgram_state.setUniformVec2("blurSize", blurSize);
//添加shader
                sprite.setGLProgramState(glProgram_state);
            } else {
                var shader = new cc.GLProgram("res/test.vsh", "res/test.fsh");
                shader.retain();
                shader.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION);
                shader.addAttribute(cc.ATTRIBUTE_NAME_COLOR, cc.VERTEX_ATTRIB_COLOR);
                shader.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS);
                shader.link();
                shader.updateUniforms();
                shader.use();
//设置参数值
                shader.setUniformLocationWith2f(shader.getUniformLocationForName('blurSize'), blurSize.width, blurSize.height);
//添加shader
                sprite.shaderProgram = shader;
            }
        } else {
            cc.log("no support opengl shader");
        }
    }
});

......

运行效果图如下: