WebGPUが切り拓く新次元：ミクロからマクロへ連続移動する「動的スケール補間」の世界

Last updated at 2026-08-27Posted at 2026-08-27

1. はじめに：無限空間表現のジレンマ

通常の3Dグラフィックス（遠近法・透視投影）において、数千、数万という桁違いのスケール差があるオブジェクトを同一の視野に収めようとすると、大きなオブジェクトは一瞬で画面外へ消え去り、小さなオブジェクトは点のように潰れてしまいます。

これを解決するため、かつては投影行列そのもの（無限遠透視射影や対数Zバッファなど）のパラメータをこねくり回して無理やり収めるアプローチが取られがちでした。しかし、この方法ではカメラの挙動やクリップ空間の計算が複雑化し、不自然な歪みや精度の破綻を生む原因になります。

今回公開されたデモでは、そのアプローチを根本から覆し、「射影行列のプロパティはいじらず、そこに座標を渡す前の段階で『空間のスケールそのものを動的に伸縮させる』」という非常にエレガントな解決策をとっています。

本デモの最大のキモは、頂点シェーダーへ送る手前のCPU（あるいはトランスフォーム）の段階で、カメラ位置に応じて空間全体のスケール（scaleNow）をリアルタイムに割り込み・補間している点にあります。

座標変換の流れを分解すると、その鮮やかさが際立ちます。

現在のカメラ位置が「どのスケール階層（ミクロ〜マクロ）」に位置するかを判定し、オブジェクト群との距離感に応じて、実座標をどの程度縮小・拡大すべきかを scaleNow として求めます。

頂点を無限遠透視射影（FrustumInf）や対数軸変換（ToLogAxis）に放り込む直前に、生データとしての座標値を scaleNow で割ります。

// 概念的なイメージ：射影変換の前に、あらかじめ座標をスケールで割る
p[0] /= scaleNow;
p[1] /= scaleNow;
p[2] /= scaleNow;

// その後、対数軸・無限遠透視射影へ

この「前段でのスケール変換」には、グラフィックス実装上、極めて大きなメリットがあります。

プロパティ汚染のないクリーンな射影行列
投影行列の数学的整合性（無限遠透視射影の美しさ）を一切崩すことなく、純粋な行列計算を維持できます。行列の数値をハックする必要がないため、カメラの挙動が極めて安定します。
ミクロからマクロへの自然な「等価移動」感
カメラが巨大なオブジェクトを通り抜ける際、空間全体のスケールが滑らかに切り替わる（あるいは同期する）ため、プレイヤー（観測者）は「自分が大きくなっているのか、世界が縮んでいるのか」の境界を忘れるような、圧倒的な没入感を得られます。
WebGPUのパイプライン親和性
頂点シェーダーへ渡すユニフォームやストレージバッファに、この scaleNow や補間係数を載せるだけで完結するため、WebGPUの高速な並列処理性能を全くスポイルしません。

さらに本デモでは、この高度なスケール制御の裏で、WebGPUのモダンな機能をフルに活かしたリッチな描画が行われています。

パイプラインの二刀流構成：ソリッドな面を描画する三角形パイプラインと、深度書き込みをオフにしてクリーンに重ねるワイヤーフレーム用ラインパイプラインの華麗なコンビネーション。
Zファイティングの完全排除：幾何学的なスケール差が混在する空間でありながら、シェーダーレベルの微小なオフセット調整により、面の重なりによるちらつき（Zファイティング）が綺麗に抑えられています。

「投影側をいじるな、空間（座標）側を整えろ」——。
長年3Dシミュレーションやグラフィックスエンジンの開発に携わってきた知見と美学が、今回のWebGPU実装という最新のキャンバス上で結実しています。

数学的な小細工に頼らず、座標系のコントロールという王道のアプローチで無限のスケール感を表現した本デモは、今後の大規模3Dビジュアライゼーションにおいても大いに参考になる珠玉のサンプルと言えるでしょう。

気に入っていただけたら GitHub に ⭐ をいただけると嬉しいです！