M3/M4メッシュ負荷測定

測定日: 2026-05-13

目的

M3/M4で要求している5,000頂点 / 20,000頂点の描画・変形パイプライン負荷を継続確認する。現時点では実GPU描画FPSではなく、CPU変形計算とPixiJSへ渡す前の頂点/UVバッファ更新相当をNode.js上で測定する。

実装場所

scripts/benchmark-mesh-pipeline.mjs
package.json の npm run benchmark:mesh
開発者向け実描画ベンチ: アプリ起動後に ?bench=pixi を付けて開く

測定条件

1920 x 1080 キャンバス相当。
180フレーム。
5,000頂点は10パーツ、20,000頂点は20パーツへ分割。
各フレームで全頂点へ簡易変形を適用し、Float32Array の位置/UVバッファを更新する。
メモリ使用量はNode.jsの process.memoryUsage().heapUsed を記録する。

2026-05-13 測定結果

条件	パーツ	頂点	三角形	推定FPS	平均フレームms	変形計算ms	バッファ更新ms	heapUsed MB	判定
MVP目標	10	5,000	9,120	3571.87	0.28	0.24	0.04	15.12	60 FPS以上
最終目標	20	20,000	37,480	1090.34	0.92	0.73	0.19	25.68	60 FPS以上

判断

CPU変形と描画転送前のバッファ構築は20,000頂点でも60 FPS相当を上回ったため、現時点でWorker/GPU移行は必須にしない。

ただし、この測定はWebView上のPixiJS実描画、GPUドライバ、OS、デバイス差を含まない。20,000頂点の実GPU描画で60 FPS未満になった場合は、まず頂点差分補間とバッファ更新をWeb Workerへ移し、それでも不足する場合にPixiJSカスタムシェーダーまたはGPU側変形を検討する。GPU方式を検討する場合もCSPに unsafe-eval は追加しない。

残課題

Tauri WebView上で ?bench=pixi を開くPixiJS実描画FPSの手動記録はv0.1完了後に回す。
GPU時間は現行ベンチでは取得していないため、必要になった時点でWebGL timer query相当の可否を確認する。

PixiJS実描画ベンチ

通常ユーザー体験を邪魔しないよう、実描画ベンチは通常ナビゲーションには表示しない。開発時に以下のURLで起動する。

http://127.0.0.1:1420/?bench=pixi

Tauri WebView上で確認する場合は、開発サーバー起動後に同じクエリ付きURLを表示する。リリースビルド相当の確認では、Tauri本番ビルド内で同じ画面を開いて測定する。

測定対象は以下。

条件	パーツ	頂点	測定内容
MVP目標	10	5,000	PixiJS Meshを実描画した状態のFPS、平均フレームms、JS heap
最終目標	20	20,000	PixiJS Meshを実描画した状態のFPS、平均フレームms、JS heap

画面上の 測定開始 を押すと、各条件を約3秒ずつ描画して結果を表示する。performance.memory が使える環境ではJS heapを表示し、使えない環境では 取得不可 とする。

判定は60 FPS以上を目安とする。20,000頂点で60 FPS未満になった場合は、Nodeベンチ結果と比較し、CPU変形ではなく実描画側が律速かを確認する。そのうえで、まず頂点差分補間とバッファ更新のWorker化を検討し、それでも不足する場合にPixiJSカスタムシェーダーまたはGPU側変形を検討する。CSPに unsafe-eval は追加しない。