在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 ; class ShaderNode  :  public CCNode { public :     ShaderNode ( ) ;      bool initWithVertex ( const  char  *vert,  const  char  *frag ) ;      void loadShaderVertex ( const  char  *vert,  const  char  *frag ) ;      virtual  void update ( float delta ) ;      virtual  void setContentSize ( const CCSize & var ) ;      virtual  void setColor (ccColor4F newColor ) ;      virtual  void draw ( ) ;      static ShaderNode * shaderNodeWithVertex ( const  char  *vert,          const  char  *frag ) ; 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 ( const  char  *vert,  const  char  *frag ) {     ShaderNode * shader  =  new ShaderNode ( ) ;      if (shader  && shader - >initWithVertex (vert,frag ) )      {         shader - >autorelease ( ) ;          return shader ;      }     CC_SAFE_DELETE (shader ) ;      return  NULL ; } void ShaderNode :: loadShaderVertex ( const  char  *vert,  const  char  *frag ) {     CCGLProgram * shader  =  new CCGLProgram ( ) ;       shader - >initWithVertexShaderFilename (vert, frag ) ;    //载入着色器程序        //绑定attribute变量       shader - >addAttribute ( "a_position",  0 ) ;       shader - >addAttribute ( "a_color",  1 ) ;       shader - >link ( ) ;        //获取attribute变量标识       m_attributeColor  = glGetAttribLocation (shader - >getProgram ( ),  "a_color" ) ;       m_attributePosition  = glGetAttribLocation (           shader - >getProgram ( ),  "a_position" ) ;       shader - >updateUniforms ( ) ;        //获取uniform变量标识       m_uniformResolution  = glGetUniformLocation (shader - >getProgram ( ),  "resolution" ) ;       m_uniformTime  = glGetUniformLocation (shader - >getProgram ( ),  "time" ) ;       m_uniformTex0  = glGetUniformLocation (shader - >getProgram ( ),  "tex0" ) ;        //使用着色器程序       this - >setShaderProgram (shader ) ;       shader - >release ( ) ;   } void ShaderNode :: setColor (ccColor4F newColor ) {     color [ 0 ]  = newColor. r ;     color [ 1 ]  = newColor. g ;     color [ 2 ]  = newColor. b ;     color [ 3 ]  = newColor. a ; } bool ShaderNode :: initWithVertex ( const  char  *vert,  const  char  *frag ) {     loadShaderVertex (vert,frag ) ;     m_texture  = CCTextureCache :: sharedTextureCache ( ) - >addImage ( "HelloWorld.png" ) - >getName ( ) ;     setContentSize (CCSizeMake ( 1024, 768 ) ) ;     setColor (ccc4f ( 0.5, 0.5, 1, 1 ) ) ;     m_time  =  0 ;     scheduleUpdate ( ) ;      return  true ; } void ShaderNode :: update ( float dt ) {     m_time  + = dt ; } void ShaderNode :: setContentSize ( const CCSize & var ) {     CCNode :: setContentSize (var ) ;     m_resolution  = vertex2 (getContentSize ( ). width,getContentSize ( ). height ) ;     m_center. x  = m_resolution. x / 2 ;     m_center. y  = m_resolution. y / 2 ; } void ShaderNode :: draw ( ) {     CC_NODE_DRAW_SETUP ( ) ;        //传递uniform变量       CCGLProgram * shader  = getShaderProgram ( ) ;       shader - >setUniformLocationWith2f (m_uniformResolution, m_resolution. x,       m_resolution. y ) ;     shader - >setUniformLocationWith1i (m_uniformTex0,  0 ) ;      glUniform1f (m_uniformTime, m_time ) ;      //获取attribute变量       CCSize size  = this - >getContentSize ( ) ;        float w  = size. width ;        float h  = size. height ;       ccGLBindTexture2D (m_texture ) ;                //绑定纹理到槽位       glCopyTexImage2D (GL_TEXTURE_2D,  0, GL_RGBA,  0,  0, w, h,  0 ) ;  //截取屏幕数据到纹理       glEnableVertexAttribArray (m_attributePosition ) ;       glDisableVertexAttribArray (m_attributeColor ) ;        //传递attribute变量       GLfloat vertices [ 12 ]  =  {            0,  0,  //左下0         w,  0,  //右下1         w, h,  //右上2          0,  0,  //左下0          0, h,  //左上3         w, h,  //右上2      } ;       glVertexAttribPointer (m_attributePosition,  2, GL_FLOAT, GL_FALSE,  0, vertices ) ;       glVertexAttrib4fv (m_attributeColor, color ) ;        //绘制       glDrawArrays (GL_TRIANGLES,  0,  6 ) ;   }

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

1 2 3 4

ShaderNode * shader  = ShaderNode :: shaderNodeWithVertex ( "shader.vsh", "shader.fsh" ) ;         shader - >setContentSize (getContentSize ( ) ) ;         shader - >setColor (ccc4f ( 1, 1, 1.0, .5 ) ) ;         this - >addChild (shader, 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 ;   void main ( )   {       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 ;   const  float PI  =  3.1415926535897932 ;   const  float speed  =  0.2 ;   const  float speed_x  =  0.3 ;   const  float speed_y  =  0.3 ;     const  float intensity  =  3.0 ;   const  int steps  =  8 ;   const  float frequency  =  4.0 ;   const  int angle  =  7 ;    const  float delta  =  20.0 ;   const  float intence  =  400.0 ;   const  float emboss  =  0.3 ;     float col (vec2 coord )   {        float delta_theta  =  2.0  * PI  /  float (angle ) ;        float col  =  0.0 ;        float theta  =  0.0 ;        for  ( int i  =  0 ; i  < steps ; i ++ )        {         vec2 adjc  = coord ;     theta  = delta_theta  *  float (i ) ;     adjc. x  + =  cos (theta ) * time *speed  +  time  * speed_x ;           adjc. y  - =  sin (theta ) * time *speed  -  time  * speed_y ;           col  = col  +  cos ( (adjc. x * cos (theta )  - adjc. y * sin (theta ) )                *frequency ) *intensity ;        }      return  cos (col ) ; }   void main ( void )   {       vec2 p  =  (gl_FragCoord. xy )  / resolution. xy, c1  = p, c2  = p ;        float cc1  = col (c1 ) ;         c2. x  + = resolution. x /delta ;        float dx  = emboss * (cc1 -col (c2 ) ) /delta ;         c2. x  = p. x ;       c2. y  + = resolution. y /delta ;        float dy  = emboss * (cc1 -col (c2 ) ) /delta ;         c1. x  + = dx ;       c1. y  + = dy ;        float alpha  =  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

1 2 3 4 5 6 7 8 9

attribute vec4 a_color ;   attribute vec4 a_position ;   varying vec4 v_color ;   void main ( )   {       v_color  = a_color ;       gl_Position  = CC_MVPMatrix  * a_position ;   }

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

const GLchar  *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" ), #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",         source,      } ;

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