编程之家收集整理的这篇文章主要介绍了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");

}

}

});

......

运行效果图如下:

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

如您喜欢交流学习经验，点击链接加入编程之家官方QQ群：1065694478