✨ 特效 Particle:網頁 vs Unity 完整分析

2026-07-20|製程守門員|功能差異+效能差異+本專案現況(查證 code)+板機預算建議
TL;DR 三句話:
1. 功能面:Unity 贏在「編輯器工作流」——粒子行為兩邊都做得出來,差的是 Unity 調特效像捏黏土、網頁調特效像寫程式(本專案用 Prefab JSON 補了一半)。
2. 效能面:真正的殺手兩邊相同——不是粒子數量,是 overdraw(半透明疊畫)。CPU 模擬 Unity 快 3~10 倍,但我們的量級(數百顆)兩邊都毫無壓力。
3. 本專案:已有三層特效架構(CPU 粒子池+烘焙快取+shader),符合板機預算;缺的是「特效編輯器級的製作效率」,要大量產特效時再補。

一、功能對照:Unity Shuriken 的東西,網頁怎麼做

Unity Shuriken 模組網頁等價做法成本評價
Emission/Shape(發射率、發射形狀)手寫發射邏輯(本專案:GameUtils.getParticle 物件池+spawn 參數)要寫碼 邏輯簡單但沒視覺化調參
Velocity/Force over Lifetime每幀更新 vx/vy+重力/阻力(本專案已有)等價
Color/Size over Lifetime依 life/maxLife 插值(本專案已有)等價
渲染(Billboard/拉伸)2D canvas 直畫 或 WebGL 點精靈/InstancedMesh(本專案 SpriteRenderer instancing)等價
Sub Emitters(死亡再爆一波)手寫串接(本專案 Prefab JSON 的 SubEffect 就是這概念,16 個子特效檔)要寫碼
Trails(拖尾)歷史點列+漸隱(本專案 BulletTopTrail、afterimages 已有)等價
Noise(亂流)手寫 noise 函式擾動速度要寫碼
Collision(粒子碰撞)手寫(通常只做地板反彈這種簡化版) 完整版不划算,遊戲少用
Lights/Shadow per particle基本不做(假光暈貼圖代替)不做 板機上 Unity 也不該開
VFX Graph(GPU 百萬粒子)GPU 粒子(shader 模擬,如本專案 ShockwaveFxAdapter 的路線延伸)要寫 shader 都做得到,門檻高
編輯器即時調參+預覽沒有原生等價物——本專案以 Prefab JSON+PrefabViewer 補(改 JSON 熱更新預覽)最大差距 見第二節

二、真正的差別不是「做不做得到」,是「製作流程」

Unity:美術/企劃自己在 Inspector 拉曲線、即時預覽,一個特效 30 分鐘迭代十版,不用工程師。

網頁:原生沒有特效編輯器——每個特效都是程式碼或資料檔。本專案的緩解方案(已存在):特效參數抽成 Prefab JSON(Effect/SubEffect 分類、火花/碎片/拖尾/飄字都是資料檔)+ PrefabViewer 預覽頁+ JSON 熱更新。等於自建了一個「陽春版 Shuriken」——調參數不用改程式,但沒有拉曲線的舒適度。

結論:少量特效(現況)夠用;若之後要「美術大量產特效」,兩條升級路:①擴充 PrefabViewer 成曲線編輯器(自建,可控)②引入 three.quarks 這類含編輯器的網頁粒子引擎(現成,但要遷移現有特效,牴觸 R12 視覺零改變原則)。建議維持現況,量產需求出現才升級①。

三、效能差異(誠實版)

面向Unity網頁對本專案的實際影響
CPU 粒子模擬C#+Burst/Jobs 多執行緒,手機上 1 萬顆輕鬆JS 單執行緒,A11 級板子預算約 2000~5000 顆/幀無感——遊戲峰值數百顆,連 JS 預算的 1/10 都用不到
GPU 粒子VFX Graph 百萬級shader 模擬同樣百萬級(WebGL2 夠用)用不到這個量級
Overdraw(真殺手)兩邊完全相同的物理限制:行動 GPU 是 fill-rate bound,大張半透明貼圖疊 5 層=每像素畫 5 次。粒子特效卡頓的元兇 90% 是這個,不是粒子數板機預算的重點,見第五節
Draw calls自動 batching手動 instancing/atlas(本專案已做,健康值 ~30)已在紅線管理下
每幀資料上傳引擎代管自己管——本專案紅線「穩態貼圖上傳=0」+烘焙快取已閉環,且比 Unity 慣例更嚴
GC 卡頓C# GC(Unity 也要管)JS GC——爆量 new 物件會掉幀。本專案已用物件池(getParticle 重用)已閉環

四、本專案特效架構現況(查證 code)

五、板機(A11 級)特效效能預算建議

項目預算理由
同幀活躍粒子數≤ 800 顆(警戒 500)JS 模擬預算的 1/5,留餘裕給遊戲邏輯
全螢幕級半透明疊層≤ 2 層同時overdraw 是 fill-rate 殺手;大面積效果優先走 shader/烘焙檔位
單一爆發特效粒子≤ 60 顆/次視覺上 40 顆和 100 顆差異小,成本差 2.5 倍
粒子貼圖進 atlas fx/ 組、單張 ≤256維持 instancing 單 draw call
驗收特效滿場景時 FPS 降幅 ≤ 15%+紅線指標不破板機實測時列入降級檔位調校
給你的決策建議:特效系統不需要改架構——現有三檔位+紅線在板機語境是正確設計。要排進計畫的只有兩件小事:①粒子預算數字納入 perfConfig 降級檔位(板機實測時一起調,含在既有的 1~2 日)②之後若企劃要「大量新特效」,先做 PrefabViewer 曲線編輯器升級(另估 3~5 日),不引外部粒子引擎。