creator 流体初探

1.效果

 

2.原理

利用camera+物理碰撞体+shader合作制作效果（思路参考白玉无冰博客的欢乐水杯）。

2.1 利用camera对流水的层级进行拍摄渲染到targetTexture。

2.2 利用物理碰撞体进行模拟水的物理形态。

2.3 利用shader进行对水的外部形态进行描绘

在这里先挖个坑，在水的数量达到600以上的时候，帧率会急剧下降。看debug分析是碰撞体太多，导致cpu的压力过大。还有就是水的形态模拟效果不是特别满意。后续我会继续研究看看有什么好的解决方案。

3.代码

3.1相机部分

        let waterRenderTexture = new cc.RenderTexture();
        waterRenderTexture.initWithSize(this.node.width,this.node.height);
        let water_sf = new cc.SpriteFrame();
        water_sf.setTexture(waterRenderTexture);

        this.water_camera.targetTexture = waterRenderTexture;

3.2shader部分

void main () {
    vec4 o = vec4(1, 1, 1, 1);

    #if USE_TEXTURE
      CCTexture(texture, v_uv0, o);
    #endif

    o *= v_color;

    ALPHA_TEST(o);
    if(o.b > 0.4){
      o = vec4(0.0,0.0,1.0,1.0);
    }else{
      o.a = 0.0;
    }

    gl_FragColor = o;
  }
}%