在cocos2dx中实现水波滤镜

在cocos2dx中实现水波滤镜,第1张

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

因为工作原因,开始转向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 ) @H_681_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 )
float
delta_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 的参数

总结

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

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1014567.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存