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;
}
}%