在cocos2dx中实现水波滤镜

概述因为工作原因，开始转向cocos2d-x开发方向了。 自然的，凭着之前引擎的经验偏向底层渲染研究。 在此期间看了两本书 《cocos2d-x 权威指南》 《cocos2d-x 高级开发教程》 不得不说，第一本书完全是API介绍，也许适合新手入门，但是于我，只是烂书一本。 第二本书还是不错的，最后的项目有全套源码，教程的风格也很有我的风格，哈哈，就是文章中不一定贴全代码，只贴核心，后期还要自己领会补

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

在此期间看了两本书
《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 ) @H_860_404@"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 ) }

之后在场景类中添加ShaderNode 即可

1
2
3
4 ShaderNode =ShaderNode shaderNodeWithVertex ( "shader.vsh",48); margin:0px; padding:0px; line-height:1.4em">"shader.fsh" ) >setContentSize (getContentSize ( ) ) >setcolor (ccc4f ( 1.0,.5 ) ) this >addChild (shader,160); margin:0px; padding:0px; line-height:1.4em">2 ) ;

shader.vsh 和 shader.fsh 可以从网络中得到,就是glsl文件
shader.vsh 的内容为

1
2
3
4
5
6
7
8
9 attribute vec4 a_color attribute vec4 a_position varying vec4 v_color uniform mat4 u_MVPMatrix voIDmain ( )
v_color =a_color gl_position =u_MVPMatrix *a_position shader.fsh 的内容为

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 varying vec4 v_color
uniform sampler2D tex0 precision highp float uniform float time uniform vec2 resolution floatPI = 3.1415926535897932 floatspeed 0.2 floatspeed_x 0.3 floatspeed_y floatintensity 3.0 intsteps 8 floatfrequency 4.0 intangle 7 floatdelta 20.0 floatintence 400.0 floatemboss floatcol (vec2 coord )
floatdelta_theta 2.0 *PI / float (angle ) floatcol 0.0 floattheta for ( inti ;i <steps ;i ++ )
vec2 adjc =coord theta =delta_theta * float (i ) adjc. cos (theta ) * time *speed + *speed_x adjc. sin (theta ) - *speed_y col =col cos ( (adjc. -adjc. sin (theta ) )
*frequency ) *intensity return cos (col ) voIDmain ( voID )
vec2 p = (gl_FragCoord. xy ) /resolution. xy,c1 =p,c2 =p floatcc1 =col (c1 ) c2. =resolution. /delta floatdx =emboss * (cc1 -col (c2 ) ) =p. x floatdy c1. =dx =dy floatAlpha 1. +dot (dx,dy ) *intence gl_Fragcolor =texture2D (tex0,c1 ) * (Alpha ) *v_color * (Alpha ) github地址为:
https://github.com/AlexandreRangel/QuaseCinemaFeijoada/blob/master/QuaseCinemaFeijoada07d/data/water.glsl

在使用顶点程序的时候，里面有个模型世界投影矩阵 u_MVPMatrix
我们在cocos2d-x中使用它的时候，需要把 CC_MVPMatrix 赋值给 u_MVPMatrix
或者直接把 u_MVPMatrix 删除，替换成 CC_MVPMatrix
like this

=CC_MVPMatrix cocos2d-x 在创建 GLProgram 的时候，会自动在 GLSL的文件之前加上 cocos2d-x 自身需要的参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14 constGLchar *sources [ ] #if (CC_TARGET_PLATFORM != CC_PLATFORM_WIN32 && CC_TARGET_PLATFORM != CC_PLATFORM_liNUX && CC_TARGET_PLATFORM != CC_PLATFORM_MAC)
(type ==GL_VERTEX_SHADER ? "precision highp float;\n" : "precision mediump float;\n" ),64); margin:0px; padding:0px; Font-style:italic; line-height:1.4em">#endif
"uniform mat4 CC_PMatrix;\n"
"uniform mat4 CC_MVMatrix;\n"
"uniform mat4 CC_MVPMatrix;\n"
"uniform vec4 CC_Time;\n"
"uniform vec4 CC_SinTime;\n"
"uniform vec4 CC_CosTime;\n"
"uniform vec4 CC_Random01;\n"
"//CC INCLUDES END\n\n",51); margin:0px; padding:0px; line-height:1.4em"> source,51); margin:0px; padding:0px; line-height:1.4em">;

that’s all.
本文对于原书教程补充的地方如下
修改 shader.vsh 替换 u_MVPMatrix 为 CC_MVPMatrix
删除 ShaderNode.cpp 中全部的 m_uniformCenter 的相关代码， m_uniformCenter 在Shader中并没有该字段，没有补完的意义
添加 ShaderNode.cpp 构造函数及Setcolor方法
修改 ShaderNode.h 中 update 的参数

上文来自：http://www.jb51.cc/article/p-fzfcxqem-x.html

总结

以上是内存溢出为你收集整理的在cocos2dx中实现水波滤镜全部内容，希望文章能够帮你解决在cocos2dx中实现水波滤镜所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1062346.html