HTML5 Canvas 負荷テスト

フィッシュボウルベンチマーク

動く水槽でブラウザーのアニメーション処理能力を測定します。

Canvas 2D レンダリングをすばやく視覚的に確認したいときに、この fishbowl benchmark を使えます。魚の数を増やし、装飾効果を切り替え、FPS とフレーム時間を確認し、自動負荷モードで現在のブラウザーウィンドウに合う安定スコアを探せます。

インストール不要Canvas 2D自動負荷モードリアルタイム FPS 履歴
FPS

0.0

120

フレーム時間

0.0 ms

安定スコア

待機中

軽いGPU / CPU 負荷推定重い

負荷推定

0%

Fishbowl FPS 履歴

Waiting for samples
水槽アニメーションが FPS サンプルを生成するとグラフが表示されます。

見るべき指標

安定スコアと FPS グラフを合わせて、処理能力と安定性を確認します。

再現しやすい設定

魚数、効果、ブラウザー、ウィンドウサイズ、電源モードを固定します。

実用的な負荷

単一の合成カウンターより、実際のインタラクティブ Canvas に近い負荷です。

Fishbowl Benchmark が測るもの

Fishbowl Benchmark は、ダッシュボード、ゲーム、学習ツール、視覚効果でよく使われる HTML5 Canvas 2D のブラウザー経路に注目します。単一の重いシェーダーではなく、多数の小さなオブジェクトを毎フレーム描画して動かします。魚、泡、水草、粒子、光線、水面模様、岩、サンゴ、任意の軌跡が、CPU 側のシミュレーションと GPU によるラスタライズおよび合成を組み合わせた負荷を作ります。

FPS は 1 秒間に提示できるフレーム数を示します。フレーム時間は各フレームのコストを示します。短時間の高 FPS より、低く安定したフレーム時間のほうが継続的な滑らかさを判断しやすい指標です。安定スコアは、現在のセッションで 60 FPS 付近を維持できた最大の魚数です。

使い方

まず既定の魚数で数秒間動かし、グラフを確認します。フレーム時間が安定している場合はスライダーを上げるか、自動負荷を有効にして、性能が保たれる範囲で魚を追加します。2,000 匹ボタンは新しいデスクトップ向けの素早い負荷追加で、クリアは背景シーンだけの基礎コスト確認に使えます。

公平に比較するには、ブラウザーのウィンドウサイズ、表示スケール、電源モード、効果のオンオフをそろえます。フルスクリーンでは canvas のピクセル数が増えるため通常は負荷が高くなります。小さいウィンドウでは 60 FPS でより多くの魚を維持できる場合があります。

役立つ場面

この fishbowl benchmark は、ブラウザー、内蔵 GPU と単体 GPU、ノート PC の電源プロファイル、リモートデスクトップ、ドライバー更新の比較に使えます。重い volume shader benchmark とは補完関係にあり、水槽テストは 2D 描画命令と合成の挙動を、volume shader テストはフラグメントシェーダーの計算を見ます。

結果の読み方

最初の数秒はウォームアップとして扱ってください。ページ開始直後は、ブラウザーエンジンがコードをコンパイルしたり、バッファーを調整したり、合成経路を切り替えたりする場合があります。より信頼できる結果は、一瞬のピークではなく、グラフが十分なサンプルを集めたあとも安定している値です。軌跡や水面模様を有効にしたとき FPS が大きく下がる場合、純粋なピクセル描画だけでなく、描画命令、透明合成、過描画への感度が高い可能性があります。

最良の比較は万能スコアではなく、同じ設定で行う管理された前後比較です。

Last updated: May 8, 2026