[Play to cocos2d-x 40] How to use opengl shader in Cocos2d-x 3.0?

Some friends raised this problem, in fact the GLProgramCocos2d-x engine comes. It can be used directly.

First. Comparison before and after opengl:

1. Use openGL shader in cpp. (1) Add gray. vsh and gray. fsh to the Resource Directory (see the attachment ).
(2) Add the following code:

bool HelloWorld::init(){    if ( !Layer::init() )    {        return false;    }    ize visibleSize = Director::getInstance()->getVisibleSize();    auto sprite = Sprite::create("HelloWorld.png");    sprite->setAnchorPoint(Point(0.5, 0.5));    sprite->setPosition(Point(visibleSize.width / 3, visibleSize.height / 3));    this->addChild(sprite);    graySprite(sprite);    return true;} void HelloWorld::graySprite(Sprite * sprite){    if(sprite)    {        GLProgram * p = new GLProgram();        p->initWithFilenames("gray.vsh", "gray.fsh");        p->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_POSITION, GLProgram::VERTEX_ATTRIB_POSITION);        p->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_COLOR, GLProgram::VERTEX_ATTRIB_COLOR);        p->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_TEX_COORD, GLProgram::VERTEX_ATTRIB_TEX_COORDS);        p->link();        p->updateUniforms();        sprite->setShaderProgram(p);    }}

2. Use opengl shader. (1) In js to add gray. vsh and gray. SHSH to the Resource Directory.
(2) Add the following code:

var HelloWorldLayer = cc.Layer.extend({    sprite:null,    ctor:function ()    {        this._super();        var size = cc.director.getWinSize();        this.sprite = cc.Sprite.create(res.HelloWorld_png);        this.sprite.attr({            x: size.width / 2,            y: size.height / 2,            scale: 0.5,            rotation: 180        });        this.addChild(this.sprite, 0);        graySprite(this.sprite);                               return true;    }}); function graySprite(sprite){    if(sprite)    {        var shader = new cc.GLProgram();//cc.GLProgram.create("gray.vsh", "gray.fsh");        shader.retain();        //shader.initWithByteArrays("res/gray.vsh", "res/gray.fsh");        shader.initWithFilenames("res/gray.vsh", "res/gray.fsh");        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);    }    }

Attachment: gray. vsh and gray. fsh
Translated from:
1. http://www.cocos2d-x.org/forums/6/topics/49035
2. http://www.cocos2d-x.org/forums/19/topics/49038