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)
场景图	`Scene` + `Object3D`	以树结构存放任何节点：`Mesh`、`Light`、`Group` 等；节点坐标/矩阵层级继承 (Three.js)
相机	`PerspectiveCamera` / `OrthographicCamera`	定义视锥或正交盒；决定从哪儿看场景
几何体	`BoxGeometry`、`SphereGeometry`、`BufferGeometry`	顶点/索引/UV 等数据
材质	`MeshStandardMaterial`、`MeshPhysicalMaterial`…	PBR、透明度、双面、着色器自定义
光源	`AmbientLight`、`DirectionalLight`、`PointLight`…	影响基于光照的材质
控制器	`OrbitControls`、`FirstPersonControls`…	鼠标/触摸操纵相机
加载器	`GLTFLoader`、`TextureLoader`…	异步加载模型、纹理、环境贴图
动画系统	`AnimationClip` + `AnimationMixer`	帧动画、骨骼动画、插值

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

Retained‑Mode SceneGraph
- 你只描述 “什么在场景里”，Three.js 负责每帧遍历树，把世界矩阵传 shader。
WebGL 抽象层
- WebGLRenderer 把高阶 API（MeshStandardMaterial、阴影、后处理）下翻译成低阶 WebGL bufferData/ drawElements。
自动资源/状态管理
- 着色器、VAO、纹理、FBO 由内部缓存池复用；避免手撕 GL 状态机。
模块化 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 核心用法 — “三件套 + 渲染循环” 典型骨架

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)
渲染原理	Manual → Fundamentals 页 (图解 Renderer·SceneGraph) (Three.js)
API 细节	官方文档 `WebGLRenderer`, `Object3D`, `Material`… (Three.js)
性能调优	Manual → Optimization 节 (“Lots of Objects”, “OffscreenCanvas”) (Three.js)
高级示例	three.js/examples + discourse.threejs.org

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 的“设计哲学”

场景即状态机 对象放到 Scene 树里后，Babylon 的渲染循环自动按顺序执行 BeforeRender → Render → AfterRender 回调；插件（Physics、Particles）注入到循环无需手写 requestAnimationFrame。
“Everything is Observable” 几乎每个核心类都有 onXXXObservable（Observable 模式而非 DOM Event）；构造时即可订阅 GPU 压力、材质编译完成等事件。
内置 GUI & Inspector 按 Shift + Ctrl + I 或 scene.debugLayer.show() → 弹出 实时 Inspector，查看/编辑材质、灯光、帧率，无需外部插件。
管线模板模式 后处理、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 五步骨架”

<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` 更贴近游戏引擎概念

P2 Three & Babylon

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

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

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

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

参考路线图（继续深挖）

Babylon.js PBR

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

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

3 核心功能

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

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

6 如何选择？