本記事の内容について

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モデルの各点に座標変換演算を行う必要があります。

参考：詳細の座標変換について
- LearnOpenGL - Coordinate Systems

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）のため描画命令は逐次的に送信する必要があり、並列での構築やバッチ処理が困難。
- 参考: WebGL Specification

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

🔖 参考リンク