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");
}
}
});

......

运行效果图如下: