---
title: "P2 Three & Babylon"
author: "Perrin Yong"
author_profile: https://www.pystone.net/profile/
published_by: "Perrin Yong"
canonical: https://www.pystone.net/notes/webgl-threejs-babylonjs-overview/
type: note
content_role: unspecified
visibility: public
id_stability: rename-stable
source_path: "10-计算机、信息技术与工程/05-游戏图形与运行时/WebGL/P2 Three & Babylon.md"
content_hash: ec024982a37d931fb28c82b7b5d66e31ac4f5c31980ac5d200a44ad3eb0e33cf
knowledge_version: 224c990773de.5fa8af6e39fa
site_commit: 224c990773de166d23a886306577dd90379529ce
notes_commit: 5fa8af6e39fa3891d1b9b4832bfa6c4e0ecaaf0a
---
# P2 Three & Babylon
Three.js 诞生于 2010 年，由 Ricardo Cabello (mrdoob) 发起并主导，定位为 **“最小而表达力强的 WebGL 抽象层”**。它把原生 WebGL 的底层状态机（着色器编译、缓冲上传、FBO 切换）封装成 **Scene / Camera / Renderer** 三件套和一批常用几何、材质、灯光，使开发者只需几十行代码就能在浏览器绘制 3D 物体。
框架保持 **极简核心 + 社区生态** 的策略：官方仓库只维护基础渲染管线、加载器与少量控制器；粒子、后处理、物理等高级功能主要由社区插件或示例目录（examples/jsm）提供。核心用 ES Modules 编写，每月发布一个 r1xx 版本，是目前 GitHub Star 数量最多的 WebGL 库。
## 1 核心内容 — Three.js 提供了哪些「基本部件」？

| 类别       | 代表类                                             | 说明                                                                             |
| -------- | ----------------------------------------------- | ------------------------------------------------------------------------------ |
| **渲染器**  | `WebGLRenderer`                                 | 把 Scene + Camera 交给 GPU，输出到 `<canvas>`；可切换 WebGL 1/2/WebXR 等后端 ([Three.js][1]) |
| **场景图**  | `Scene` + `Object3D`                            | 以 **树结构** 存放任何节点：`Mesh`、`Light`、`Group` 等；节点坐标/矩阵层级继承 ([Three.js][2])          |
| **相机**   | `PerspectiveCamera` / `OrthographicCamera`      | 定义视锥或正交盒；决定从哪儿看场景                                                              |
| **几何体**  | `BoxGeometry`、`SphereGeometry`、`BufferGeometry` | 顶点/索引/UV 等数据                                                                   |
| **材质**   | `MeshStandardMaterial`、`MeshPhysicalMaterial`…  | PBR、透明度、双面、着色器自定义                                                              |
| **光源**   | `AmbientLight`、`DirectionalLight`、`PointLight`… | 影响基于光照的材质                                                                      |
| **控制器**  | `OrbitControls`、`FirstPersonControls`…          | 鼠标/触摸操纵相机                                                                      |
| **加载器**  | `GLTFLoader`、`TextureLoader`…                   | 异步加载模型、纹理、环境贴图                                                                 |
| **动画系统** | `AnimationClip` + `AnimationMixer`              | 帧动画、骨骼动画、插值                                                                    |

---

## 2 核心原理 — Three.js 为什么能「写几行就出效果」？

1. **Retained‑Mode SceneGraph**

   * 你只描述 *“什么在场景里”*，Three.js 负责每帧遍历树，把世界矩阵传 shader。
2. **WebGL 抽象层**

   * `WebGLRenderer` 把高阶 API（`MeshStandardMaterial`、阴影、后处理）下翻译成低阶 WebGL `bufferData/ drawElements`。
3. **自动资源/状态管理**

   * 着色器、VAO、纹理、FBO 由内部缓存池复用；避免手撕 GL 状态机。
4. **模块化 ES Module 架构**（r160+）

   * 每个功能都是独立 `jsm/` 子模块；浏览器原生 `import` 或打包器 tree‑shaking。

---

## 3 核心功能 — Three.js 能做什么？

| 领域                           | 关键 API / 插件                                                       |
| ---------------------------- | ----------------------------------------------------------------- |
| **PBR 渲染链**                  | `MeshStandardMaterial`, `PMREMGenerator`, `ACESFilmicToneMapping` |
| **后处理**                      | `EffectComposer`, `RenderPass`, `BloomPass`, `SSAO`               |
| **粒子 & GPGPU**               | `Points`, `ShaderMaterial`, GPUParticle demo                      |
| **WebXR / VR / AR**          | `WebGLRenderer.setAnimationLoop`, `XRControllerModel`             |
| **物理加载**                     | `GLTFLoader`, `DRACOLoader`, `KTX2Loader`（BasisU）                 |
| **自定义 Shader**               | `ShaderMaterial`, `onBeforeCompile`, Node‑Material system         |
| **多渲染目标**                    | WebGL 2 `WebGLMultipleRenderTargets`                              |
| **OffscreenCanvas / Worker** | `WebGLRenderer({canvas, context})` + transferable contexts        |

---

## 4 核心用法 — “三件套 + 渲染循环” 典型骨架

```js
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene    = new THREE.Scene();
const camera   = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, .1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

// 几何 + 材质 + 光
const mesh = new THREE.Mesh(new THREE.BoxGeometry(),
                            new THREE.MeshStandardMaterial({metalness:.2, roughness:.5}));
scene.add(mesh);
scene.add(new THREE.AmbientLight(0xffffff, .8));
camera.position.set(0,0,2);
new OrbitControls(camera, renderer.domElement);

// 主循环
renderer.setAnimationLoop((t)=>{
  mesh.rotation.y = mesh.rotation.x = t/2000;
  renderer.render(scene, camera);
});
```

**常见陷阱**

| 症状     | 快速排查                                                                         |
| ------ | ---------------------------------------------------------------------------- |
| 画布黑屏   | `renderer.setSize` 是否调用；材质是否需要光；浏览器 WebGL 是否被禁用                              |
| FPS 掉帧 | `renderer.info.render.calls` 统计 draw call；检查纹理过大或动态创建几何                      |
| 内存泄漏   | 动态删除时 `geometry.dispose()` + `material.dispose()`；取消 `requestAnimationFrame` |

---

### 参考路线图（继续深挖）

| 阶段         | 学习材料                                                                           |
| ---------- | ------------------------------------------------------------------------------ |
| **入门**     | “Creating a scene” 官方手册章节 ([Three.js][3])                                      |
| **渲染原理**   | Manual → Fundamentals 页 (图解 Renderer·SceneGraph) ([Three.js][2])               |
| **API 细节** | 官方文档 `WebGLRenderer`, `Object3D`, `Material`… ([Three.js][1])                  |
| **性能调优**   | Manual → Optimization 节 (“Lots of Objects”, “OffscreenCanvas”) ([Three.js][4]) |
| **高级示例**   | three.js/examples + discourse.threejs.org                                      |

[1]: https://threejs.org/docs/api/en/renderers/WebGLRenderer.html?utm_source=chatgpt.com "WebGLRenderer – three.js docs"
[2]: https://threejs.org/manual/en/fundamentals.html?utm_source=chatgpt.com "Fundamentals - Three.js"
[3]: https://threejs.org/manual/en/creating-a-scene.html?utm_source=chatgpt.com "Creating a scene - Three.js"
[4]: https://threejs.org/manual/?utm_source=chatgpt.com "three.js manual"


---

## Babylon.js PBR
Babylon.js 由微软工程师 David Catuhe 等人于 2013 年开源，目标是 **“面向游戏和可视化的一站式 3D 引擎”**。它采用 TypeScript 全代码，核心模块提供渲染、场景、动画、粒子、GUI、物理、骨骼、PBR 管线等 **完整功能栈**，并内置可视化 **Inspector**、**Node Material Editor**、**Playground** 在线沙盒。

Babylon 以 **企业级稳定性** 为卖点：长期维护 LTS 分支、对 GLTF 2.0 / KTX2 / WebXR / WebGPU 等新标准快速跟进，并与微软 Mesh、Office 3D Viewer、Adobe Substance 3D 等产品深度集成。它强调“零配置即可跑”的开发体验，适合需要快速落地完整 3D/VR/AR 方案的 Web 项目。

## 1 核心内容 — Babylon.js 提供了哪些「基本部件」？

|类别|代表类 (Babylon.js)|与 Three.js 的类比|
|---|---|---|
|**引擎 & 渲染器**|`Engine`（构造时传 Canvas）|Three ➜ `WebGLRenderer`|
|**场景树**|`Scene`, `TransformNode`, `Mesh`|Three ➜ `Scene`, `Object3D`|
|**相机**|`ArcRotateCamera`, `UniversalCamera`, `FreeCamera`|Three ➜ `PerspectiveCamera` + Controls|
|**几何体**|`MeshBuilder.CreateBox/Sphere/…`|Three ➜ `BoxGeometry`, `SphereGeometry`|
|**材质**|`PBRMaterial`, `StandardMaterial`, `NodeMaterial`|Three ➜ `MeshPhysicalMaterial`, `MeshStandardMaterial`|
|**光源**|`HemisphericLight`, `DirectionalLight`, `SpotLight`|类名不同，作用相同|
|**加载器**|`SceneLoader.ImportMesh`, `AssetsManager`, 原生 GLTF 2.0 + KTX2 封装|Three ➜ `GLTFLoader`, `DRACOLoader`|
|**系统插件**|`Inspector`、`GUI`、`Physics` 插件即开即用|Three 需社区插件或手写|
|**管线模板**|`DefaultRenderingPipeline`, `HDRPipeline`, `SSAO2Pipeline`|Three 需手动 `EffectComposer` 组 Pass|

---

## 2 核心原理 — Babylon.js 的“设计哲学”

1. **场景即状态机**
    对象放到 `Scene` 树里后，Babylon 的渲染循环自动按顺序执行 **BeforeRender → Render → AfterRender** 回调；插件（Physics、Particles）注入到循环无需手写 `requestAnimationFrame`。

2. **“Everything is Observable”**
    几乎每个核心类都有 `onXXXObservable`（Observable 模式而非 DOM Event）；构造时即可订阅 GPU 压力、材质编译完成等事件。

3. **内置 GUI & Inspector**
    按 `Shift + Ctrl + I` 或 `scene.debugLayer.show()` → 弹出 **实时 Inspector**，查看/编辑材质、灯光、帧率，无需外部插件。

4. **管线模板模式**
    后处理、Bloom、ColorGrading 打包进 `DefaultRenderingPipeline`，开关即用；Three.js 则要自己连 `EffectComposer` Pass。


---

## 3 核心功能

|模块|一行说明|Three.js 对应做法|
|---|---|---|
|**PBR**|`PBRMaterial` 完整金属/粗糙度、Iridescence、ClearCoat、Sheen|三的 `MeshPhysicalMaterial` 新版也支持，但参数名略不同|
|**节点材质编辑器**|可视化 NodeMaterial Editor，导出 Shader 代码|Three 需 ShaderNode 或外部工具|
|**Inspector**|场景调试、帧率、GPU 内存一键查看|Three 需 Spector.js 或手写 GUI|
|**Physics**|一行启用 Ammo.js / Cannon.js / Havok 调度|Three 一般接入 Cannon/Ammo 手动同步|
|**GUI 2D/3D**|`AdvancedDynamicTexture` 直接建按钮、滑块|Three 用 HTML/CSS or community libs|
|**WebGPU**|`engine.initWebGPU()` 同 API 调到 WebGPU|Three WebGPU renderer 仍实验|
|**性能级别检测**|`scene.getEngine().getHardwareScalingLevel()` & `SceneOptimizer` 动态降质|Three 没内置，需要手写|

---

## 4 核心用法 —— “Babylon.js 五步骨架”

```html
<canvas id="c"></canvas>
<script type="module">
import * as BABYLON from "https://cdn.babylonjs.com/babylon.js";
import "https://cdn.babylonjs.com/gui/babylon.gui.min.js";

const canvas = document.getElementById("c");
const engine = new BABYLON.Engine(canvas, true);          // 步1: 创建引擎
const scene  = new BABYLON.Scene(engine);                 // 步2: 创建场景

// 步3: 相机 + 控制
const cam = new BABYLON.ArcRotateCamera("cam", Math.PI/4, Math.PI/4, 4,
                                        BABYLON.Vector3.Zero(), scene);
cam.attachControl(canvas, true);

// 步4: 光 + 网格 + 材质
new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0,1,0), scene);
const box = BABYLON.MeshBuilder.CreateBox("b", {}, scene);
box.material = new BABYLON.PBRMaterial("m", scene);
box.material.metallic  = 0.2;
box.material.roughness = 0.6;

// 步5: 渲染循环
engine.runRenderLoop(()=> scene.render());
window.addEventListener("resize", ()=> engine.resize());
</script>
```

---

## 5 Babylon.js × Three.js 并列速查表

|维度|**Babylon.js**|**Three.js**|
|---|---|---|
|项目定位|“一站式游戏/可视化引擎”|“轻量级 WebGL 抽象层”|
|包体大小|core ≈ 900 KB (gzip)|core ≈ 250 KB (gzip)|
|TypeScript 支持|TS 源码 + 100 % 声明|TS 声明，仅部分源码|
|编辑器|NodeMaterial Editor, WebGPU Playground|Three.js Editor 项目 (较轻)|
|调试|内置 Inspector UI|需 Spector.js 或 dat.GUI|
|后处理|RenderingPipeline 打包|`EffectComposer` Pass 手动拼|
|WebGPU|稳定 (`Engine` 自动切)|实验性 (需 `WebGPURenderer`)|
|生态|GUI、Physics、XR 内置|庞大社区插件 (`three-stdlib`)|
|引擎循环|内部驱动；`scene.registerBeforeRender`|手动 `requestAnimationFrame`|
|学习曲线|API 饱满，概念多|API 小而易上手|

---

### 6 如何选择？

|项目类型|推荐|
|---|---|
|轻量 3D 插图 / 数据可视化|**Three.js**：灵活、打包小|
|Web 游戏 / 需要 GUI、物理、节点材质|**Babylon.js**：开箱全家桶|
|需 WebGPU 提前踩坑|Babylon 的 WebGPU Backend 更成熟|
|想用 Unity‑like 组件思维|Babylon 中的 `SceneLoader`, `Editor` 更贴近游戏引擎概念|