戰鬥陀螺 · 網頁版效能

最根本的問題是什麼

2026-08-12 | 整合 8/4–8/7 四份板子實測報告 | 撰寫:製程守門員(fable-5)、負責人覆核

CPU 上的 JavaScript 把每一幀的時間預算花光了。 最大的兩塊正是蔡點名的順序 —— 殭屍(算 26 隻怪的骨頭要擺哪,7.15ms)與 畫面(three.js 畫之前的準備工作,6.15ms),合計 66%。 而「不知道的部分」已經查完了,沒有黑洞;顯示晶片反而一直在等我們,只佔 4%。

一、一幀的錢花在哪

量測場面一幀 20.25ms(看比例,不看絕對值):

區塊內容毫秒佔比
殭屍
蔡排第 1 ✓
把遊戲狀態算成畫面。
算動畫播到第幾格 3.40 + 骨頭換算世界位置 2.55 + 送 GPU 0.75 + 其餘 1.95。
錢在「算」不在「送」(5.95 vs 0.95)。
7.15 35%
畫面
蔡排第 2 ✓
three.js 真正畫出來。
52% 是每次繪製前的材質/骨骼狀態準備、41% 是排序與可見性、7% 才是 GL。
真正的繪圖指令只佔 7% 的九分之一。
6.15 30%
其他 已拆完,最大單項 1.0–1.7ms。沒有大塊、沒有黑洞。 5.35 26%
遊戲邏輯 玩法本身的運算。 0.85 4%
等顯示晶片
蔡排第 3「未知」→ 已歸零 ✓
GPU 一直在等 CPU 餵資料。瓶頸完全不在顯示晶片。 0.75 4%
「未知」比想像中還小
8/6 的總報告原文:「每一毫秒都指認到具體的程式段落,沒有未知的黑洞」「再查下去不會再冒出新東西」。 先前糾結的「52% 未解」就是上表的「畫面」那塊 —— 已經拆到函式層級。

二、根本機制:貴的不是「幾隻」,是「每隻每幀做多少 CPU 工作」

這點有三組互相獨立的證據:

所以「少生一點怪」「合併繪製批次」這兩個直覺方向都已被實測否決。

三、最該立刻做的一件事

3.5ms 的優化早就寫好了,但 main 上一顆都沒有
八月做的那批渲染優化實測可把 32–37fps 拉到 38–42fps,它躺在別的分支上沒合進來。 這是唯一一件「不用再研究、搬過來就有」的。

四、離 60fps 還差多少

上線那 3.5ms 之後,還差 7.2–9.6ms。只剩兩條路:

路線做法能拿回風險
多執行緒把「畫面準備」整段搬到另一條執行緒≤ 6.15ms 現有 Worker 雛形自己要跑 22.7–29.3ms,要重做資料流才拿得到
WASM把「算骨頭」用更快的方式重寫~3ms 上界 3.3–4.1ms,實得倍率沒有實測

兩條加起來 9.15ms,缺口 7.2–9.6ms ⇒ 順利剛好夠,不順利差一點。而且「兩條相加」本身沒被驗證過。

⇒ 所以下一步不是直接投入,是 各花一天做原型買到真實數字

五、退路:鎖穩定 30fps(這條現在就成立)

目前 23.9–26.3ms,已經在 30fps 的預算(33.3ms)內。走這條的話,問題就換成消掉頓挫:

六、要決定的四件事

#項目成本玩家有感改幀率
1把已寫好的 3.5ms 合進 main搬運
2載入修正核可(已完成:−1.47 秒、−144MB,畫面已驗無差異)核可
3貼圖預載(消頓挫)2–3 天
4多執行緒/WASM 各做一天原型2 天買數字

1、2、3 玩家馬上有感但不改平均幀率;4 才碰得到 60fps。

七、這份報告自己的可信度

一、作者一開始漏讀了最權威的那份文件。8/6 的板子總報告(約 30 輪實測)是整個議題的權威文件,而前三份報告是在沒讀它的情況下寫的。根因是拿一個停在舊 commit 的工作目錄當 main 的代理 —— 那個目錄只有 11 份報告,main 實際有 21 份。發現後全部重寫。

核心結論(殭屍第一、per-object 成本是根本機制)碰巧存活,但作者自評「那是運氣不是流程」。

二、數字是 8/6 的。之後 main 前進了 300 多顆 commit,今天的版本沒有人量過。方向性結論穩,毫秒數要打時間折扣。

三、原始量測資料不在 repo 裡(在負責人本機與 gitignore 的工作區),所以這份整合報告無法複驗那些數字,只能轉述。

八、被否決的歧路(不用再想)