在cocos2dx中实现水波滤镜

因为工作原因，开始转向cocos2d-x开发方向了。
自然的，凭着之前引擎的经验偏向底层渲染研究。

在此期间看了两本书
《cocos2d-x 权威指南》
《cocos2d-x 高级开发教程》
不得不说，第一本书完全是API介绍，也许适合新手入门，但是于我，只是烂书一本。
第二本书还是不错的，最后的项目有全套源码，教程的风格也很有我的风格，哈哈，就是文章中不一定贴全代码，只贴核心，后期还要自己领会补全。

言归正传，在 《高级开发教程》 中有一篇是实现海底水纹效果的文章，里面代码不全，且代码和Shader并没有对应起来,于是我决定按照自己思路来将其补全，并贴上完整源码。

先上效果图：

动态GIF图地址:http://pan.baidu.com/share/link?shareid=1858640040&uk=3221530571

首先创建一个 ShaderNode.h 类并继承CCNode

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

#ifndef __FishingJoy_ShaderNode__ #define __FishingJoy_ShaderNode__ #include "cocos2d.h" USING_NS_CC ; classShaderNode : publicCCNode { public : ShaderNode ( ) boolinitWithVertex ( const char *vert,*frag ) voidloadShaderVertex ( virtual voidupdate ( floatdelta ) voidsetContentSize ( constCCSize &var ) voidsetColor (ccColor4F newColor ) voiddraw ( ) staticShaderNode *shaderNodeWithVertex ( private GLuint m_uniformResolution,m_uniformTime,m_uniformTex0 GLuint m_attributeColor,m_attributePosition float m_time ccVertex2F m_resolution,m_center GLuint m_texture GLfloat color [ 4 ] } #endif

之后创建ShaderNode.cpp 并实现 ShaderNode.h 中的各方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

#include "ShaderNode.h"
ShaderNode :: ShaderNode ( )
}
ShaderNode *ShaderNode shaderNodeWithVertex ( *frag )
ShaderNode *shader = newShaderNode ( ) if (shader &&shader - >initWithVertex (vert,frag ) )
{
shader >autorelease ( ) returnshader }
CC_SAFE_DELETE (shader ) return NULL voidShaderNode loadShaderVertex ( CCGLProgram newCCGLProgram ( ) shader >initWithVertexShaderFilename (vert,frag ) ; //载入着色器程序
//绑定attribute变量
>addAttribute ( "a_position",0 ) "a_color",160); margin:0px; padding:0px; line-height:1.4em">1 ) >link ( ) //获取attribute变量标识
m_attributeColor =glGetAttribLocation (shader >getProgram ( ),"a_color" ) m_attributePosition =glGetAttribLocation (
"a_position" ) >updateUniforms ( ) //获取uniform变量标识
m_uniformResolution =glGetUniformLocation (shader "resolution" ) m_uniformTime "time" ) m_uniformTex0 "tex0" ) //使用着色器程序
this >setShaderProgram (shader ) >release ( ) setColor (ccColor4F newColor )
color [ 0 ] =newColor. r 1 ] g 2 ] b 3 ] a boolShaderNode initWithVertex ( loadShaderVertex (vert,51); margin:0px; padding:0px; line-height:1.4em"> m_texture =CCTextureCache sharedTextureCache ( ) >addImage ( "HelloWorld.png" ) >getName ( ) setContentSize (CCSizeMake ( 1024,160); margin:0px; padding:0px; line-height:1.4em">768 ) ) setColor (ccc4f ( 0.5,1,160); margin:0px; padding:0px; line-height:1.4em">1 ) ) m_time = 0 scheduleUpdate ( ) true update ( floatdt )
m_time + =dt setContentSize ( &var )
CCNode setContentSize (var ) m_resolution =vertex2 (getContentSize ( ). width,getContentSize ( ). height ) m_center. x =m_resolution. x / 2 y y draw ( )
CC_NODE_DRAW_SETUP ( ) //传递uniform变量
=getShaderProgram ( ) >setUniformLocationWith2f (m_uniformResolution,m_resolution. x,51); margin:0px; padding:0px; line-height:1.4em"> m_resolution. y ) >setUniformLocationWith1i (m_uniformTex0,51); margin:0px; padding:0px; line-height:1.4em"> glUniform1f (m_uniformTime,m_time ) //获取attribute变量
CCSize size =this >getContentSize ( ) floatw =size. width floath height ccGLBindTexture2D (m_texture ) ; //绑定纹理到槽位
glCopyTexImage2D (GL_TEXTURE_2D,160); margin:0px; padding:0px; line-height:1.4em">0,GL_RGBA,w,h,64); margin:0px; padding:0px; font-style:italic; line-height:1.4em">//截取屏幕数据到纹理
glEnableVertexAttribArray (m_attributePosition ) glDisableVertexAttribArray (m_attributeColor ) //传递attribute变量
GLfloat vertices [ 12 ] = {
//左下0
w,64); margin:0px; padding:0px; font-style:italic; line-height:1.4em">//右下1
//右上2
//左上3
} glVertexAttribPointer (m_attributePosition,160); margin:0px; padding:0px; line-height:1.4em">2,GL_FLOAT,GL_FALSE,vertices ) glVertexAttrib4fv (m_attributeColor,color ) //绘制
glDrawArrays (GL_TRIANGLES,160); margin:0px; padding:0px; line-height:1.4em">6 ) }