cocosjs shader的简单用例（黑色的底去掉；renderMode为0或2可以）

//图片变成波纹效果

var vsh = '\n' +

'attribute vec4 a_position;\n' +

'attribute vec2 a_texCoord;\n' +

'attribute vec4 a_color;\n' +

'varying vec4 v_fragmentColor;\n' +

'varying vec2 v_texCoord;\n' +

'void main()\n' +

'\n{\n' +

' gl_Position = CC_PMatrix * a_position;\n' +

' v_fragmentColor = a_color;\n' +

' v_texCoord = a_texCoord;\n' +

'}'

var fsh = '\n' +

'varying vec2 v_texCoord;\n' +

'void main()\n' +

'\n{\n' +

' vec2 coord = v_texCoord;\n' +

' coord.x += (sin(coord.y * 10.0 + CC_Time[1] * 10.0) / 30.0);\n' +

' gl_FragColor = texture2D(CC_Texture0, coord);\n' +

'}'

var shader = new cc.GLProgram()

shader.initWithString(vsh, fsh)

shader.addAttribute(cc.ATTRIBUTE_NAME_COLOR, cc.VERTEX_ATTRIB_COLOR)

shader.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION)

shader.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS)

shader.link()

shader.updateUniforms()

bg.shaderProgram = shader

//图片变灰效果

var vsh = '\n' +

'attribute vec4 a_position;\n' +

'attribute vec2 a_texCoord;\n' +

'attribute vec4 a_color;\n' +

'varying vec4 v_fragmentColor;\n' +

'varying vec2 v_texCoord;\n' +

'void main()\n' +

'\n{\n' +

' gl_Position = CC_PMatrix * a_position;\n' +

' v_fragmentColor = a_color;\n' +

' v_texCoord = a_texCoord;\n' +

'}'

这个有黑色的底（不知道为什么） var fsh = '\n' +

'varying vec2 v_texCoord;\n' +

'varying vec4 v_fragmentColor;\n' +

'void main()\n' +

'\n{\n' +

' vec4 v_orColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);\n' +

' float gray = dot(v_orColor.rgb, vec3(0.499, 0.087, 0.114));\n' +

' gl_FragColor = vec4(gray, gray, gray, 1);\n' +

'}'

这个没有黑色的底（cocos里的）var fsh = '\n' +

'varying vec2 v_texCoord;\n' +

'varying vec4 v_fragmentColor;\n' +

'void main()\n' +

'\n{\n' +

' vec4 v_orColor = texture2D(CC_Texture0, v_texCoord);\n' +

' float gray = dot(v_orColor.rgb, vec3(0.499, 0.087, 0.114));\n' +

' gl_FragColor.xyz = vec3(0.2126*v_orColor.r + 0.7152*v_orColor.g + 0.0722*v_orColor.b);\n' +

' gl_FragColor.w = v_orColor.w ; \n' +

'}'

// 添加shader

// ' float gray = dot(v_orColor.rgb, vec3(0.499, 0.087, 0.114));\n' +

this.shader = new cc.GLProgram()

this.shader.initWithString(vsh, fsh)

this.shader.addAttribute(cc.ATTRIBUTE_NAME_COLOR, cc.VERTEX_ATTRIB_COLOR)

this.shader.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION)

this.shader.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS)

this.shader.link()

this.shader.updateUniforms()

bg.shaderProgram = this.shader

//高斯模糊效果

var vsh = '\n' +

'attribute vec4 a_position;\n' +

'attribute vec2 a_texCoord;\n' +

'attribute vec4 a_color;\n' +

'varying vec4 v_fragmentColor;\n' +

'varying vec2 v_texCoord;\n' +

'void main()\n' +

'\n{\n' +

' gl_Position = CC_PMatrix * a_position;\n' +

' v_fragmentColor = a_color;\n' +

' v_texCoord = a_texCoord;\n' +

'}'

var fsh = '\n' +

'varying vec2 v_texCoord;\n' +

'varying vec4 v_fragmentColor;\n' +

'uniform vec2 blurSize;\n' +

'void main()\n' +

'\n{\n' +

' vec4 sum = vec4(0.0);\n' +

' sum += texture2D(CC_Texture0, v_texCoord - 0.0004 * blurSize) * 0.05;\n' +

' sum += texture2D(CC_Texture0, v_texCoord - 0.0003 * blurSize) * 0.09;\n' +

' sum += texture2D(CC_Texture0, v_texCoord - 0.0002 * blurSize) * 0.12;\n' +

' sum += texture2D(CC_Texture0, v_texCoord - 0.0001 * blurSize) * 0.15;\n' +

' sum += texture2D(CC_Texture0, v_texCoord) * 0.16;\n' +

' sum += texture2D(CC_Texture0, v_texCoord + 0.0001 * blurSize) * 0.15;\n' +

' sum += texture2D(CC_Texture0, v_texCoord + 0.0002 * blurSize) * 0.12;\n' +

' sum += texture2D(CC_Texture0, v_texCoord + 0.0003 * blurSize) * 0.09;\n' +

' sum += texture2D(CC_Texture0, v_texCoord + 0.0004 * blurSize) * 0.05;\n' +

' gl_FragColor = sum * v_fragmentColor;\n' +

'}'

var blurSize = cc.size(this.spr.getBoundingBox().width * 2, this.spr.getBoundingBox().height * 2)

this.shader = new cc.GLProgram()

this.shader.initWithString(vsh, fsh)

this.shader.addAttribute(cc.ATTRIBUTE_NAME_COLOR, cc.VERTEX_ATTRIB_COLOR)

this.shader.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION)

this.shader.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS)

this.shader.link()

this.shader.updateUniforms()

this.shader.use()

// 设置参数值

this.shader.setUniformLocationWith2f(this.shader.getUniformLocationForName('blurSize'), blurSize.width, blurSize.height)

this.spr.shaderProgram = this.shader

参考 https://blog.csdn.net/afei198409/article/details/77839330

https://www.cnblogs.com/kenkofox/p/4084684.html

https://www.jianshu.com/p/0b28707acef5

以下为cocos里的

//-----------------------Shader_Position_uColor Shader Source--------------------------

/**

* @constant

* @type {String}

cc.SHADER_POSITION_UCOLOR_FRAG =

"precision lowp float;\n"

+ "varying vec4 v_fragmentColor;\n"

+ "void main() \n"

+ "{ \n"

+ " gl_FragColor = v_fragmentColor; \n"

+ "}\n";

/**

* @constant

* @type {String}

cc.SHADER_POSITION_UCOLOR_VERT =

"attribute vec4 a_position;\n"

+ "uniform vec4 u_color;\n"

+ "uniform float u_pointSize;\n"

+ "varying lowp vec4 v_fragmentColor; \n"

+ "void main(void) \n"

+ "{\n"

//+ " gl_Position = CC_MVPMatrix * a_position; \n"

+ " gl_Position = (CC_PMatrix * CC_MVMatrix) * a_position; \n"

+ " gl_PointSize = u_pointSize; \n"

+ " v_fragmentColor = u_color; \n"

+ "}";

//---------------------Shader_PositionColor Shader Source-----------------------

/**

* @constant

* @type {String}

cc.SHADER_POSITION_COLOR_FRAG =

"precision lowp float; \n"

+ "varying vec4 v_fragmentColor; \n"

+ "void main() \n"

+ "{ \n"

+ " gl_FragColor = v_fragmentColor; \n"

+ "} ";

/**

* @constant

* @type {String}

cc.SHADER_POSITION_COLOR_VERT =

"attribute vec4 a_position;\n"

+ "attribute vec4 a_color;\n"

+ "varying lowp vec4 v_fragmentColor;\n"

+ "void main()\n"

+ "{\n"

+ " gl_Position = (CC_PMatrix * CC_MVMatrix) * a_position; \n"

+ " v_fragmentColor = a_color; \n"

+ "}";

cc.SHADER_SPRITE_POSITION_COLOR_VERT =

"attribute vec4 a_position;\n"

+ "attribute vec4 a_color;\n"

+ "varying lowp vec4 v_fragmentColor;\n"

+ "void main()\n"

+ "{\n"

+ " gl_Position = CC_PMatrix * a_position; \n"

+ " v_fragmentColor = a_color; \n"

+ "}";

// --------------------- Shader_PositionColorLengthTexture Shader source------------------------

/**

* @constant

* @type {String}

cc.SHADER_POSITION_COLOR_LENGTH_TEXTURE_FRAG =

"// #extension GL_OES_standard_derivatives : enable\n"

+ "varying mediump vec4 v_color;\n"

+ "varying mediump vec2 v_texcoord;\n"

+ "void main() \n"

+ "{ \n"

+ "// #if defined GL_OES_standard_derivatives \n"

+ "// gl_FragColor = v_color*smoothstep(0.0, length(fwidth(v_texcoord)), 1.0 - length(v_texcoord)); \n"

+ "// #else \n"

+ "gl_FragColor = v_color * step(0.0, 1.0 - length(v_texcoord)); \n"

+ "// #endif \n"

+ "}";

/**

* @constant

* @type {String}

cc.SHADER_POSITION_COLOR_LENGTH_TEXTURE_VERT =

"attribute mediump vec4 a_position; \n"

+ "attribute mediump vec2 a_texcoord; \n"

+ "attribute mediump vec4 a_color; \n"

+ "varying mediump vec4 v_color; \n"

+ "varying mediump vec2 v_texcoord; \n"

+ "void main() \n"

+ "{ \n"

+ " v_color = a_color;//vec4(a_color.rgb * a_color.a, a_color.a); \n"

+ " v_texcoord = a_texcoord; \n"

//+ " gl_Position = CC_MVPMatrix * a_position; \n"

+ " gl_Position = (CC_PMatrix * CC_MVMatrix) * a_position; \n"

+ "}";

// ----------------------Shader_PositionTexture Shader Source-------------------------------------

/**

* @constant

* @type {String}

cc.SHADER_POSITION_TEXTURE_FRAG =

"precision lowp float; \n"

+ "varying vec2 v_texCoord; \n"

+ "void main() \n"

+ "{ \n"

+ " gl_FragColor = texture2D(CC_Texture0, v_texCoord); \n"

+ "}";

/**

* @constant

* @type {String}

cc.SHADER_POSITION_TEXTURE_VERT =

"attribute vec4 a_position; \n"

+ "attribute vec2 a_texCoord; \n"

+ "varying mediump vec2 v_texCoord; \n"

+ "void main() \n"

+ "{ \n"

//+ " gl_Position = CC_MVPMatrix * a_position; \n"

+ " gl_Position = (CC_PMatrix * CC_MVMatrix) * a_position; \n"

+ " v_texCoord = a_texCoord; \n"

+ "}";

// ------------------------Shader_PositionTexture_uColor Shader Source-------------------------------

/**

* @constant

* @type {String}

cc.SHADER_POSITION_TEXTURE_UCOLOR_FRAG =

"precision lowp float; \n"

+ "uniform vec4 u_color; \n"

+ "varying vec2 v_texCoord; \n"

+ "void main() \n"

+ "{ \n"

+ " gl_FragColor = texture2D(CC_Texture0, v_texCoord) * u_color; \n"

+ "}";

/**

* @constant

* @type {String}

cc.SHADER_POSITION_TEXTURE_UCOLOR_VERT =

"attribute vec4 a_position;\n"

+ "attribute vec2 a_texCoord; \n"

+ "varying mediump vec2 v_texCoord; \n"

+ "void main() \n"

+ "{ \n"

//+ " gl_Position = CC_MVPMatrix * a_position; \n"

+ " gl_Position = (CC_PMatrix * CC_MVMatrix) * a_position; \n"

+ " v_texCoord = a_texCoord; \n"

+ "}";

//---------------------Shader_PositionTextureA8Color Shader source-------------------------------

/**

* @constant

* @type {String}

cc.SHADER_POSITION_TEXTURE_A8COLOR_FRAG =

"precision lowp float; \n"

+ "varying vec4 v_fragmentColor; \n"

+ "varying vec2 v_texCoord; \n"

+ "void main() \n"

+ "{ \n"

+ " gl_FragColor = vec4( v_fragmentColor.rgb, \n" // RGB from uniform

+ " v_fragmentColor.a * texture2D(CC_Texture0, v_texCoord).a \n" // A from texture and uniform

+ " ); \n"

+ "}";

/**

* @constant

* @type {String}

cc.SHADER_POSITION_TEXTURE_A8COLOR_VERT =

"attribute vec4 a_position; \n"

+ "attribute vec2 a_texCoord; \n"

+ "attribute vec4 a_color; \n"

+ "varying lowp vec4 v_fragmentColor; \n"

+ "varying mediump vec2 v_texCoord; \n"

+ "void main() \n"

+ "{ \n"

+ " gl_Position = (CC_PMatrix * CC_MVMatrix) * a_position; \n"

+ " v_fragmentColor = a_color; \n"

+ " v_texCoord = a_texCoord; \n"

+ "}";

// ------------------------Shader_PositionTextureColor Shader source------------------------------------

/**

* @constant

* @type {String}

cc.SHADER_POSITION_TEXTURE_COLOR_FRAG =

"precision lowp float;\n"

+ "varying vec4 v_fragmentColor; \n"

+ "varying vec2 v_texCoord; \n"

+ "void main() \n"

+ "{ \n"

+ " gl_FragColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord); \n"

+ "}";

/**

* @constant

* @type {String}

cc.SHADER_POSITION_TEXTURE_COLOR_VERT =

"attribute vec4 a_position; \n"

+ "attribute vec2 a_texCoord; \n"

+ "attribute vec4 a_color; \n"

+ "varying lowp vec4 v_fragmentColor; \n"

+ "varying mediump vec2 v_texCoord; \n"

+ "void main() \n"

+ "{ \n"

+ " gl_Position = (CC_PMatrix * CC_MVMatrix) * a_position; \n"

+ " v_fragmentColor = a_color; \n"

+ " v_texCoord = a_texCoord; \n"

+ "}";

/**

* @constant

* @type {String}

cc.SHADER_SPRITE_POSITION_TEXTURE_COLOR_VERT =

"attribute vec4 a_position; \n"

+ "attribute vec2 a_texCoord; \n"

+ "attribute vec4 a_color; \n"

+ "varying lowp vec4 v_fragmentColor; \n"

+ "varying mediump vec2 v_texCoord; \n"

+ "void main() \n"

+ "{ \n"

+ " gl_Position = CC_PMatrix * a_position; \n"

+ " v_fragmentColor = a_color; \n"

+ " v_texCoord = a_texCoord; \n"

+ "}";

cc.SHADER_SPRITE_POSITION_TEXTURE_COLOR_GRAY_FRAG =

"precision lowp float;\n"

+ "varying vec4 v_fragmentColor; \n"

+ "varying vec2 v_texCoord; \n"

+ "void main() \n"

+ "{ \n"

+ " vec4 c = texture2D(CC_Texture0, v_texCoord); \n"

+ " gl_FragColor.xyz = vec3(0.2126*c.r + 0.7152*c.g + 0.0722*c.b); \n"

+" gl_FragColor.w = c.w ; \n"

+ "}";

//-----------------------Shader_PositionTextureColorAlphaTest_frag Shader Source----------------------------

/**

* @constant

* @type {String}

cc.SHADER_POSITION_TEXTURE_COLOR_ALPHATEST_FRAG =

"precision lowp float; \n"

+ "varying vec4 v_fragmentColor; \n"

+ "varying vec2 v_texCoord; \n"

+ "uniform float CC_alpha_value; \n"

+ "void main() \n"

+ "{ \n"

+ " vec4 texColor = texture2D(CC_Texture0, v_texCoord); \n"

// mimic: glAlphaFunc(GL_GREATER)

//pass if ( incoming_pixel >= CC_alpha_value ) => fail if incoming_pixel < CC_alpha_value

+ " if ( texColor.a <= CC_alpha_value ) \n"

+ " discard; \n"

+ " gl_FragColor = texColor * v_fragmentColor; \n"

+ "}";

//-----------------------ShaderEx_SwitchMask_frag Shader Source----------------------------

/**

* @constant

* @type {String}

cc.SHADEREX_SWITCHMASK_FRAG =

"precision lowp float; \n"

+ "varying vec4 v_fragmentColor; \n"

+ "varying vec2 v_texCoord; \n"

+ "uniform sampler2D u_texture; \n"

+ "uniform sampler2D u_mask; \n"

+ "void main() \n"

+ "{ \n"

+ " vec4 texColor = texture2D(u_texture, v_texCoord); \n"

+ " vec4 maskColor = texture2D(u_mask, v_texCoord); \n"

+ " vec4 finalColor = vec4(texColor.r, texColor.g, texColor.b, maskColor.a * texColor.a); \n"

+ " gl_FragColor = v_fragmentColor * finalColor; \n"

+ "}";

最后编辑于：2019.05.06 08:54:44

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 215,076评论 6赞 497
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,658评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,732评论 0赞 350
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,493评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,591评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,598评论 1赞 293
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,601评论 3赞 415
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,348评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,797评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,114评论 2赞 330
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,278评论 1赞 344
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,953评论 5赞 339
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,585评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,202评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,442评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,180评论 2赞 367
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,139评论 2赞 352

cocosjs shader的简单用例（黑色的底去掉；renderMode为0或2可以）

推荐阅读更多精彩内容