cocos2dx学习笔记（着色器水纹效果）

转载：http://blog.csdn.net/qq_17749439/article/details/37933937

着色器

转载  http://www.25kx.com/art/2424495

参考：

[cpp]  view plain copy

1. //   ShaderNode.h  
2. #include <iostream>  
3. #include "cocos2d.h"  
4. USING_NS_CC;  
5. class ShaderNode : public CCNode  
6. {  
7. public:  
8.     ShaderNode();  
9.     bool initWithVertex(const char *vert, const char *frag);  
10.     void loadShaderVertex(const char *vert, const char *frag);  
11.     virtual void update(float delta);  
12.     virtual void setContentSize(const CCSize& var);  
13.     virtual void setColor(ccColor4F newColor);  
14.     virtual void draw();  
15.     static ShaderNode* shaderNodeWithVertex(const char *vert,  
16.                                             const char *frag);  
17.       
18. private:  
19. //    标示符  
20.     GLuint      m_uniformResolution, m_uniformTime, m_uniformTex0;  
21.     GLuint      m_attributeColor, m_attributePosition;  
22. //    取值  
23.     float       m_time;  
24.     ccVertex2F  m_resolution,m_center;  
25.     GLuint      m_texture;  
26.     GLfloat     color[4];  
27. };  

[cpp]  view plain copy

1. //   ShaderNode.cpp  
2. #include "ShaderNode.h"  
3. ShaderNode::ShaderNode()  
4. {  
5.       
6. }  
7.   
8. ShaderNode* ShaderNode::shaderNodeWithVertex(const char *vert, const char *frag)  
9. {  
10.     ShaderNode* shader = new ShaderNode();  
11.     if(shader && shader->initWithVertex(vert,frag))  
12.     {  
13.         shader->autorelease();  
14.         return shader;  
15.     }  
16.       
17.     CC_SAFE_DELETE(shader);  
18.     return NULL;  
19. }  
20.   
21. void ShaderNode::loadShaderVertex(const char *vert, const char *frag)  
22. {  
23.     CCGLProgram* shader = new CCGLProgram();  
24.     shader->initWithVertexShaderFilename(vert, frag);   //载入着色器程序  
25. //    链接着色器程序之前一定要先绑定attribute变量  
26.     //绑定attribute变量  
27.     shader->addAttribute("a_position", 0);  
28.     shader->addAttribute("a_color", 1);  
29.     shader->link();  
30.       
31.     //获取attribute变量标识  
32.     m_attributeColor = glGetAttribLocation(shader->getProgram(), "a_color");  
33.     m_attributePosition = glGetAttribLocation(  
34.                                               shader->getProgram(), "a_position");  
35.     shader->updateUniforms();  
36.       
37.     //获取uniform变量标识  
38.     m_uniformResolution = glGetUniformLocation(shader->getProgram(), "resolution");  
39.     m_uniformTime = glGetUniformLocation(shader->getProgram(), "time");  
40.     m_uniformTex0 = glGetUniformLocation(shader->getProgram(), "tex0");  
41.       
42.     //使用着色器程序  
43.     this->setShaderProgram(shader);  
44.     shader->release();  
45. }  
46.   
47. void ShaderNode::setColor(ccColor4F newColor)  
48. {  
49.     color[0] = newColor.r;  
50.     color[1] = newColor.g;  
51.     color[2] = newColor.b;  
52.     color[3] = newColor.a;  
53. }  
54.   
55. bool ShaderNode::initWithVertex(const char *vert, const char *frag)  
56. {  
57. //    获取shader程序  
58.     loadShaderVertex(vert,frag);  
59. //aaaa.png为透明图片  
60.     m_texture = CCTextureCache::sharedTextureCache()->addImage("aaaa.png")->getName();  
61.       
62.     setContentSize(CCSizeMake(1024,768));  
63.     setColor(ccc4f(0.5,0.5,1,1));  
64.     m_time = 0;  
65.     scheduleUpdate();  
66.     return true;  
67. }  
68.   
69. void ShaderNode::update(float dt)  
70. {  
71.     m_time += dt;  
72. }  
73.   
74. void ShaderNode::setContentSize(const CCSize& var)  
75. {  
76.     CCNode::setContentSize(var);  
77.     m_resolution = vertex2(getContentSize().width,getContentSize().height);  
78. //    m_center.x = m_resolution.x/2;  
79. //    m_center.y = m_resolution.y/2;  
80. }  
81.   
82. void ShaderNode::draw()  
83. {  
84.     CC_NODE_DRAW_SETUP();  
85.       
86.     //传递uniform变量  
87.     CCGLProgram* shader = getShaderProgram();  
88.     shader->setUniformLocationWith2f(m_uniformResolution, m_resolution.x,  
89.                                      m_resolution.y);  
90.     shader->setUniformLocationWith1i(m_uniformTex0, 0);  
91.     glUniform1f(m_uniformTime, m_time);  
92.       
93.     //获取attribute变量  
94.     CCSize size = this->getContentSize();  
95.     float w = size.width;  
96.     float h = size.height;  
97.       
98.     ccGLBindTexture2D(m_texture);               //绑定纹理到槽位  
99.     glCopyTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, 0, 0, w, h, 0); //截取屏幕数据到纹理  
100.     glEnableVertexAttribArray(m_attributePosition);  
101.     glDisableVertexAttribArray(m_attributeColor);  
102.       
103.     //传递attribute变量  
104.     GLfloat vertices[12] = {  
105.         0, 0, //左下0  
106.         w, 0, //右下1  
107.         w, h, //右上2  
108.         0, 0, //左下0  
109.         0, h, //左上3  
110.         w, h, //右上2  
111.     };  
112.     glVertexAttribPointer(m_attributePosition, 2, GL_FLOAT, GL_FALSE, 0, vertices);  
113.     glVertexAttrib4fv(m_attributeColor, color);    
114.       
115.     //绘制    
116.     glDrawArrays(GL_TRIANGLES, 0, 6);    
117. }  

[cpp]  view plain copy

1. //shader.fsh  
2. //段着色器  
3. varying vec4 v_color;  
4. //背景纹理  
5. uniform sampler2D tex0;  
6. precision highp float;  
7. //时间  
8. uniform float time;  
9. //分辨率  
10. uniform vec2 resolution;  
11. const float PI = 3.1415926535897932;  
12. //速度  
13. const float speed = 0.2;  
14. const float speed_x = 0.3;  
15. const float speed_y = 0.3;  
16. //几何参数  
17. const float intensity = 3.0;  
18. const int steps = 8;  
19. const float frequency = 4.0;  
20. const int angle = 7;  
21. //反射与凸起参数  
22. const float delta = 20.0;  
23. const float intence = 400.0;  
24. const float emboss = 0.3;  
25. //水波效果  
26. float col(vec2 coord)  
27. {  
28.     float delta_theta = 2.0 * PI / float(angle);  
29.     float col = 0.0;  
30.     float theta = 0.0;  
31.     for (int i = 0; i < steps; i++)  
32.     {  
33.         vec2 adjc = coord;  
34.         theta = delta_theta * float(i);  
35.         adjc.x += cos(theta)*time*speed + time * speed_x;  
36.         adjc.y -= sin(theta)*time*speed - time * speed_y;  
37.         col = col + cos((adjc.x*cos(theta) - adjc.y*sin(theta))  
38.                         *frequency)*intensity;  
39.     }  
40.     return cos(col);  
41. }  
42. //main函数  
43. void main(void)  
44. {  
45.     vec2 p = (gl_FragCoord.xy) / resolution.xy, c1 = p, c2 = p;  
46.     float cc1 = col(c1);  
47.       
48.     c2.x += resolution.x/delta;  
49.     float dx = emboss*(cc1-col(c2))/delta;  
50.       
51.     c2.x = p.x;  
52.     c2.y += resolution.y/delta;  
53.     float dy = emboss*(cc1-col(c2))/delta;  
54.       
55.     c1.x += dx;  
56.     c1.y += dy;  
57.     float alpha = 1.+dot(dx,dy)*intence;  
58.     gl_FragColor = texture2D(tex0,c1)*(alpha) *v_color*(alpha);  
59. }  

[cpp]  view plain copy

1. //shader.vsh  
2. //顶点着色器  
3. //水纹颜色  
4. attribute vec4 a_color;  
5. //顶点坐标  
6. attribute vec4 a_position;  
7. varying vec4 v_color;  
8. //坐标变换矩阵  
9. //uniform mat4 u_MVPMatrix;  
10. void main()  
11. {  
12.     v_color = a_color;  
13.     gl_Position = CC_MVPMatrix * a_position;  
14. }  

测试代码：

[cpp]  view plain copy

1. ShaderNode* shader = ShaderNode::shaderNodeWithVertex("shader.vsh","shader.fsh");  
2.     shader->setContentSize(getContentSize());  
3.     shader->setColor(ccc4f(1,1,1.0,.5));  
4.     this->addChild(shader,2);  

除此之外，引擎封装了一个特殊段动作类CCActionGrid3D，里面模拟了一些简单的3d特效。

引擎Demo中的EffectsTest演示了这些3D动作类。

引擎中的水纹效果

在场景中加入

[cpp]  view plain copy

1. // CCWaves3D::create(时间,晃动网格大小,波动速度,振幅);  
2.     CCGrid3DAction *grid = CCWaves3D::create(50, ccp(10, 10),40 , 10);  
3.     this->runAction(grid);