【玩转cocos2d-x之四十】如何在Cocos2d-x 3.0中使用opengl shader？

有小伙伴提出了这个问题，其实GLProgramCocos2d-x引擎自带了。完全可以直接拿来用。

先上图吧。使用opengl前后的对比：

1.在cpp中使用openGL shader。

（1）添加gray.vsh和gray.fsh到资源目录（见附件）。
（2）添加如下代码：

[cpp] view plaincopy

1. bool HelloWorld::init()  
2. {  
3.     if ( !Layer::init() )  
4.     {  
5.         return false;  
6.     }  
7.     ize visibleSize = Director::getInstance()->getVisibleSize();  
8.     auto sprite = Sprite::create("HelloWorld.png");  
9.     sprite->setAnchorPoint(Point(0.5, 0.5));  
10.     sprite->setPosition(Point(visibleSize.width / 3, visibleSize.height / 3));  
11.     this->addChild(sprite);  
12.     graySprite(sprite);  
13.     return true;  
14. }  
15.    
16. void HelloWorld::graySprite(Sprite * sprite)  
17. {  
18.     if(sprite)  
19.     {  
20.         GLProgram * p = new GLProgram();  
21.         p->initWithFilenames("gray.vsh", "gray.fsh");  
22.         p->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_POSITION, GLProgram::VERTEX_ATTRIB_POSITION);  
23.         p->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_COLOR, GLProgram::VERTEX_ATTRIB_COLOR);  
24.         p->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_TEX_COORD, GLProgram::VERTEX_ATTRIB_TEX_COORDS);  
25.         p->link();  
26.         p->updateUniforms();  
27.         sprite->setShaderProgram(p);  
28.     }  
29. }  

2.在js中使用opengl shader.

(1)添加gray.vsh和gray.fsh到资源目录。
(2)添加如下代码：

[javascript] view plaincopy

1. var HelloWorldLayer = cc.Layer.extend({  
2.     sprite:null,  
3.     ctor:function ()  
4.     {  
5.         this._super();  
6.         var size = cc.director.getWinSize();  
7.         this.sprite = cc.Sprite.create(res.HelloWorld_png);  
8.         this.sprite.attr({  
9.             x: size.width / 2,  
10.             y: size.height / 2,  
11.             scale: 0.5,  
12.             rotation: 180  
13.         });  
14.         this.addChild(this.sprite, 0);  
15.         graySprite(this.sprite);                         
16.         return true;  
17.     }  
18. });  
19.    
20. function graySprite(sprite)  
21. {  
22.     if(sprite)  
23.     {  
24.         var shader = new cc.GLProgram();//cc.GLProgram.create("gray.vsh", "gray.fsh");  
25.         shader.retain();  
26.         //shader.initWithByteArrays("res/gray.vsh", "res/gray.fsh");  
27.         shader.initWithFilenames("res/gray.vsh", "res/gray.fsh");  
28.         shader.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION);  
29.         shader.addAttribute(cc.ATTRIBUTE_NAME_COLOR, cc.VERTEX_ATTRIB_COLOR);  
30.         shader.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS);  
31.    
32.         shader.link();  
33.         shader.updateUniforms();  
34.         sprite.setShaderProgram(shader);  
35.     }      
36. }  

附件：gray.vsh和gray.fsh
翻译自：
1.http://www.cocos2d-x.org/forums/6/topics/49035
2.http://www.cocos2d-x.org/forums/19/topics/49038