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_texCoo 可以参考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");
}
}
});

......

运行效果图如下:

总结

以上是内存溢出为你收集整理的cocos2dx-js Shader的使用(高斯模糊)全部内容，希望文章能够帮你解决cocos2dx-js Shader的使用(高斯模糊)所遇到的程序开发问题。

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