让
cocosQ弹起来！物理流体之LiquidFun流体纹理shader!node
效果预览
原理
物理粒子系统
引擎内置的 box2d.js 其实已经携带了 google 的 liquidfun（可是没有公开接口和适配）。而且引擎还对 box2d 作了一次适配，绑定到全局变量的 b2。git
参考 https://github.com/google/liquidfun 中的其中一个demo。github
粒子系统建立过程大概分为如下几步web
-
建立粒子系统定义 ParticleSystemDef(粒子半径，强度等参数) -
经过粒子定义建立粒子系统 -
建立粒子分组定义 ParticleGroupDef(创建形状，粒子类型，位置等) -
经过粒子分组定义建立粒子分组
须要注意物理世界与引擎内的坐标有一个像素转换的关系，转成 Cocos Creator中的代码大概以下。微信
const phyMgr = cc.director.getPhysicsManager();
const world = phyMgr['_world'];
const psd = new b2.ParticleSystemDef();
psd.radius = PSD_RADIUS / PTM_RATIO; //每一个粒子的半径
psd.elasticStrength = 0.5;
particleSystem = world.CreateParticleSystem(psd);
const box = new b2.PolygonShape();
const pgd = new b2.ParticleGroupDef();
box.SetAsBox(this.meshRenderer.node.width / 2 / PTM_RATIO, this.meshRenderer.node.height / 2 / PTM_RATIO);
pgd.flags = b2.ParticleFlag.b2_elasticParticle;
pgd.groupFlags = b2.ParticleGroupFlag.b2_solidParticleGroup;
pgd.shape = box;
const particleGroup = particleSystem.CreateParticleGroup(pgd);
渲染
本次采用 cc.MeshRenderer 这个组件去组织顶点纹理数据。而且使用 gl.POINTS 点渲染模式去渲染每一个粒子。app
主要思路以下：编辑器
-
根据节点位置建立粒子组的位置 -
建立粒子组后，计算相应的纹理坐标 -
每帧根据物理粒子的位置，更新粒子的顶点坐标
如何把物理世界的位置同步到 Cocos 中的位置？ide
参考引擎源码的同步方法，大概也能写出这个。性能
const x = posBuff[i].x * PTM_RATIO;
const y = posBuff[i].y * PTM_RATIO;
const pt = this.meshRenderer.node.convertToNodeSpaceAR(cc.v2(x, y));
纹理坐标计算这边写的比较简单，没有考虑节点各类变换和裁剪。(能够参考这篇文章中的纹理计算)学习
/**
* t
* l r
* b
*/
const u = this._lerp(uv_l, uv_r, (pt.x + texture.width / 2) / texture.width);
const v = this._lerp(uv_b, uv_t, (pt.y + texture.height / 2) / texture.height);
其余
简单搬运 liquidfun demo，未测试性能，仅供参考学习。项目代码在 2.4.x 目录下。
小结
box2d+LiquidFun！ParticleSystem！shader！
以上为白玉无冰使用 Cocos Creator v2.4 实现 "流体之 LiquidFun 流体纹理 shader" 的技术分享。但愿这篇 Cocos Creator教程 对你有帮助。
知识不过是潜在的力量，只有将它组织成明确的行动计划，并指引它朝着某个明确目的发挥做用的时候，知识才是力量。
更多精彩
完整代码(详见readme):
https://github.com/baiyuwubing
点击“阅读原文”查看精选导航
“点赞“ ”在看” 鼓励一下▼
本文分享自微信公众号 - 白玉无冰（lamyoung-com）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。