如何在Cocos2d-x中集成LiquidFun（二）

本文翻译自《Integrating LiquidFun with Cocos2d-x: Part II》

在第一部分中，介绍了如何在Cocos2d-x中集成LiquidFun。本文（第二部分）将介绍如何使用一个基本的水效果来渲染粒子效果。

第一部分中，使用glDrawArrays(GL_POINTS, 0, total);来绘制粒子系统。这个函数可用于绘制粒子，但是不能绘制“水”。

绘制“水”需要更复杂的渲染算法，就如这个例子中使用的算法。本文将介绍一个类似的算法。

算法功能

1.选择一个白色的圆圈，并使其模糊化

• 你可以在运行时使这个圆圈模糊化

• 你也可以在离线时使其模糊化

2.创建一个新的帧缓存（例如，一个用于渲染的off-screen缓冲区）

3.在新创建的帧缓冲区，使用上述模糊化的圆圈渲染例子效果

4.在主颜色缓冲区使用一个阈值渲染帧缓存。阈值可以是这样的：

• 如果pixel.r < 0.1, 去掉像素（不绘制这个像素）

• 如果pixel.r < 0.2, 绘制蓝色像素（作为边界）

• 其他，绘制白色像素（作为水的内部）

  
  

如何使用Cocos2d-x和LiquidFun实现

对第一部分中的LFParticleSystemNode进行扩展：

首先在LFParticleSystemNode类中添加“off-screen”帧缓冲。Cocos2d-x中在RenderTexture类中创建这个“off-screen”缓冲区。

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

bool  LFParticleSystemNode::init(b2ParticleSystem* particleSystem,  float  ratio) {      // create an off-screen frame-buffer with the size of the screen      auto s = Director::getInstance()->getWinSize();      _renderTexture = cocos2d::RenderTexture::create(s.width, s.height, Texture2D::PixelFormat::RGBA8888);      this ->addChild(_renderTexture);      _renderTexture->setAnchorPoint(Point::ANCHOR_MIDDLE);      _renderTexture->setPosition(Point(s.width/2, s.height/2));        // Change the default shader. Use a the threshold shader      auto program = GLProgram::createWithByteArrays(_renderTextureShaderVert, _renderTextureShaderFrag);      auto programState = GLProgramState::getOrCreateWithGLProgram(program);      programState->setUniformFloat( "u_threshold_discard" , 0.15);      programState->setUniformFloat( "u_threshold_border" , 0.3); }

另外，正如之前提到的，RenderTexture（off-screen帧缓冲）需要一个着色器阈值。定义如下：

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

varying vec4 v_fragmentColor; varying vec2 v_texCoord; uniform  float  u_threshold_discard; uniform  float  u_threshold_border;   void  main() {      vec4 color = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);      if ( color.r < u_threshold_discard)      // black or discard      color = vec4(0,0,0,0);      else  if ( color.r < u_threshold_border)      // blue for the border      color = vec4(0.2,0.2,0.9,1);      else      // white for the center      color = vec4(1,1,1,1);      gl_FragColor = color; }

在运行时定义uthresholddiscard和uthresholdborder的值。这个例子中，值分别为0.15和0.3。

其次，在RenderTexture类中渲染粒子：

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

void  LFParticleSystemNode::draw(Renderer *renderer,  const  Mat4 &transform, uint32_t transformFlags) {      // tell RenderTexture to "capture" the particles      _renderTexture->beginWithClear(0,0,0,0);        _customCommand.init(_globalZOrder);      _customCommand.func = CC_CALLBACK_0(LFParticleSystemNode::onDraw,  this , transform, transformFlags);      renderer->addCommand(&_customCommand);        // tell RenderTexture to stop "capturing" the particles      _renderTexture->end(); }

运行结果：

进一步改善

以上所描述的是渲染水的简单算法。但是，更高级和渲染效果更好的算法可以通过同样的原则实现：

• 在off-screen缓冲区渲染模糊（或其他效果）的粒子。

• 使用特殊的着色器渲染off-screen缓冲区。

  
  

Google提供的官方例子“LiquidFun–EyeCandy”使用了更复杂的着色器，包括照明、折射以及背景扭曲。

在Cocos2d-x 3.1及以上版本中自定义着色器

Cocos2d-x 3.1提供了一个自定义着色器的新方法。与3.0版本中的GLProgram类似，但是如果你想要添加自定义属性或者外观，不需要使用GLProgram类，你可以使用GLProgramState类定义。

GLProgram类仍可用，但是推荐使用GLProgramState类，如下：

1 2 3 4 5 6 7 8

// you create a GLProgram like in v3.0 GLProgram* glprogram = GLProgram::createWithByteArrays(_particleShaderVert, _particleShaderFrag);   // and then you create a GLProgramState with it GLProgramState* glprogramstate = GLProgramState::getOrCreateWithGLProgram(glprogram);   // attach the ProgramState to a Node sprite->setGLProgramState( glprogramstate );

接下来就是使用GLProgramState API来添加自定义外观或者属性。

添加自定义外观：

1 2 3 4 5 6 7 8 9 10

// setting a float glprogramstate->setUniformFloat( "u_name_1" , 0.15f);   // setting a vec2 glprogramstate->setUniformVec2( "u_name_2" , Vec2(0.2, 0.3));   // setting a callback glprogramstate->setUniformCallback( "uniform_name_2" , [](GLProgram* program, Uniform* uniform){    glUniform4fv( uniform->location, 10, _buffer); });

添加自定义属性：

1 2 3 4 5 6 7

// setting an attribute pointer glprogramstate->setVertexAttribPointer( "a_position" , 2, GL_FLOAT, GL_FALSE, 0, _particleSystem->GetPositionBuffer());   // setting a callback glprogramstate->setVertexAttribCallback( "a_color" , [](VertexAttrib* vertexAttrib) {    glVertexAttrib4f(vertexAttrib->index, 0.2, 0.8, 0.7, 1.0); });

下载并运行例子

复制 Cocos2d-x Samples 仓库，并按照其向导进行。然后运行“LiquidFun – EyeCandy” demo。

1	$ git clone https: //github.com/cocos2d/cocos2d-x-samples.git

按照此网站说明，然后运行：

1 2	$ cd samples/LiquidFun-EyeCandy/proj.ios_mac $ open LiquidFun-EyeCandy.xcodeproj

PS：以上为全文翻译，有不够准确的地方，敬请勘误。