[WEB Add] 3D WebGL Benchmark ─ Three.jsで数百万ボクセルを描画するGPUベンチマーク

はじめに

Webブラウザ上で、グラフィックボード（GPU）を限界まで追い込んだことはありますか？

一般的なWeb開発では「いかに軽く、低スペック端末でも動くか」を追求しますが、今回は完全に逆のアプローチを取りました。

「最新のハイエンドGPUをブラウザ上で本気で泣かせる」ことを目的としたベンチマークアプリ「3D WebGL Benchmark v1.0.1」を作成・公開しました。

動画（YouTube）：


スクリーンショット：

どんなアプリ？

ブラウザを開き、「START BENCHMARK」を押すだけです。

ノイズ関数（Simplex Noise）によって生成されたプロシージャルなボクセル地形が、100個、1万個、100万個…と段階的に増殖していきます。

ただブロックを描画するだけでなく、すべてのブロックに対してリアルタイムの影（Shadow Map）の演算を行っています。ブロック数が数百万個を超えると、いかに強力なGPUでも悲鳴を上げ始めます。
フレームレート（FPS）が30を下回った時点での「最大描画ブロック数」があなたのスコアになります。

実装の技術的なポイント

通常の THREE.Mesh を数百万個配置すれば、ブラウザは一瞬でクラッシュします。
これを突破するために以下の技術を使用しています。

  • InstancedMesh による 1 Draw Call 描画: 数百万個のブロックを、CPUからGPUへの「たった1回の命令」で描画しています。これによりCPUのボトルネックを排除し、純粋なGPU性能のテストを実現しました。
  • フラクタルブラウン運動 (FBM): 自然な地形の起伏をリアルタイムに計算し、マトリックス（行列）変換を用いて各インスタンスの高さに適用しています。
  • VRAM推定と高精細HUD: 現在の負荷状況（FPS、VRAM使用量の推定値、ブロック数）を、3D空間上の高解像度スプライトとして動画に焼き込めるように描画しています。

便利な機能

ただ重いだけの画面では面白くないので、ベンチマークツールとしての機能も作り込みました。

  1. ブラウザ内蔵ビデオ録画: 外部ソフト（OBSなど）を使わずに、負荷が上がってカクついていく様子からリザルト画面までを .webm 動画として自動録画・ダウンロードできます。



  1. シェア用 OGP 画像生成機能: 計測が終了すると、スコアと使用したGPU名が刻印されたサイバーなエビデンス画像を Canvas 上で生成し、PNGとして保存できます。

私の環境でのスコア（RTX 4070 Ti）

開発環境である NVIDIA GeForce RTX 4070 Ti でテストしたところ、スコアは 4,622,500 Blocks でした。

2000×2000（400万個）の壁を越え、VRAM推定値は 300MB強。リアルタイムの影計算がGPU使用率を98%に張り付かせる、非常に見応えのある負荷テストになりました。

動画版もYouTubeにアップロードしていますので、限界に挑むGPUの挙動をぜひご覧ください。

あなたの限界スコアは？

スマホからハイエンドゲーミングPCまで、あらゆる環境で動作します（スマホだと数万〜数十万ブロックで限界が来るはずです）。最大で2,500万ブロック（5000×5000）まで計測できるように設定していますので、RTX 5090などの次世代GPUをお持ちの方の挑戦も大歓迎です。