前言
最近看了许多关于Cocos Shader用法的，但绝大部分教程都是cpp实现的示例，有些还是低版本的。这里结合网上文章和自己测试做一个小总结，内容不深，算是shader入门，有需要用到Cocos2dx-js Shader的同学可以继续往下看。
（也希望大神来补充，指正小弟的不足，告诉我Cocos Shader是能实现如Unity引擎中逆天特效的~~~）
1. Cocos Shader能实现哪些效果
- 变灰、色相等修改图片纹理的颜色。
- 各种模糊效果。
- 描边效果。
- 流光效果。
- 模拟光照效果 + 遮罩效果。
- 法线贴图+高光 = 高光流水效果。
- 欢迎补充。
2. Shader一些简单讲解
-
入门知识
Cocos2D-X是基于OpenGL的，首先我们自己编写Shader之前，得了解一下渲染管线的知识。
[基本传送门]（http://lib.csdn.net/article/cocos/17840）
-
为何使用Shader？
Shader是运行在GPU上的一段代码，可以减少性能开销（为CPU减轻负担），实现一些平时很难实现的效果。
-
其它
入门知识有很多，大家也可以自行查找下其它博文，这里不做过多解释。
3. Cocos Shader-JS API
-
JS API使用
//初始化一个精灵
this.sprite = new cc.Sprite("res/water/ColorMap.jpg");
this.sprite.attr({
x: cc.winSize.width / 2,
y: cc.winSize.height/ 2
});
this.addChild(this.sprite);
//添加shader
this.shader = new cc.GLProgram('res/water.vsh', 'res/water.fsh');
this.shader.link();
this.shader.updateUniforms();
this.sprite.shaderProgram = this.shader;
this.glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram(this.shader);
//其中以下API还算比较全面，官方文档并没有给全，有些是本人测试所得。
//texture纹理图片传值
this.texture2 = cc.textureCache.addImage("res/water/water_normal.jpg");
this.glProgram_state.setUniformTexture("u_normalMap",this.texture2);
//float传值
this.glProgram_state.setUniformFloat("f_update",0.5);
//vec4传值
this.glProgram_state.setUniformVec4("f_color",cc.math.vec4(0.23,0.2,0.0,1.0));
//vec3传值
this.glProgram_state.setUniformVec3("f_v3",cc.math.vec3(0.23,0.2,0.0));
//有些cpp教程中，有vec2传值，js中无法实现，不知道什么原因，大家可以用别的方案替代。
this.sprite.setGLProgramState(this.glProgram_state);
-
Shader API 示例
cocos shader 由两个文件组成，vsh顶点着色器 和 fsh片段着色器
attribute：外部传入vsh文件的变量 每帧的渲染的可变参数 变化率高 用于定义每个点。
varying：用于 vsh和fsh之间相互传递的参数。
uniform 外部传入vsh文件的变量 变化率较低 对于可能在整个渲染过程没有改变 只是个常量。
// gray.vsh 一般顶点着色器都是固定写法，或有小部分算法
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
void main()
{
gl_Position = CC_PMatrix * a_position;
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
}
// gray.fsh 片段着色器 逻辑算法的关键
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
//以下声明，映照JS代码中的传值，JS传参到shader可供参考
uniform sampler2D u_normalMap;
uniform float f_update;
uniform vec4 f_color;
uniform vec3 f_v3;
void main()
{
//本示例未用到上面的传参，只供参考。
//其中CC_Texture0 为本精灵的纹理图片
vec4 v_orColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);
float gray = dot(v_orColor.rgb, vec3(0.299, 0.587, 0.114));
gl_FragColor = vec4(gray, gray, gray, v_orColor.a);
}
4. Shader一些用法示例
- 待补充
5. 补充注释
- 官方示例和API讲的不是很友好,效果实现也只是基础.非常欢迎大家补充更多效果的实现,方便新入门的同学.
- 本人基本翻遍了cocos shader 各大博主的文章,部分shader是根据各大博主的思路借鉴来的,如有侵权本人及时修改删除~~~
