Appearance
序言
为什么写这本书
掌握了 WebGL 的基础知识后，你已经能够绘制 3D 场景、应用纹理、实现基础光照。但是，当你尝试构建一个真正的 3D 应用时，会发现很多问题：
- 如何管理复杂的 3D 场景？
- 如何实现相机的自由控制？
- 如何让材质系统更加灵活？
- 如何实现阴影效果？
- 如何优化渲染性能？
这些正是现代 3D 引擎需要解决的核心问题。Three.js、Babylon.js 等成熟的 3D 引擎，都有一套完整的解决方案。本书的目标就是系统讲解这些核心技术，让你理解现代 3D 引擎的设计思想，为学习 Three.js 源码和手写 Three.js 做好准备。
本书的特色
1. 场景图深度剖析
场景图（Scene Graph）是 3D 引擎的核心数据结构：
- 树形结构设计：理解父子节点的关系
- 变换继承机制：如何实现变换的层级传播
- 渲染遍历算法：如何高效地遍历和渲染场景
- 空间查询优化：如何快速查找和过滤对象
你将实现一个完整的场景图系统，理解 Three.js 的 Object3D 继承体系。
2. PBR 材质系统
基于物理的渲染（PBR）是现代游戏和 3D 应用的标准：
- PBR 理论基础：理解金属度和粗糙度
- 材质属性系统：设计灵活的材质参数
- 着色器实现：用 GLSL 实现 PBR 材质
- 材质编辑器：构建可视化的材质编辑工具
学完后，你将能够实现媲美游戏引擎的材质效果。
3. 阴影系统详解
阴影是提升场景真实感的关键：
- Shadow Mapping 原理：理解阴影贴图技术
- 阴影失真问题：深入分析并解决常见问题
- 软阴影实现：PCF、PCSS 等技术详解
- 级联阴影贴图：处理大场景的阴影
你将掌握各种阴影技术的原理和实现。
4. 性能优化实战
性能优化是 3D 应用的永恒主题：
- 视锥体剔除：避免渲染不可见物体
- LOD 技术：根据距离切换模型细节
- 批量渲染：减少 Draw Call
- 实例化渲染：高效渲染大量相同物体
- 空间分割：八叉树、BVH 等加速结构
你将掌握各种性能优化技术，让场景流畅运行。
适合谁读
本书适合以下读者：
- 掌握 WebGL 基础的开发者：已完成 Book 3 的学习
- 准备学习 Three.js 源码的开发者：需要理解引擎的设计思想
- 希望实现高级渲染效果的开发者：PBR、阴影、后处理等
- 对游戏引擎感兴趣的开发者：想了解 3D 引擎的核心技术
前置知识要求：
- ✅ 掌握 WebGL API 和着色器编程（Book 3）
- ✅ 理解 3D 数学基础（Book 2）
- ✅ 熟悉基础的计算机图形学概念
如何阅读本书
阅读路径
本书按照从架构到细节的顺序组织：
- 第一至二部分（场景图与相机）：理解 3D 引擎的核心架构
- 第三至四部分（材质与光照）：实现真实的渲染效果
- 第五至六部分（几何与性能）：优化和扩展渲染能力
学习建议
- 构建渲染引擎：跟随本书逐步构建完整的渲染引擎
- 对比 Three.js：学习每个功能时，参考 Three.js 的实现
- 实战项目：用学到的技术实现一个完整的 3D 场景
- 性能测试：使用性能分析工具优化你的场景
配套资源
- 代码仓库：完整的渲染引擎实现
- 在线演示：每个功能的交互式演示
- 性能分析：使用 Chrome DevTools 进行性能分析
- 实战项目：完整的 3D 场景项目
本书结构
全书共 6 个部分，40 个章节：
- 第一部分（6章）：场景图系统——3D 引擎的核心架构
- 第二部分（6章）：相机系统——实现灵活的视角控制
- 第三部分（7章）：材质系统——从基础到 PBR
- 第四部分（7章）：光照与阴影——真实的光影效果
- 第五部分（6章）：几何体系统——高效的几何数据管理
- 第六部分（8章）：性能优化——让场景流畅运行
写作约定
- 代码风格：使用 TypeScript 和面向对象设计
- 设计模式：应用工厂模式、观察者模式等
- API 设计：参考 Three.js 的 API 风格
- 性能优先：所有实现都考虑性能优化
与 Three.js 的关系
本书的内容设计与 Three.js 紧密对应：
- 概念对齐：每个概念都能在 Three.js 中找到对应
- API 相似：实现的 API 与 Three.js 保持一致
- 源码准备：为阅读 Three.js 源码做好准备
致谢
感谢 Three.js 社区的贡献，感谢 Unreal Engine、Unity 等游戏引擎的开源文档和技术分享。
现在，让我们开始构建自己的 3D 渲染引擎！
准备好迎接挑战了吗？让我们开始！