Vue.js

Appearance

On this page

序言 ​

为什么写这本书 ​

当你掌握了 3D 数学基础，拥有了向量、矩阵、四元数这些强大的工具，你是否想知道它们如何真正地在 GPU 中运作？如何让你的 3D 场景在屏幕上绘制出来？这就是 WebGL 的世界。

WebGL 是 Web 平台上直接操作 GPU 的强大 API。它基于 OpenGL ES 2.0，为浏览器带来了硬件加速的 3D 图形能力。然而，WebGL 的学习曲线是陡峭的：

  • 状态机模型让人困惑
  • 着色器语言（GLSL）需要重新学习
  • 渲染管线的复杂流程难以理解
  • 缓冲区、纹理、深度测试等概念繁多

许多开发者在学习 Three.js 时，虽然能够使用其高层 API 快速创建 3D 场景，但对底层的 WebGL 原理却一知半解。这导致在遇到性能问题、渲染 bug 或需要实现自定义效果时，往往束手无策。

本书的目标就是让你真正理解 WebGL 的工作原理，从最基础的概念开始，逐步构建一个完整的 WebGL 渲染器。你将不仅学会如何使用 WebGL，更重要的是理解它为什么这样设计，以及如何用它实现各种渲染效果。

本书的特色 ​

1. 从第一性原理出发 ​

本书不会简单地教你调用 WebGL API，而是从原理出发：

  • GPU 如何工作：理解 GPU 并行计算的本质
  • 渲染管线流程：深入理解每个阶段的作用
  • 状态机模型：为什么 WebGL 采用状态机设计
  • 着色器原理：理解 GLSL 与 GPU 的关系

理解了原理，你就能举一反三，应对任何复杂场景。

2. 渐进式实战项目 ​

本书采用项目驱动的方式，从零开始构建一个 WebGL 渲染器：

  • 阶段一：绘制第一个三角形（理解基础流程）
  • 阶段二：实现旋转的立方体（应用 3D 变换）
  • 阶段三：添加纹理和光照（完善视觉效果）
  • 阶段四：实现多物体场景（场景管理）
  • 阶段五：性能优化和高级特性（工程化）

每个阶段都有清晰的目标和可运行的代码，循序渐进地构建完整的渲染能力。

3. GLSL 着色器深度讲解 ​

着色器是 WebGL 的核心，本书将深入讲解：

  • GLSL 语言基础：数据类型、运算符、控制流
  • 顶点着色器：变换、坐标系转换、顶点属性处理
  • 片元着色器：颜色计算、纹理采样、光照计算
  • 着色器通信：Uniform、Attribute、Varying 的使用
  • 着色器优化：性能陷阱和最佳实践

你将能够自如地编写各种着色器，实现自定义的渲染效果。

4. 对比 Three.js 实现 ​

本书的所有内容都会对比 Three.js 的实现方式：

  • 封装对比：Three.js 如何封装 WebGL 的低层 API
  • 设计思路：理解 Three.js 的设计决策
  • 性能考虑：Three.js 的性能优化策略
  • 扩展能力：如何基于 Three.js 实现自定义渲染

学完本书，你将能够深刻理解 Three.js 的底层实现，甚至能够修改和扩展它。

适合谁读 ​

本书适合以下读者：

  • 掌握 3D 数学基础的开发者：已完成 Book 2 的学习，理解向量和矩阵
  • Three.js 使用者：能用 Three.js，但想深入理解其底层原理
  • 准备实现自定义渲染效果的开发者：需要编写自定义着色器
  • 对 GPU 编程感兴趣的开发者：想了解 GPU 和并行计算

前置知识要求：

  • ✅ 掌握 JavaScript 基础
  • ✅ 理解 3D 数学（向量、矩阵、坐标变换）——建议完成 Book 2
  • ✅ 了解基础的计算机图形学概念

如何阅读本书 ​

阅读路径 ​

本书按照从基础到高级的顺序组织：

  1. 第一部分（WebGL 基础）：理解 WebGL 的核心概念和工作流程
  2. 第二部分（着色器编程）：掌握 GLSL 语言和着色器开发
  3. 第三部分（渲染管线）：深入理解 GPU 渲染的每个阶段
  4. 第四至六部分（缓冲区、纹理、深度）：掌握 WebGL 的核心功能
  5. 第七至八部分（光照、高级特性）：实现复杂的渲染效果

学习建议 ​

  • 动手实践：每个概念都配有可运行的代码，必须动手实现
  • 理解原理：不要死记 API，要理解为什么这样设计
  • 调试技巧：学会使用浏览器的 WebGL 调试工具
  • 参考 Three.js：对比 Three.js 的实现，加深理解

配套资源 ​

  • 代码仓库：完整的 WebGL 渲染器实现
  • 在线演示：每个示例的交互式演示
  • 调试工具：WebGL Inspector、Spector.js 等工具使用指南
  • 练习项目：章节末尾的实战练习

本书结构 ​

全书共 8 个部分，43 个章节：

  • 第一部分（4章）：WebGL 基础——理解 WebGL 的核心概念
  • 第二部分（6章）：着色器编程——掌握 GLSL 语言
  • 第三部分（5章）：渲染管线——深入理解 GPU 工作流程
  • 第四部分（5章）：缓冲区系统——高效传递数据到 GPU
  • 第五部分（6章）：纹理系统——实现丰富的视觉效果
  • 第六部分（5章）：深度测试与混合——处理遮挡和透明
  • 第七部分（6章）：光照系统——实现真实的光照效果
  • 第八部分（6章）：高级特性——性能优化和高级渲染技术

写作约定 ​

  • 代码风格：使用现代 JavaScript（ES6+）和 WebGL 2.0
  • API 版本：主要使用 WebGL 2.0，兼顾 WebGL 1.0
  • 着色器版本：GLSL ES 3.00（WebGL 2.0）
  • 命名规范：遵循 WebGL 社区的通用约定

与其他图形 API 的关系 ​

  • OpenGL ES：WebGL 基于 OpenGL ES 2.0/3.0
  • WebGPU：新一代图形 API，本书会对比其设计理念
  • Vulkan/Metal/DirectX：底层图形 API 的设计思想

致谢 ​

感谢 Khronos Group 制定和维护 WebGL 标准，感谢 Three.js、Babylon.js 等优秀开源项目为 WebGL 生态做出的贡献。

现在，让我们深入 GPU 的世界，开始这段激动人心的 WebGL 学习之旅！

准备好了吗？让我们开始吧！

在 GitHub 上编辑此页