egret_渲染優化-spine粒子混合

之前的 spine 動畫, 優化是的圖集, 這裡主要是 spine 中的粒子

緣起: 在項目中發現了某個 spine 粒子特效 特别費 dc, 看了下 spine相關檔案, 法線隻是使用一個小圖, 預期中應該是 一個批次就可以繪制完成. 遂 詳細看了下 spine 的 json 檔案. 發現使用了一個混合

"blend": "additive"

粒子主要是很多個 渲染節點 組成的, 如果所有節點都是引用同一個圖的話. 且是相鄰節點, 一般是一個批次可以繪制完成, 但是有了 混合Blend ,就會中斷合批. 一個粒子特效如果又15 個粒子組成的話, 那麼15個批次, 那麼n個這個粒子的話就有 n x 15 也是有點小恐怖的

是以如果使用 spine 粒子動畫的話, 要慎用 blend, … 等 會打斷合批的操作. 這是個坑

直接在 egret.web.js 中的

WebGLDrawCmdManager.prototype.pushSetBlend

斷點可以看到調用棧

spine 的 xxx.json

...
"slots": [
    { "name": "4", "bone": "12", "attachment": "1", "blend": "additive" }, // 慎用 blend
    { "name": "9", "bone": "27", "attachment": "1", "blend": "additive" },
    { "name": "3", "bone": "9", "attachment": "1", "blend": "additive" },
...