本記事の内容について
Web 3D技術の全体像についてです。
🎯 想定読者
- Web開発者で、3Dに挑戦したい人
- Three.js や React Three Fiber (R3F) を選定検討している人
- WebGL/WebGPUなど低レベルAPIとの関係が知りたい人
🗺 Web 3D技術マップ
Web 3D技術をレイヤー別に分類してみました。
Web 3D 技術
├── 🔧 レンダリングエンジン
│ ├── WebGL
│ └── WebGPU
│
├── 🏗 ラッパー／フレームワーク（開発支援レイヤー）
│ ├── Three.js
│ ├── Babylon.js
│ ├── React Three Fiber
│ └── PlayCanvas（GUI付き、クラウド型）
│
├── 🧩 UI/ノーコード系
│ ├── Spline（GUIでモデリング＋Web埋め込み）
│ └── Verge3D（Blenderとの統合、商用寄り）
│
└── 🌐 その他の統合技術／派生
├── Unity WebGL（非JS系、ゲーム/シミュレーション用）
└── WASM + Rust + WebGL（Bevy、Makepadなどの新興勢力）
- 🔧 レンダリングエンジンについて
Web 3Dの描画原理である、座標変換などの演算を行うのがレンダリングエンジンです。
3DモデルをWebブラウザ上の２次元画面に描画するには、3Dモデルの各点に座標変換演算を行う必要があります。
- 参考：詳細の座標変換について
WebGL と WebGPU の比較
| 項目 | WebGL | WebGPU |
|---|---|---|
| リリース年 | 2011年（WebGL 1.0） | 2023年（正式仕様策定） |
| ベースAPI | OpenGL ES 2.0（WebGL1）、ES 3.0（WebGL2） | Vulkan / Metal / Direct3D 12（プラットフォームに応じて抽象化） |
| 公式ドキュメント | WebGL MDN | WebGPU Spec |
| 並列処理 | ❌ 基本的に不可。 | ✅ 並列コマンド生成可。 |
| ブラウザ対応 | ✅ 広く対応（Chrome, Firefox, Safari, Edge など） | 🔄 主要ブラウザで順次対応中（Chrome, Edge, Firefox）。Safariは未対応もあり |
WebGLが並列処理が基本的に不可な理由としては、主要APIであるWebGLRenderingContext の仕様に影響しているとのこと。
-
WebGLRenderingContextはメインスレッドでしか扱えない- そもそものDOM関数の仕様
- 即時モード API（Immediate Mode API）のため描画命令は逐次的に送信する必要があり、並列での構築やバッチ処理が困難。
WebGPUでは上記のWebGLの並列処理の問題点を解消しており、並列処理が可能になっているとのこと。
- 🏗 ラッパー／フレームワーク について
| フレームワーク名 | 特徴 | 公式リンク |
|---|---|---|
| Three.js | 最も人気のある3Dライブラリ。 | threejs.org |
| Babylon.js | 物理エンジンとの連携を公式サポート | babylonjs.com |
| React Three Fiber | React の思想で Three.js を扱えるラッパー。JSXで3Dシーンを構築。 | GitHub: pmndrs/react-three-fiber |
| PlayCanvas | GUI付きのエディタで開発可能。 | playcanvas.com |
これらのフレームワークにはCamera/Scene/Rendererの概念が共通しているので、習得するとどのフレームワークでも同じように扱えそうです。
| 概念 | 説明 | 備考 |
|---|---|---|
| scene | 3D空間に存在するすべてのオブジェクト（メッシュ、ライト、エフェクトなど）をまとめる箱。 | どのライブラリもシーンにオブジェクトを追加して管理します。 |
| camera | 3Dシーンをどの角度・位置から見るかを決める視点。透視投影（PerspectiveCamera）や平行投影（OrthographicCamera）がある。 | カメラの種類や設定は若干異なるが基本的な役割は同じ。 |
| renderer | シーンとカメラの情報を使い、WebGL（GPU）で描画を実行するコンポーネント。 | Three.js / Babylon.jsは明示的にrendererを操作。 React Three Fiber / PlayCanvasは内部でrenderer管理。 |
- 🧩 UI/ノーコード系 について
| ツール名 | 特徴 | 公式リンク |
|---|---|---|
| Spline | GUIで3Dモデリングからアニメーション作成、Webへの埋め込みが簡単にできる。 | spline.design |
| Verge3D | Blenderや3ds Maxとの連携が強力なWeb向けノーコードツール。 | verge3d.com |
- 🌐 その他の統合技術／派生 について
| 技術／ツール名 | 特徴 | 公式リンク |
|---|---|---|
| Unity WebGL | Unityエンジンで作成したゲームやシミュレーションをWebブラウザで動作させる。 | unity.com |
| WASM + Rust + WebGL | WebAssemblyを使いRustで高速な3Dアプリを構築。 | - bevyengine.org - makepad.com |
🔖 参考リンク
- Three.js 公式
- React Three Fiber GitHub
- Babylon.js
- Spline
- WebGPU
- WebGL Fundamentals
- Learn OpenGL - 3Dグラフィックスの基礎理論