{ "schemaVersion": "0.11.0", "canonical": "https://www.pystone.net/notes/webgl-threejs-babylonjs-overview/", "atlas": "https://www.pystone.net/?node=webgl-threejs-babylonjs-overview#knowledge-atlas", "markdown": "https://www.pystone.net/notes/webgl-threejs-babylonjs-overview.md", "context": "https://www.pystone.net/notes/webgl-threejs-babylonjs-overview.context.json", "knowledgeVersion": "224c990773de.5fa8af6e39fa", "build": { "siteCommit": "224c990773de166d23a886306577dd90379529ce", "notesCommit": "5fa8af6e39fa3891d1b9b4832bfa6c4e0ecaaf0a", "builtAt": "1970-01-01T00:00:00.000Z", "version": "224c990773de.5fa8af6e39fa" }, "id": "note:webgl-threejs-babylonjs-overview", "slug": "webgl-threejs-babylonjs-overview", "title": "P2 Three & Babylon", "type": "note", "visibility": "public", "idStability": "rename-stable", "author": { "name": "Perrin Yong", "profile": "https://www.pystone.net/profile/" }, "publisher": { "name": "Perrin Yong", "profile": "https://www.pystone.net/profile/" }, "aliases": [], "summary": "P2 Three & Babylon Three.js 诞生于 2010 年，由 Ricardo Cabello (mrdoob) 发起并主导，定位为 “最小而表达力强的 WebGL 抽象层” 。它把原生 WebGL 的底层状态机（着色器编译、缓冲上传、FBO 切换）封装成 Scene / Camera / Renderer 三件套和一批常用几何、材质、灯光，使开发者只需几十行代码就能在浏览器绘制 3D 物体。 框架保持 极简核心…", "contentRole": "unspecified", "isMoc": false, "mocRecognition": "none", "generated": false, "attribution": "unspecified", "domain": "10-计算机、信息技术与工程", "tags": [], "mocs": [], "contentHash": "ec024982a37d931fb28c82b7b5d66e31ac4f5c31980ac5d200a44ad3eb0e33cf", "assets": [], "headings": [ { "depth": 1, "text": "P2 Three & Babylon", "anchor": "p2-three-babylon", "citation": "https://www.pystone.net/notes/webgl-threejs-babylonjs-overview/#p2-three-babylon" }, { "depth": 2, "text": "1 核心内容 — Three.js 提供了哪些「基本部件」？", "anchor": "1-核心内容-threejs-提供了哪些基本部件", "citation": "https://www.pystone.net/notes/webgl-threejs-babylonjs-overview/#1-%E6%A0%B8%E5%BF%83%E5%86%85%E5%AE%B9-threejs-%E6%8F%90%E4%BE%9B%E4%BA%86%E5%93%AA%E4%BA%9B%E5%9F%BA%E6%9C%AC%E9%83%A8%E4%BB%B6" }, { "depth": 2, "text": "2 核心原理 — Three.js 为什么能「写几行就出效果」？", "anchor": "2-核心原理-threejs-为什么能写几行就出效果", "citation": "https://www.pystone.net/notes/webgl-threejs-babylonjs-overview/#2-%E6%A0%B8%E5%BF%83%E5%8E%9F%E7%90%86-threejs-%E4%B8%BA%E4%BB%80%E4%B9%88%E8%83%BD%E5%86%99%E5%87%A0%E8%A1%8C%E5%B0%B1%E5%87%BA%E6%95%88%E6%9E%9C" }, { "depth": 2, "text": "3 核心功能 — Three.js 能做什么？", "anchor": "3-核心功能-threejs-能做什么", "citation": "https://www.pystone.net/notes/webgl-threejs-babylonjs-overview/#3-%E6%A0%B8%E5%BF%83%E5%8A%9F%E8%83%BD-threejs-%E8%83%BD%E5%81%9A%E4%BB%80%E4%B9%88" }, { "depth": 2, "text": "4 核心用法 — “三件套 + 渲染循环” 典型骨架", "anchor": "4-核心用法-三件套-渲染循环-典型骨架", "citation": "https://www.pystone.net/notes/webgl-threejs-babylonjs-overview/#4-%E6%A0%B8%E5%BF%83%E7%94%A8%E6%B3%95-%E4%B8%89%E4%BB%B6%E5%A5%97-%E6%B8%B2%E6%9F%93%E5%BE%AA%E7%8E%AF-%E5%85%B8%E5%9E%8B%E9%AA%A8%E6%9E%B6" }, { "depth": 3, "text": "参考路线图（继续深挖）", "anchor": "参考路线图继续深挖", "citation": "https://www.pystone.net/notes/webgl-threejs-babylonjs-overview/#%E5%8F%82%E8%80%83%E8%B7%AF%E7%BA%BF%E5%9B%BE%E7%BB%A7%E7%BB%AD%E6%B7%B1%E6%8C%96" }, { "depth": 2, "text": "Babylon.js PBR", "anchor": "babylonjs-pbr", "citation": "https://www.pystone.net/notes/webgl-threejs-babylonjs-overview/#babylonjs-pbr" }, { "depth": 2, "text": "1 核心内容 — Babylon.js 提供了哪些「基本部件」？", "anchor": "1-核心内容-babylonjs-提供了哪些基本部件", "citation": "https://www.pystone.net/notes/webgl-threejs-babylonjs-overview/#1-%E6%A0%B8%E5%BF%83%E5%86%85%E5%AE%B9-babylonjs-%E6%8F%90%E4%BE%9B%E4%BA%86%E5%93%AA%E4%BA%9B%E5%9F%BA%E6%9C%AC%E9%83%A8%E4%BB%B6" }, { "depth": 2, "text": "2 核心原理 — Babylon.js 的“设计哲学”", "anchor": "2-核心原理-babylonjs-的设计哲学", "citation": "https://www.pystone.net/notes/webgl-threejs-babylonjs-overview/#2-%E6%A0%B8%E5%BF%83%E5%8E%9F%E7%90%86-babylonjs-%E7%9A%84%E8%AE%BE%E8%AE%A1%E5%93%B2%E5%AD%A6" }, { "depth": 2, "text": "3 核心功能", "anchor": "3-核心功能", "citation": "https://www.pystone.net/notes/webgl-threejs-babylonjs-overview/#3-%E6%A0%B8%E5%BF%83%E5%8A%9F%E8%83%BD" }, { "depth": 2, "text": "4 核心用法 —— “Babylon.js 五步骨架”", "anchor": "4-核心用法-babylonjs-五步骨架", "citation": "https://www.pystone.net/notes/webgl-threejs-babylonjs-overview/#4-%E6%A0%B8%E5%BF%83%E7%94%A8%E6%B3%95-babylonjs-%E4%BA%94%E6%AD%A5%E9%AA%A8%E6%9E%B6" }, { "depth": 2, "text": "5 Babylon.js × Three.js 并列速查表", "anchor": "5-babylonjs-threejs-并列速查表", "citation": "https://www.pystone.net/notes/webgl-threejs-babylonjs-overview/#5-babylonjs-threejs-%E5%B9%B6%E5%88%97%E9%80%9F%E6%9F%A5%E8%A1%A8" }, { "depth": 3, "text": "6 如何选择？", "anchor": "6-如何选择", "citation": "https://www.pystone.net/notes/webgl-threejs-babylonjs-overview/#6-%E5%A6%82%E4%BD%95%E9%80%89%E6%8B%A9" } ], "claims": [], "outgoing": [], "incoming": [ { "id": "note:game-graphics-and-runtime", "title": "游戏图形与运行时", "url": "https://www.pystone.net/notes/game-graphics-and-runtime/", "atlas": "https://www.pystone.net/?node=game-graphics-and-runtime#knowledge-atlas", "label": "游戏图形与运行时", "origin": "explicit", "humanReviewed": true, "context": "WebGL中的“P2 Three & Babylon”导航项", "citation": "https://www.pystone.net/notes/game-graphics-and-runtime/#webgl" } ], "contentMarkdown": "# P2 Three & Babylon\nThree.js 诞生于 2010 年，由 Ricardo Cabello (mrdoob) 发起并主导，定位为 **“最小而表达力强的 WebGL 抽象层”**。它把原生 WebGL 的底层状态机（着色器编译、缓冲上传、FBO 切换）封装成 **Scene / Camera / Renderer** 三件套和一批常用几何、材质、灯光，使开发者只需几十行代码就能在浏览器绘制 3D 物体。\n框架保持 **极简核心 + 社区生态** 的策略：官方仓库只维护基础渲染管线、加载器与少量控制器；粒子、后处理、物理等高级功能主要由社区插件或示例目录（examples/jsm）提供。核心用 ES Modules 编写，每月发布一个 r1xx 版本，是目前 GitHub Star 数量最多的 WebGL 库。\n## 1 核心内容 — Three.js 提供了哪些「基本部件」？\n\n| 类别 | 代表类 | 说明 |\n| -------- | ----------------------------------------------- | ------------------------------------------------------------------------------ |\n| **渲染器** | `WebGLRenderer` | 把 Scene + Camera 交给 GPU，输出到 ``；可切换 WebGL 1/2/WebXR 等后端 ([Three.js][1]) |\n| **场景图** | `Scene` + `Object3D` | 以 **树结构** 存放任何节点：`Mesh`、`Light`、`Group` 等；节点坐标/矩阵层级继承 ([Three.js][2]) |\n| **相机** | `PerspectiveCamera` / `OrthographicCamera` | 定义视锥或正交盒；决定从哪儿看场景 |\n| **几何体** | `BoxGeometry`、`SphereGeometry`、`BufferGeometry` | 顶点/索引/UV 等数据 |\n| **材质** | `MeshStandardMaterial`、`MeshPhysicalMaterial`… | PBR、透明度、双面、着色器自定义 |\n| **光源** | `AmbientLight`、`DirectionalLight`、`PointLight`… | 影响基于光照的材质 |\n| **控制器** | `OrbitControls`、`FirstPersonControls`… | 鼠标/触摸操纵相机 |\n| **加载器** | `GLTFLoader`、`TextureLoader`… | 异步加载模型、纹理、环境贴图 |\n| **动画系统** | `AnimationClip` + `AnimationMixer` | 帧动画、骨骼动画、插值 |\n\n---\n\n## 2 核心原理 — Three.js 为什么能「写几行就出效果」？\n\n1. **Retained‑Mode SceneGraph**\n\n * 你只描述 *“什么在场景里”*，Three.js 负责每帧遍历树，把世界矩阵传 shader。\n2. **WebGL 抽象层**\n\n * `WebGLRenderer` 把高阶 API（`MeshStandardMaterial`、阴影、后处理）下翻译成低阶 WebGL `bufferData/ drawElements`。\n3. **自动资源/状态管理**\n\n * 着色器、VAO、纹理、FBO 由内部缓存池复用；避免手撕 GL 状态机。\n4. **模块化 ES Module 架构**（r160+）\n\n * 每个功能都是独立 `jsm/` 子模块；浏览器原生 `import` 或打包器 tree‑shaking。\n\n---\n\n## 3 核心功能 — Three.js 能做什么？\n\n| 领域 | 关键 API / 插件 |\n| ---------------------------- | ----------------------------------------------------------------- |\n| **PBR 渲染链** | `MeshStandardMaterial`, `PMREMGenerator`, `ACESFilmicToneMapping` |\n| **后处理** | `EffectComposer`, `RenderPass`, `BloomPass`, `SSAO` |\n| **粒子 & GPGPU** | `Points`, `ShaderMaterial`, GPUParticle demo |\n| **WebXR / VR / AR** | `WebGLRenderer.setAnimationLoop`, `XRControllerModel` |\n| **物理加载** | `GLTFLoader`, `DRACOLoader`, `KTX2Loader`（BasisU） |\n| **自定义 Shader** | `ShaderMaterial`, `onBeforeCompile`, Node‑Material system |\n| **多渲染目标** | WebGL 2 `WebGLMultipleRenderTargets` |\n| **OffscreenCanvas / Worker** | `WebGLRenderer({canvas, context})` + transferable contexts |\n\n---\n\n## 4 核心用法 — “三件套 + 渲染循环” 典型骨架\n\n```js\nimport * as THREE from 'three';\nimport { OrbitControls } from 'three/addons/controls/OrbitControls.js';\n\nconst scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, .1, 1000);\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\nrenderer.setSize(innerWidth, innerHeight);\ndocument.body.appendChild(renderer.domElement);\n\n// 几何 + 材质 + 光\nconst mesh = new THREE.Mesh(new THREE.BoxGeometry(),\n new THREE.MeshStandardMaterial({metalness:.2, roughness:.5}));\nscene.add(mesh);\nscene.add(new THREE.AmbientLight(0xffffff, .8));\ncamera.position.set(0,0,2);\nnew OrbitControls(camera, renderer.domElement);\n\n// 主循环\nrenderer.setAnimationLoop((t)=>{\n mesh.rotation.y = mesh.rotation.x = t/2000;\n renderer.render(scene, camera);\n});\n```\n\n**常见陷阱**\n\n| 症状 | 快速排查 |\n| ------ | ---------------------------------------------------------------------------- |\n| 画布黑屏 | `renderer.setSize` 是否调用；材质是否需要光；浏览器 WebGL 是否被禁用 |\n| FPS 掉帧 | `renderer.info.render.calls` 统计 draw call；检查纹理过大或动态创建几何 |\n| 内存泄漏 | 动态删除时 `geometry.dispose()` + `material.dispose()`；取消 `requestAnimationFrame` |\n\n---\n\n### 参考路线图（继续深挖）\n\n| 阶段 | 学习材料 |\n| ---------- | ------------------------------------------------------------------------------ |\n| **入门** | “Creating a scene” 官方手册章节 ([Three.js][3]) |\n| **渲染原理** | Manual → Fundamentals 页 (图解 Renderer·SceneGraph) ([Three.js][2]) |\n| **API 细节** | 官方文档 `WebGLRenderer`, `Object3D`, `Material`… ([Three.js][1]) |\n| **性能调优** | Manual → Optimization 节 (“Lots of Objects”, “OffscreenCanvas”) ([Three.js][4]) |\n| **高级示例** | three.js/examples + discourse.threejs.org |\n\n[1]: https://threejs.org/docs/api/en/renderers/WebGLRenderer.html?utm_source=chatgpt.com \"WebGLRenderer – three.js docs\"\n[2]: https://threejs.org/manual/en/fundamentals.html?utm_source=chatgpt.com \"Fundamentals - Three.js\"\n[3]: https://threejs.org/manual/en/creating-a-scene.html?utm_source=chatgpt.com \"Creating a scene - Three.js\"\n[4]: https://threejs.org/manual/?utm_source=chatgpt.com \"three.js manual\"\n\n\n---\n\n## Babylon.js PBR\nBabylon.js 由微软工程师 David Catuhe 等人于 2013 年开源，目标是 **“面向游戏和可视化的一站式 3D 引擎”**。它采用 TypeScript 全代码，核心模块提供渲染、场景、动画、粒子、GUI、物理、骨骼、PBR 管线等 **完整功能栈**，并内置可视化 **Inspector**、**Node Material Editor**、**Playground** 在线沙盒。\n\nBabylon 以 **企业级稳定性** 为卖点：长期维护 LTS 分支、对 GLTF 2.0 / KTX2 / WebXR / WebGPU 等新标准快速跟进，并与微软 Mesh、Office 3D Viewer、Adobe Substance 3D 等产品深度集成。它强调“零配置即可跑”的开发体验，适合需要快速落地完整 3D/VR/AR 方案的 Web 项目。\n\n## 1 核心内容 — Babylon.js 提供了哪些「基本部件」？\n\n|类别|代表类 (Babylon.js)|与 Three.js 的类比|\n|---|---|---|\n|**引擎 & 渲染器**|`Engine`（构造时传 Canvas）|Three ➜ `WebGLRenderer`|\n|**场景树**|`Scene`, `TransformNode`, `Mesh`|Three ➜ `Scene`, `Object3D`|\n|**相机**|`ArcRotateCamera`, `UniversalCamera`, `FreeCamera`|Three ➜ `PerspectiveCamera` + Controls|\n|**几何体**|`MeshBuilder.CreateBox/Sphere/…`|Three ➜ `BoxGeometry`, `SphereGeometry`|\n|**材质**|`PBRMaterial`, `StandardMaterial`, `NodeMaterial`|Three ➜ `MeshPhysicalMaterial`, `MeshStandardMaterial`|\n|**光源**|`HemisphericLight`, `DirectionalLight`, `SpotLight`|类名不同，作用相同|\n|**加载器**|`SceneLoader.ImportMesh`, `AssetsManager`, 原生 GLTF 2.0 + KTX2 封装|Three ➜ `GLTFLoader`, `DRACOLoader`|\n|**系统插件**|`Inspector`、`GUI`、`Physics` 插件即开即用|Three 需社区插件或手写|\n|**管线模板**|`DefaultRenderingPipeline`, `HDRPipeline`, `SSAO2Pipeline`|Three 需手动 `EffectComposer` 组 Pass|\n\n---\n\n## 2 核心原理 — Babylon.js 的“设计哲学”\n\n1. **场景即状态机**\n 对象放到 `Scene` 树里后，Babylon 的渲染循环自动按顺序执行 **BeforeRender → Render → AfterRender** 回调；插件（Physics、Particles）注入到循环无需手写 `requestAnimationFrame`。\n\n2. **“Everything is Observable”**\n 几乎每个核心类都有 `onXXXObservable`（Observable 模式而非 DOM Event）；构造时即可订阅 GPU 压力、材质编译完成等事件。\n\n3. **内置 GUI & Inspector**\n 按 `Shift + Ctrl + I` 或 `scene.debugLayer.show()` → 弹出 **实时 Inspector**，查看/编辑材质、灯光、帧率，无需外部插件。\n\n4. **管线模板模式**\n 后处理、Bloom、ColorGrading 打包进 `DefaultRenderingPipeline`，开关即用；Three.js 则要自己连 `EffectComposer` Pass。\n\n\n---\n\n## 3 核心功能\n\n|模块|一行说明|Three.js 对应做法|\n|---|---|---|\n|**PBR**|`PBRMaterial` 完整金属/粗糙度、Iridescence、ClearCoat、Sheen|三的 `MeshPhysicalMaterial` 新版也支持，但参数名略不同|\n|**节点材质编辑器**|可视化 NodeMaterial Editor，导出 Shader 代码|Three 需 ShaderNode 或外部工具|\n|**Inspector**|场景调试、帧率、GPU 内存一键查看|Three 需 Spector.js 或手写 GUI|\n|**Physics**|一行启用 Ammo.js / Cannon.js / Havok 调度|Three 一般接入 Cannon/Ammo 手动同步|\n|**GUI 2D/3D**|`AdvancedDynamicTexture` 直接建按钮、滑块|Three 用 HTML/CSS or community libs|\n|**WebGPU**|`engine.initWebGPU()` 同 API 调到 WebGPU|Three WebGPU renderer 仍实验|\n|**性能级别检测**|`scene.getEngine().getHardwareScalingLevel()` & `SceneOptimizer` 动态降质|Three 没内置，需要手写|\n\n---\n\n## 4 核心用法 —— “Babylon.js 五步骨架”\n\n```html\n\n\n```\n\n---\n\n## 5 Babylon.js × Three.js 并列速查表\n\n|维度|**Babylon.js**|**Three.js**|\n|---|---|---|\n|项目定位|“一站式游戏/可视化引擎”|“轻量级 WebGL 抽象层”|\n|包体大小|core ≈ 900 KB (gzip)|core ≈ 250 KB (gzip)|\n|TypeScript 支持|TS 源码 + 100 % 声明|TS 声明，仅部分源码|\n|编辑器|NodeMaterial Editor, WebGPU Playground|Three.js Editor 项目 (较轻)|\n|调试|内置 Inspector UI|需 Spector.js 或 dat.GUI|\n|后处理|RenderingPipeline 打包|`EffectComposer` Pass 手动拼|\n|WebGPU|稳定 (`Engine` 自动切)|实验性 (需 `WebGPURenderer`)|\n|生态|GUI、Physics、XR 内置|庞大社区插件 (`three-stdlib`)|\n|引擎循环|内部驱动；`scene.registerBeforeRender`|手动 `requestAnimationFrame`|\n|学习曲线|API 饱满，概念多|API 小而易上手|\n\n---\n\n### 6 如何选择？\n\n|项目类型|推荐|\n|---|---|\n|轻量 3D 插图 / 数据可视化|**Three.js**：灵活、打包小|\n|Web 游戏 / 需要 GUI、物理、节点材质|**Babylon.js**：开箱全家桶|\n|需 WebGPU 提前踩坑|Babylon 的 WebGPU Backend 更成熟|\n|想用 Unity‑like 组件思维|Babylon 中的 `SceneLoader`, `Editor` 更贴近游戏引擎概念|\n" }