cocos2d-js实现的图片变灰、去色 Shader、GLProgram在jsb（native、手机）和html5之间的兼容问题

Cocos2d-x JavaScript
#1

大家先看看图片效果Z:

还要注意的是 文件要 加载后才行 具体为什么 我也不清楚 反正不加载 直接用在web下面 无效

如图

我的这个 参考了 两位大神的例子 他们的例子和 帖子 分别在下面

http://www.cnblogs.com/kenkofox/p/4084684.html%20,1 http://www.cnblogs.com/kenkofox/p/4084684.html

http://www.cocoachina.com/bbs/read.php?tid-235142.html,1 http://www.cocoachina.com/bbs/read.php?tid-235142.html

具体的 代码实现 演示 是这样的

        var node1 =new  cc.Sprite("res/demo.png");
        this.addChild(node1);
        node1.x = 500;
        node1.y =  300;

        var node2 = new cc.Sprite("res/demo.png");
        this.addChild(node2);
        node2.x = 500;
        node2.y =  130;
        Filter.grayScale(node2);

最后源码 奉上

src.rar (29 KB)

#2 
/**
 * Created by kenkozheng  on 2014/12/9.15:15
 * Note:只能用于控制Sprite的色调等，目标是实现类似Flash的内置基本滤镜
 * 静态类
 * modified by    jsroads 
 * E-mail: jsroads@163.com
 */
var Filter = {
    DEFAULT_VERTEX_SHADER:
    "attribute vec4 a_position; \n"
    + "attribute vec2 a_texCoord; \n"
    + "varying mediump vec2 v_texCoord; \n"
    + "void main() \n"
    + "{ \n"
    + "    gl_Position = (CC_PMatrix * CC_MVMatrix) * a_position;  \n"
    + "    v_texCoord = a_texCoord; \n"
    + "}",

    GRAY_SCALE_FRAGMENT_SHADER:
    "varying vec2 v_texCoord;   \n"
    + "uniform sampler2D tex0; \n"
    + "void main() \n"
    + "{  \n"
    + "    vec4 texColor = texture2D(tex0, v_texCoord);  \n"
    + "    float gray = texColor.r * 0.299 + texColor.g * 0.587 + texColor.b * 0.114; \n"
    + "    gl_FragColor = vec4(gray, gray, gray, texColor.a);  \n"
    + "}",

    SEPIA_FRAGMENT_SHADER:
    "varying vec2 v_texCoord;   \n"
    + "uniform sampler2D tex0; \n"
    + "uniform float u_degree; \n"
    + "void main() \n"
    + "{  \n"
    + "    vec4 texColor = texture2D(tex0, v_texCoord);  \n"
    + "    float r = texColor.r * 0.393 + texColor.g * 0.769 + texColor.b * 0.189; \n"
    + "    float g = texColor.r * 0.349 + texColor.g * 0.686 + texColor.b * 0.168; \n"
    + "    float b = texColor.r * 0.272 + texColor.g * 0.534 + texColor.b * 0.131; \n"
    + "    gl_FragColor = mix(texColor, vec4(r, g, b, texColor.a), u_degree);  \n"
    + "}",
    SHADER_POSITION_GRAY_FRAG:
    "varying vec4 v_fragmentColor;\n"+
    "varying vec2 v_texCoord;\n"+
    ((typeof document !== 'undefined')? "uniform sampler2D CC_Texture0;\n":"")+
    "void main()\n"+
    "{\n"+
    "    vec4 v_orColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);\n"+
    "    float gray = dot(v_orColor.rgb, vec3(0.299, 0.587, 0.114));\n"+
    "    gl_FragColor = vec4(gray, gray, gray, v_orColor.a);\n"+
    "}\n",
    SHADER_POSITION_GRAY_VERT :
    "attribute vec4 a_position;\n"+
    "attribute vec2 a_texCoord;\n"+
    "attribute vec4 a_color;\n"+
    "\n"+
    "varying vec4 v_fragmentColor;\n"+
    "varying vec2 v_texCoord;\n"+
    "\n"+
    "void main()\n"+
    "{\n"+
    "gl_Position = "+ ((typeof document !== 'undefined')?"(CC_PMatrix * CC_MVMatrix)":"CC_PMatrix") + " * a_position;\n"+
    "v_fragmentColor = a_color;\n"+
    "v_texCoord = a_texCoord;\n"+
    "}",

    programs:{},

    /**
     * 灰度
     * @param sprite
     */
    grayScale: function (sprite) {
        var program = Filter.programs"grayScale"];
        if(!program){
            program = new cc.GLProgram();
            if(typeof document!== 'undefined'){
                //判断是否是web环境
                program.initWithString(Filter.DEFAULT_VERTEX_SHADER, Filter.GRAY_SCALE_FRAGMENT_SHADER);
            }else{
                program.initWithString(Filter.SHADER_POSITION_GRAY_VERT, Filter.SHADER_POSITION_GRAY_FRAG);
            }
            program.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION);        //cocos会做初始化的工作
            program.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS);
            program.link();
            program.updateUniforms();
            Filter.programs"grayScale"] = program;
        }
        gl.useProgram(program.getProgram());
        sprite.shaderProgram = program;
    }

};

一楼自己占楼，以后需要补充，就在这里:14::14::14::14:

#3

所有的web文件要都要先加载到内存才行

#4

好岾，支持

#5

实用!!:14:

#6

谢谢分享，很好用，不过3.9版本这句
gl.useProgram(program.getProgram());已经没用了，跑起来会闪屏，
在program.updateUniforms();这句后面加上
program.use();解决