cocos2d javascript shader

main1.js

// see http://www.cocos2d-x.org/docs/api-ref/js/v3x/symbols/cc.GLProgram.html
// see http://discuss.cocos2d-x.org/t/how-to-use-shader-in-cocos2d-js-v3-0-alpha/12432
// see https://github.com/search?l=javascript&o=desc&q=initWithVertexShaderByteArray&s=indexed&type=Code&utf8=%E2%9C%93

var grayShaderFragment =
    "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"
    + "}";
    
    // ...
    
    graySprite : function (sprite)
    {
        if (sprite) {
            var shader = new cc.GLProgram();//cc.GLProgram.create("gray.vsh", "gray.fsh");
            shader.retain();
            //this.shader.initWithVertexShaderByteArray(_default_vert, _black_white_frag);
            // shader.init(res.gray_vsh, res.gray_fsh);
            shader.initWithVertexShaderByteArray(cc.SHADER_POSITION_TEXTURE_COLOR_VERT, grayShaderFragment);

            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();
            sprite.setShaderProgram(shader);
        }
    },
    
    // ...
    
        this.sprite = new cc.Sprite(res.HelloWorld_png);
        this.sprite.attr({
            x: size.width / 2,
            y: size.height / 2
        });
        this.addChild(this.sprite, 0);
        this.graySprite(this.sprite);