【Web 3D】Web 3D技術の全体像について調べてみた

## 本記事の内容について
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モデルの各点に座標変換演算を行う必要があります。

![qiita-3D-rendering-engine.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606327/815b7f34-2fc5-4e23-ae3e-1852c3bbe1a9.png)

 -  参考：詳細の座標変換について
   - [LearnOpenGL - Coordinate Systems](https://learnopengl.com/Getting-started/Coordinate-Systems?utm_source=chatgpt.com)

#### 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](https://developer.mozilla.org/ja/docs/Web/API/WebGL_API) | [WebGPU Spec](https://gpuweb.github.io/gpuweb/)                        |
| 並列処理         | ❌ 基本的に不可。 | ✅ 並列コマンド生成可。|
| ブラウザ対応     | ✅ 広く対応（Chrome, Firefox, Safari, Edge など）                      | 🔄 主要ブラウザで順次対応中（Chrome, Edge, Firefox）。Safariは未対応もあり |


WebGLが並列処理が基本的に不可な理由としては、主要APIである`WebGLRenderingContext` の仕様に影響しているとのこと。
 - `WebGLRenderingContext` はメインスレッドでしか扱えない
   - そもそものDOM関数の仕様
 - 即時モード API（Immediate Mode API）のため描画命令は逐次的に送信する必要があり、並列での構築やバッチ処理が困難。
   - 参考: [WebGL Specification](https://registry.khronos.org/webgl/specs/latest/1.0/#1)

WebGPUでは上記のWebGLの並列処理の問題点を解消しており、並列処理が可能になっているとのこと。

### - 🏗 ラッパー／フレームワーク について

| フレームワーク名     | 特徴                                                                 | 公式リンク                                      |
|----------------------|----------------------------------------------------------------------|-------------------------------------------------|
| Three.js             | 最も人気のある3Dライブラリ。 | [threejs.org](https://threejs.org/)             |
| Babylon.js           | 物理エンジンとの連携を公式サポート     | [babylonjs.com](https://www.babylonjs.com/)     |
| React Three Fiber    | React の思想で Three.js を扱えるラッパー。JSXで3Dシーンを構築。        | [GitHub: pmndrs/react-three-fiber](https://github.com/pmndrs/react-three-fiber) |
| PlayCanvas           | GUI付きのエディタで開発可能。| [playcanvas.com](https://playcanvas.com/)       |

これらのフレームワークにはCamera/Scene/Rendererの概念が共通しているので、習得するとどのフレームワークでも同じように扱えそうです。

![qiita-scene-renderer-camera.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606327/a7a4c294-3884-4fdc-9c70-f8d4a3932b6c.png)

| 概念           | 説明                                                                            | 備考                                                                                            |
| ------------ | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| **scene**    | 3D空間に存在するすべてのオブジェクト（メッシュ、ライト、エフェクトなど）をまとめる箱。                                  | どのライブラリもシーンにオブジェクトを追加して管理します。                                                                 |
| **camera**   | 3Dシーンをどの角度・位置から見るかを決める視点。透視投影（PerspectiveCamera）や平行投影（OrthographicCamera）がある。 | カメラの種類や設定は若干異なるが基本的な役割は同じ。                                                                    |
| **renderer** | シーンとカメラの情報を使い、WebGL（GPU）で描画を実行するコンポーネント。                                      | Three.js / Babylon.jsは明示的にrendererを操作。<br>React Three Fiber / PlayCanvasは内部でrenderer管理。|


### - 🧩 UI/ノーコード系 について

| ツール名   | 特徴                                                               | 公式リンク                         |
|------------|--------------------------------------------------------------------|----------------------------------|
| Spline     | GUIで3Dモデリングからアニメーション作成、Webへの埋め込みが簡単にできる。 | [spline.design](https://spline.design/) |
| Verge3D    | Blenderや3ds Maxとの連携が強力なWeb向けノーコードツール。　| [verge3d.com](https://www.verge3d.com/) |

### - 🌐 その他の統合技術／派生 について

| 技術／ツール名           | 特徴                                                                       | 公式リンク                                  |
|--------------------------|----------------------------------------------------------------------------|---------------------------------------------|
| Unity WebGL              | Unityエンジンで作成したゲームやシミュレーションをWebブラウザで動作させる。| [unity.com](https://unity.com/)             |
| WASM + Rust + WebGL      | WebAssemblyを使いRustで高速な3Dアプリを構築。 | - [bevyengine.org](https://bevyengine.org/)  <br> - [makepad.com](https://makepad.com/) |


## 🔖 参考リンク

- [Three.js 公式](https://threejs.org/)
- [React Three Fiber GitHub](https://github.com/pmndrs/react-three-fiber)
- [Babylon.js](https://www.babylonjs.com/)
- [Spline](https://spline.design/)
- [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
- [WebGL Fundamentals](https://webglfundamentals.org/)
- [Learn OpenGL](https://learnopengl.com/) - 3Dグラフィックスの基礎理論