【Cocos2d-x】水面效果的2D实现（一）

1. 概述

关于水面效果的实现方法，google一下非常之多，目前的很多游戏也有非常好的呈现，其中最令我印象深刻的当数《Crysis》。

自己由于工作原因接触过一段时间的CryEngine，对于Crysis的水面渲染有一点点的了解，当然其中细节非常复杂，但就基本原理来讲，就是将整块水面细分成适当粒度的三角面，然后通过动态改变各个三角面的顶点位置来模拟水面的运动：

就在我们接触比较多的Cocos2d-x引擎中，有现成的使用这种原理来实现的水面效果——Waves3D，有兴趣的朋友可以仔细看一看~不过正是由于Waves3D使用了这种3D方式来实现，所以其与Cocos2d-x中其他的不少“2D”元素（譬如Sprite）协作起来就多少有些不顺畅的感觉，再加上三角面切分的粒度问题，有时总会让人感觉效果略有生硬粗糙，还有的就是Waves3D使用CPU计算来实现效果，切分粒度细致起来CPU负担很重，白白浪费了很适合这项工作的GPU~（Waves3D其实还有一个2D版本：Waves，可惜其并不能解决上面提到的后两个问题~）

那么还有没有其他方法来实现水面效果，并且能够克服上面所提到的这些问题呢？其实答案很简单，想必很多朋友也想到了，那就是使用Shader。

2. 方法

使用Shader来实现2D水面效果，网上亦有不少资料，在此我也仅仅是简单的按照自己的理解重述一遍而已，示例代码基于Cocos2d-x-3.3rc0，源码内容其实就是个简单的HelloWorld，唯一值得一提的就是WaterEffectSprite类型，在此完整列出：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//WaterEffectSprite.h   #ifndef __WATER_EFFECT_SPRITE_H__ #define __WATER_EFFECT_SPRITE_H__   #include "cocos2d.h"   USING_NS_CC;   class  WaterEffectSprite :  public  Sprite { public :      static  WaterEffectSprite* create( const  char  *pszFileName); public :      bool  initWithTexture(Texture2D* texture,  const  Rect&  rect);      void  initGLProgram(); };   #endif

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

//WaterEffectSprite.cpp   #include "WaterEffectSprite.h"   WaterEffectSprite* WaterEffectSprite::create( const  char  *pszFileName) {      auto pRet =  new  (std:: nothrow ) WaterEffectSprite();      if  (pRet && pRet->initWithFile(pszFileName)) {          pRet->autorelease();      }      else  {          CC_SAFE_DELETE(pRet);      }        return  pRet; }   bool  WaterEffectSprite::initWithTexture(Texture2D* texture,  const  Rect& rect) {      if  (Sprite::initWithTexture(texture, rect)) { #if CC_ENABLE_CACHE_TEXTURE_DATA          auto listener = EventListenerCustom::create(EVENT_RENDERER_RECREATED, [ this ](EventCustom* event) {              setGLProgram(nullptr);              initGLProgram();          });            _eventDispatcher->addEventListenerWithSceneGraphPriority(listener,  this ); #endif          initGLProgram();          return  true ;      }        return  false ; }   void  WaterEffectSprite::initGLProgram() {      auto fragSource = (GLchar*)String::createWithContentsOfFile(          FileUtils::getInstance()->fullPathForFilename( "Shaders/WaterEffect.fsh" ).c_str())->getCString();      auto program = GLProgram::createWithByteArrays(ccPositionTextureColor_noMVP_vert, fragSource);        auto glProgramState = GLProgramState::getOrCreateWithGLProgram(program);      setGLProgramState(glProgramState); }

WaterEffectSprite的内容其实非常简单，仅仅是继承了Sprite类型然后将其fragmentshader改写为使用WaterEffect.fsh，而WaterEffect.fsh便是我们需要真正实现效果逻辑的地方~

OK，准备工作结束，我们可以屡起袖子，进入正题了。

1）“旋转”像素

第一种方法类似于“旋转”像素，相关的解释可以看看这里，另外这里也有一份HLSL实现，使用GLSL编写，大概是这个样子：

1 2 3 4 5 6 7 8 9 10 11

varyingvec4v_fragmentColor; varyingvec2v_texCoord; voidmain(){      floattimeFactor=1;      floattexFactor=10;      floatampFactor=0.01f;      //just like rotate pixel according to texture coordinate      v_texCoord.x+= sin (CC_Time.y*timeFactor+v_texCoord.x*texFactor)*ampFactor;      v_texCoord.y+= cos (CC_Time.y*timeFactor+v_texCoord.y*texFactor)*ampFactor;      gl_FragColor=texture2D(CC_Texture0,v_texCoord)*v_fragmentColor; }

其中，timeFactor可以控制水波运动的快慢，texFactor可以控制水波运动的“粒度”，ampFactor则可控制水波运动的幅度，给张截图：

当然，由于我们单独控制UV两个方向的纹理坐标偏移，所以相关参数自然也可以不同，就像这样：

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

varyingvec4v_fragmentColor; varyingvec2v_texCoord; voidmain(){      floattimeFactorU=1;      floattexFactorU=10;      floatampFactorU=0.01f;      floattimeFactorV=1;      floattexFactorV=10;      floatampFactorV=0.01f;      v_texCoord.x+= sin (CC_Time.y*timeFactorU+v_texCoord.x*texFactorU)*ampFactorU;      v_texCoord.y+= cos (CC_Time.y*timeFactorV+v_texCoord.y*texFactorV)*ampFactorV;      gl_FragColor=texture2D(CC_Texture0,v_texCoord)*v_fragmentColor; }

如果再将这些参数变为uniform，那么扩展性就更强了。

2）“偏移”像素

第二种方法其实类似于3D方式的水面渲染，首先我们计算水面上任意一点的“高度”，然后将其直接映射到对应贴图坐标的偏移中，方法很简单，直接按照“高度”值成比例做偏移即可（此处我不是非常肯定，但感觉上这种映射方法似乎是平行映射（parallaxmapping）的一种简单应用，熟悉的朋友可以告知一下）（这里和这里也有相关的介绍）

相关shader代码大概是这个样子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

varyingvec4v_fragmentColor; varyingvec2v_texCoord; //get wave height based on distance-to-center floatwaveHeight(vec2p){      floattimeFactor=4.0;      floattexFactor=12.0;      floatampFactor=0.01;      floatdist=length(p);      returncos(CC_Time.y*timeFactor+dist*texFactor)*ampFactor; } voidmain(){      //convertto[-1,1]      vec2p=-1.0+2.0*v_texCoord;      vec2normal=normalize(p);      //offset texcoord along distdirection      v_texCoord+=normal*waveHeight(p);      gl_FragColor=texture2D(CC_Texture0,v_texCoord)*v_fragmentColor; }

其中timeFactor、texFactor和ampFactor的含义与第一种方法相同（其实从正弦曲线函数y=Asin(ωx+φ)中参数含义的角度可以更好的理解：）），同样给张截图：

与第一种方法一样，我们也可以以上面的代码为基础，稍稍做些扩展，简单的譬如改变水波的中心位置：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

varyingvec4v_fragmentColor; varyingvec2v_texCoord; //get wave heigh tbased on distance-to-center floatwaveHeight(vec2p){      floattimeFactor=4.0;      floattexFactor=12.0;      floatampFactor=0.01;      floatdist=length(p);      returncos(CC_Time.y*timeFactor+dist*texFactor)*ampFactor; } voidmain(){      vec2center=vec2(0,0);      vec2p=(v_texCoord-center)*2.0;      vec2normal=normalize(p);      //offset texcoord along distdirection      v_texCoord+=normal*waveHeight(p);      gl_FragColor=texture2D(CC_Texture0,v_texCoord)*v_fragmentColor; }

再来张截图：

复杂一些的还有引入简单的光照：

基本思路就是通过水面任意点的“高度”变化计算出该点的normal值，接着就是普通的光照计算了（示例代码仅供参考）。

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

varying vec4 v_fragmentColor;  varying vec2 v_texCoord;   // get wave height based on distance-to-center float  waveHeight(vec2 p) {      float  timeFactor = 4.0;      float  texFactor = 12.0;      float  ampFactor = 0.01;      float  dist = length(p);      return  cos (CC_Time.y * timeFactor + dist * texFactor) * ampFactor; }   // get point fake normal vec3 waveNormal(vec2 p) {      vec2 resolution = vec2(480, 320);      float  scale = 240;      float  waveHeightRight = waveHeight(p + vec2(2.0 / resolution.x, 0)) * scale;      float  waveHeightLeft = waveHeight(p - vec2(2.0 / resolution.x, 0)) * scale;      float  waveHeightTop = waveHeight(p + vec2(0, 2.0 / resolution.y)) * scale;      float  waveHeightBottom = waveHeight(p - vec2(0, 2.0 / resolution.y)) * scale;            vec3 t = vec3(1, 0, waveHeightRight - waveHeightLeft);      vec3 b = vec3(0, 1, waveHeightTop - waveHeightBottom);      vec3 n = cross(t, b);            return  normalize(n); }   void  main() {      vec2 p = -1.0 + 2.0 * v_texCoord;      vec2 normal = normalize(p);            v_texCoord += normal * waveHeight(p);            vec4 lightColor = vec4(1, 1, 1, 1);      vec3 lightDir = vec3(1, 1, 1);      gl_FragColor = texture2D(CC_Texture0, v_texCoord) * v_fragmentColor * lightColor * max(0, dot(lightDir, waveNormal(p)));      gl_FragColor.a = 1; }

这里仅仅引入了一个平行光，效果有限，不过同样给张截图：

3）凸凹映射

第三种方法可能大家都耳熟能详了，就是3D渲染中常见的凸凹映射，其中法线贴图可能是最常见的一种凸凹映射技术了，在此我们亦可以仿照3D的做法，将法线贴图映射至普通的Sprite之上，以达到模拟水面的效果。

当然，之前所列出的WaterEffectSprite类需要做些简单修改，大抵是改写一下其中的initGLProgram方法：

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

void  WaterEffectSprite::initGLProgram() {      auto fragSource = (GLchar*)String::createWithContentsOfFile(          FileUtils::getInstance()->fullPathForFilename( "Shaders/WaterEffect.fsh" ).c_str())->getCString();      auto program = GLProgram::createWithByteArrays(ccPositionTextureColor_noMVP_vert, fragSource);        auto glProgramState = GLProgramState::getOrCreateWithGLProgram(program);      setGLProgramState(glProgramState);        auto normalMapTextrue = TextureCache::getInstance()->addImage( "Textures/water_normal.jpg" );      Texture2D::TexParams texParams = { GL_LINEAR, GL_LINEAR, GL_REPEAT, GL_REPEAT };      normalMapTextrue->setTexParameters(texParams);      getGLProgramState()->setUniformTexture( "u_normalMap" , normalMapTextrue); }

我们还需要准备一张水面Normal贴图，我使用的大概是这么一张：

GLSL代码大致上简单的实现了一下水面的折射效果以及简单的normalUV动画（代码仅作参考）

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

varying vec4 v_fragmentColor; varying vec2 v_texCoord;   uniform sampler2D u_normalMap;   vec3 waveNormal(vec2 p) {      vec3 normal = texture2D(u_normalMap, p).xyz;      normal = -1.0 + normal * 2.0;      return  normalize(normal); }   void  main() {      float  timeFactor = 0.2;      float  offsetFactor = 0.5;      float  refractionFactor = 0.7;            // simple UV animation      vec3 normal = waveNormal(v_texCoord + vec2(CC_Time.y * timeFactor, 0));            // simple calculate refraction UV offset      vec2 p = -1 + 2 * v_texCoord;      vec3 eyePos = vec3(0, 0, 100);      vec3 inVec = normalize(vec3(p, 0) - eyePos);      vec3 refractVec = refract(inVec, normal, refractionFactor);      v_texCoord += refractVec.xy * offsetFactor;            gl_FragColor = texture2D(CC_Texture0, v_texCoord) * v_fragmentColor; }

同样给张截图：

当然，我们还可以继续引入光照（例如高光）等元素来加强水面效果的显示，不过3D味道也会愈来愈浓，有兴趣的朋友可以深入尝试一下。

4）其他

我所见到的其他2D水面实现方法大抵都是上面方法的一些变种，如果你还知道其他方式，就请不吝告之一下吧~

3. 后记

OK，讲了不少东西，也该停一停了，这次讲了一些我自己归类为WaterEffect的2D水面效果实现方法，另外一类我觉得比较重要的还有个人称为RippleEffect的2D水面效果，有机会下次再随便讲讲。

活动推广：

【线上活动】两小时学会用Cocos2d-lua 开发游戏

【教程征集令】Cocos引擎中文官网有奖征集优秀原创Cocos教程 奖品丰厚！

来源网址：http://blog.csdn.net/tkokof1/article/details/40819225