隱祕的物理粒子系統與渲染 ！Cocos Creator LiquidFun !

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

效果預覽

視頻預覽

原理

物理粒子系統

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

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

粒子系統建立過程大概分爲如下幾步

• 建立粒子系統定義 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 點渲染模式去渲染每一個粒子。

主要思路以下：

• 根據節點位置建立粒子組的位置
• 建立粒子組後，計算相應的紋理座標
• 每幀根據物理粒子的位置，更新粒子的頂點座標

如何把物理世界的位置同步到 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));

紋理座標計算這邊寫的比較簡單，沒有考慮節點各類變換和裁剪。(能夠參考這篇文章中的紋理計算)

/**
*    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教程 對你有幫助。

知識不過是潛在的力量，只有將它組織成明確的行動計劃，並指引它朝着某個明確目的發揮做用的時候，知識才是力量。

更多精彩

█ 原創文章導航 █

---

原文連接