Skip to main content
約 1 分Aedifex Team

WebGPU がブラウザベース 3D 設計を高速にする仕組み

WebGPU はコンピュートシェーダー、JavaScript オーバーヘッド削減、現代 GPU アクセス、リアルタイム部屋レンダリングでブラウザ 3D 設計を改善。

ブラウザは今や軽量な 3D プレビューを表示するだけではない。WebGPU により、デスクトップのレンダリング API に近い形で現代的な GPU と通信できるようになった。これが Aedifex が素材、家具、照明を更新しながらシーンをインタラクティブに保てる理由だ。

簡単な歴史

ブラウザ 3D はかつて WebGL を意味した。2011 年頃に Chrome に入った OpenGL ES の JavaScript バインディング。WebGL は Google Maps の 3D ビュー、Tinkercad、SketchUp Free を可能にした。しかし常に妥協だった：古い API の上に作られ、その古い API 自体がベンダー固有のデスクトップ GPU API への妥協だった。

WebGL の最大の痛点：

  1. シングルスレッド JS ボトルネック。ほとんどのグラフィックスコールがメイン JS スレッドを通る。数千オブジェクトのシーンは GPU が忙しくなる前にドローコールオーバーヘッドで詰まる。
  2. コンピュートシェーダーなし。WebGL 2 でコンピュート的な機能が追加されたが、現代 GPU プログラミングには遠い。
  3. 古いシェーディング言語。GLSL ES 3.0｜2010 年代のエフェクトには適しているが、現代の PBR や複雑な照明には辛い。

WebGPU は Vulkan、Metal、Direct3D 12 の教訓を取り入れた再設計でブラウザに持ち込まれた。MDN は依然として WebGPU を完全 Baseline ではないとマークしているが、ブラウザとデバイスによって対応が異なるからだ。方向性は明確：現代の GPU アクセスはウェブプラットフォームの一部になった。

WebGPU ができて WebGL ができなかったこと 3 つ

1. 本物のコンピュートシェーダー

レンダリングだけでなく、汎用 GPU コードを実行できる。設計エディタにとって、これはライトカリング、空間チェック、シーンデータのバッチング作業に重要。JavaScript メインスレッドを混雑させていた処理を GPU に近づけられる。

2. マルチスレッドコマンド記録

WebGPU はレンダリングコードに対してコマンドバッファとリソースバインディングのより明示的なコントロールを提供。多数の壁セグメントと家具インスタンスを含む複雑なシーンが、伝統的な WebGL ループより低いオブジェクト単位オーバーヘッドで準備できる。

3. 現代的なシェーディング言語(WGSL)

WGSL はウェブのために専用設計。型安全、検証しやすい、ドライバレベルの UB なし。Aedifexは PBR(物理ベースレンダリング)シェーダーに WGSL を使用、それが素材プレビューを実際の素材に近く見せ、2002 年のビデオゲームに見せない理由。

Aedifex の WebGPU 使用法

リアルタイム PBR レンダリング

Aedifex のカタログのすべての素材は PBR マップを持つ：albedo(色)、normal(表面詳細)、roughness(粗さ)、metalness(金属度)。シェーダーは Cook-Torrance BRDF をピクセル単位で評価｜V-Ray や Cycles と同じ数学、ただしブラウザで 1 秒間に 60 フレーム動作、ワークステーションで 1 フレーム 60 分ではない。

技術的に好奇心の強い読者向け：このタイプのレンダラーは通常、クラスタードまたはタイルドライト管理、スクリーンスペース効果、時間的アンチエイリアシング、WGSL で書かれた素材シェーダーを組み合わせる。重要なユーザー向け結果はよりシンプル：照明を動かしたり床素材を変えたりすると即座に感じるべき。

インスタンス化された家具

典型的なリビングには同じモデルの椅子が複数。それぞれを別々のオブジェクトとしてレンダリングすると、椅子だけで 4-8 ドローコール。インスタンシングを使えば、4 つの椅子は 1 コールでレンダリング。WebGPU のストレージバッファがこれをクリーンに実装可能にする｜インスタンスデータを頂点属性にエンコードする必要がない。

動的照明

Aedifex で太陽位置スライダーをドラッグすると、照明はリアルタイムで再計算される。太陽はカスケードシャドウマップ付きの方向光。室内ランプは同じスタイルのポイントライト。ライト寄与はフラグメントシェーダーでピクセル単位で計算。WebGL は基本的なシャドウマップが可能だったが、WebGPU の改善されたバインディングモデルが多数のライトソース管理を実用的にする。

ブラウザに必要なもの

2026 年の WebGPU サポートは深刻なブラウザ 3D に十分広いが、機能検出は依然必要：

  • Chromium ブラウザ：今日 WebGPU 最も成熟したパス
  • Firefox と Safari：サポートは改善されたが、ユーザーは依然としてバージョンとデバイスの差異を予期すべき
  • 古いデバイスや管理されたブラウザ：WebGL フォールバックが必要かも

Aedifex は機能を検出してからレンダラーを選ぶ。WebGPU なしのブラウザでは、ユーザーは空のキャンバスではなく、品質低下のフォールバックを通してエディタが見える。

ブラウザ優先ツールにとっての意義

5 年前、ブラウザで真剣な 3D 設計アプリを作るには WebGL に合わせてビジュアルを妥協する必要があった。今日、ブラウザベースのツールはほとんどのユーザーが気にするイテレーション規模でデスクトップツールのレンダリング品質に匹敵できる。

これが Aedifex がブラウザ優先である理由。これは 2D ウェブアプリに付属する静的 3D ビューアではない;インタラクティブな設計エディタで、「インストール不要」と「URL で共有」がライブレンダリングをあきらめる必要がない。

試してみる

デモ を任意の現代的なブラウザで開く。時間帯を変えると照明がリアルタイムで更新されるのを見る。それが WebGPU が動作している証拠。

ツール比較：Aedifex SketchUp との比較。利用可能なすべてのツール：2026 年の無料で使える 3D 建築ツール。