cocosjs shader的简单用例（黑色的底去掉；rende
//图片变成波纹效果
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"
+ "}";
