讓 cocos Q彈起來！物理流體之 LiquidFun 流體紋理 shader !

效果預覽

原理

物理粒子系統(tǒng)

引擎內置的 box2d.js 其實已經(jīng)攜帶了 google 的 liquidfun（但是沒有公開接口和適配）。并且引擎還對 box2d 做了一次適配，綁定到全局變量的 b2。

參考 https://github.com/google/liquidfun 中的其中一個demo。

粒子系統(tǒng)創(chuàng)建過程大概分為以下幾步

創(chuàng)建粒子系統(tǒng)定義 ParticleSystemDef (粒子半徑，強度等參數(shù))
通過粒子定義創(chuàng)建粒子系統(tǒng)
創(chuàng)建粒子分組定義 ParticleGroupDef (建立形狀，粒子類型，位置等)
通過粒子分組定義創(chuàng)建粒子分組

需要注意物理世界與引擎內的坐標有一個像素轉換的關系，轉成 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 這個組件去組織頂點紋理數(shù)據(jù)。并且使用 gl.POINTS 點渲染模式去渲染每個粒子。

主要思路如下：

根據(jù)節(jié)點位置創(chuàng)建粒子組的位置
創(chuàng)建粒子組后，計算相應的紋理坐標
每幀根據(jù)物理粒子的位置，更新粒子的頂點坐標

如何把物理世界的位置同步到 Cocos 中的位置？

參考引擎源碼的同步方法，大概也能寫出這個。

const?x?=?posBuff[i].x?*?PTM_RATIO;
const?y?=?posBuff[i].y?*?PTM_RATIO;
const?pt?=?this.meshRenderer.node.convertToNodeSpaceAR(cc.v2(x,?y));

紋理坐標計算這邊寫的比較簡單，沒有考慮節(jié)點各種變換和裁剪。(可以參考這篇文章中的紋理計算)

/**
*????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);