WebGL 基础教学大纲与目录
课程概述
课程简介
本系列教程将带你从零开始学习 WebGL，掌握 GPU 图形编程的核心技术。WebGL（Web Graphics Library）是一种在浏览器中渲染 2D 和 3D 图形的 JavaScript API，它基于 OpenGL ES 标准，让开发者能够直接操控 GPU 进行高性能图形渲染。
为什么学习 WebGL？
| 应用领域 | 说明 |
|---|---|
| 游戏开发 | 高性能的 2D/3D 游戏引擎基础 |
| 数据可视化 | 大规模数据的实时渲染 |
| 3D 展示 | 产品展示、建筑可视化、医学成像 |
| 图像处理 | GPU 加速的图像滤镜和特效 |
| 创意编程 | Shader Art、生成艺术 |
| VR/AR | WebXR 的基础技术 |
学习目标
通过本系列学习，你将能够：
- 理解 GPU 渲染原理：掌握图形渲染管线的工作流程
- 编写着色器程序：熟练使用 GLSL 进行 GPU 编程
- 管理图形数据：掌握缓冲区、纹理、帧缓冲等核心概念
- 实现 3D 场景：构建包含变换、光照、材质的完整场景
- 优化渲染性能：理解性能瓶颈并掌握优化技巧
- 开发实际应用：能够独立开发 WebGL 应用
前置知识
| 必需 | 建议 |
|---|---|
| JavaScript 基础 | Canvas 2D 经验 |
| HTML/CSS 基础 | 线性代数基础 |
| - | 计算机图形学概念 |
课程目录
第1章：WebGL 概述与环境搭建
核心问题：什么是 WebGL？如何开始第一个程序？
| 小节 | 内容要点 |
|---|---|
| 1.1 WebGL 简介 | 什么是 WebGL、发展历史、版本比较 |
| 1.2 WebGL 与 Canvas 2D | 两者的区别、适用场景 |
| 1.3 开发环境准备 | 浏览器支持、开发工具、调试插件 |
| 1.4 获取 WebGL 上下文 | getContext、上下文属性 |
| 1.5 第一个 WebGL 程序 | 清屏、绘制第一个三角形 |
| 1.6 WebGL 状态机 | 状态管理、常见陷阱 |
学习目标：搭建环境，绘制第一个图形
第2章：渲染管线详解
核心问题：GPU 是如何渲染图形的？
| 小节 | 内容要点 |
|---|---|
| 2.1 管线概述 | 可编程管线 vs 固定管线 |
| 2.2 顶点处理 | 顶点着色器、顶点属性 |
| 2.3 图元装配 | 点、线、三角形、图元类型 |
| 2.4 光栅化 | 片段生成、插值 |
| 2.5 片段处理 | 片段着色器、每像素操作 |
| 2.6 帧缓冲输出 | 深度测试、模板测试、混合 |
学习目标：深入理解 GPU 渲染管线
第3章：着色器与 GLSL
核心问题：如何编写着色器程序？
| 小节 | 内容要点 |
|---|---|
| 3.1 着色器程序 | 创建、编译、链接、错误处理 |
| 3.2 GLSL 基础 | 数据类型、向量、矩阵 |
| 3.3 变量限定符 | attribute、uniform、varying |
| 3.4 内置变量 | gl_Position、gl_FragColor、gl_PointSize |
| 3.5 内置函数 | 数学函数、几何函数、纹理函数 |
| 3.6 着色器优化 | 精度限定、分支避免、常见技巧 |
学习目标：掌握 GLSL 着色器编程
第4章：缓冲区与顶点数据
核心问题：如何向 GPU 传递顶点数据？
| 小节 | 内容要点 |
|---|---|
| 4.1 缓冲区对象 | createBuffer、bindBuffer、bufferData |
| 4.2 顶点属性 | vertexAttribPointer、enableVertexAttribArray |
| 4.3 交错数据 | 多属性打包、步长与偏移 |
| 4.4 索引缓冲 | ELEMENT_ARRAY_BUFFER、drawElements |
| 4.5 VAO | WebGL2 顶点数组对象、状态封装 |
| 4.6 动态更新 | bufferSubData、映射缓冲 |
学习目标：掌握顶点数据的管理和传递
第5章：纹理与采样
核心问题：如何在 WebGL 中使用纹理？
| 小节 | 内容要点 |
|---|---|
| 5.1 纹理基础 | 创建、绑定、图像上传 |
| 5.2 纹理参数 | 环绑模式、过滤模式 |
| 5.3 Mipmap | 生成、使用、LOD |
| 5.4 纹理单元 | 多纹理、activeTexture |
| 5.5 纹理格式 | RGB、RGBA、压缩纹理 |
| 5.6 特殊纹理 | 立方体贴图、浮点纹理、数据纹理 |
学习目标：掌握纹理系统的使用
第6章：矩阵变换与相机
核心问题：如何实现 3D 场景的变换和观察？
| 小节 | 内容要点 |
|---|---|
| 6.1 模型矩阵 | 平移、旋转、缩放 |
| 6.2 视图矩阵 | lookAt、相机位置与朝向 |
| 6.3 投影矩阵 | 正交投影、透视投影 |
| 6.4 MVP 矩阵 | 变换顺序、矩阵传递 |
| 6.5 相机控制 | 轨道相机、第一人称相机 |
| 6.6 矩阵库 | gl-matrix 使用 |
学习目标：掌握 3D 变换和相机系统
第7章：光照与材质
核心问题：如何实现真实感光照效果？
| 小节 | 内容要点 |
|---|---|
| 7.1 光照模型 | 环境光、漫反射、镜面反射 |
| 7.2 Phong 模型 | 公式推导、着色器实现 |
| 7.3 法线 | 法线计算、法线变换、法线贴图 |
| 7.4 光源类型 | 平行光、点光源、聚光灯 |
| 7.5 PBR 基础 | 物理材质、粗糙度、金属度 |
| 7.6 阴影 | 阴影映射、PCF 软阴影 |
学习目标：理解光照模型和材质系统
第8章：帧缓冲与离屏渲染
核心问题：如何实现渲染到纹理和后处理？
| 小节 | 内容要点 |
|---|---|
| 8.1 帧缓冲对象 | createFramebuffer、附件类型 |
| 8.2 渲染到纹理 | 颜色附件、读取像素 |
| 8.3 深度缓冲 | 深度纹理、深度附件 |
| 8.4 后处理 | 模糊、泛光、色调映射 |
| 8.5 多渲染目标 | MRT、延迟渲染基础 |
| 8.6 抗锯齿 | MSAA、FXAA |
学习目标：掌握离屏渲染和后处理技术
第9章：混合与深度测试
核心问题：如何正确处理透明和遮挡？
| 小节 | 内容要点 |
|---|---|
| 9.1 深度测试 | 开启、深度函数、深度写入 |
| 9.2 深度问题 | Z-fighting、深度精度 |
| 9.3 Alpha 混合 | blendFunc、混合方程 |
| 9.4 透明物体 | 渲染顺序、OIT 技术 |
| 9.5 模板测试 | 模板缓冲、模板操作 |
| 9.6 裁剪与遮挡 | scissor、遮挡剔除 |
学习目标：掌握混合和深度处理
第10章：WebGL2 新特性
核心问题：WebGL2 带来了哪些改进？
| 小节 | 内容要点 |
|---|---|
| 10.1 WebGL2 概述 | 新特性列表、兼容性 |
| 10.2 GLSL ES 3.0 | 新语法、新特性 |
| 10.3 VAO 与 UBO | 顶点数组对象、统一缓冲对象 |
| 10.4 3D 纹理 | 体积纹理、2D 数组纹理 |
| 10.5 变换反馈 | GPU 粒子系统 |
| 10.6 实例化渲染 | drawArraysInstanced |
学习目标：了解 WebGL2 的新特性
第11章：性能优化与调试
核心问题：如何优化 WebGL 应用性能？
| 小节 | 内容要点 |
|---|---|
| 11.1 Draw Call | 批处理、实例化 |
| 11.2 状态切换 | 纹理绑定、着色器切换 |
| 11.3 内存管理 | 纹理压缩、资源释放 |
| 11.4 GPU 分析 | Chrome GPU 面板、Spector.js |
| 11.5 移动端优化 | 功耗、精度、兼容性 |
| 11.6 常见问题 | 黑屏、闪烁、内存泄漏 |
学习目标：掌握性能优化和调试技巧
第12章：实战案例集
核心问题：如何综合运用 WebGL 技术？
| 小节 | 内容要点 |
|---|---|
| 12.1 2D 精灵渲染 | 批量精灵、纹理图集 |
| 12.2 粒子系统 | GPU 粒子、变换反馈 |
| 12.3 图像滤镜 | 卷积、LUT、特效 |
| 12.4 3D 模型加载 | OBJ/glTF 解析 |
| 12.5 数据可视化 | 大规模点云、热力图 |
| 12.6 Shader 特效 | 水波、火焰、扭曲 |
学习目标：通过实战案例掌握 WebGL
学习路线
基础阶段（第1-4章）
WebGL 概述 → 渲染管线 → 着色器 → 缓冲区
↓ ↓ ↓ ↓
环境搭建 理解 GPU GLSL 编程 顶点数据核心技能：
- 能够创建 WebGL 上下文
- 理解渲染管线流程
- 编写基本着色器
- 传递顶点数据
进阶阶段（第5-8章）
纹理 → 变换 → 光照 → 帧缓冲
↓ ↓ ↓ ↓
贴图 3D 变换 材质 后处理核心技能：
- 使用纹理贴图
- 实现 3D 变换
- 添加光照效果
- 进行后处理
高级阶段（第9-12章）
混合/深度 → WebGL2 → 性能优化 → 实战项目
↓ ↓ ↓ ↓
透明物体 新特性 调试分析 综合应用核心技能：
- 处理透明物体
- 使用 WebGL2 特性
- 性能优化
- 完整项目开发
学习资源
官方文档
| 资源 | 链接 |
|---|---|
| MDN WebGL | https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API |
| WebGL Spec | https://www.khronos.org/webgl/ |
| GLSL Reference | https://www.khronos.org/opengles/sdk/docs/manglsl/ |
推荐工具
| 工具 | 用途 |
|---|---|
| Spector.js | WebGL 调试、帧分析 |
| WebGL Inspector | Chrome 扩展 |
| Shader Editor | VS Code 扩展 |
| gl-matrix | 矩阵运算库 |
学习网站
| 网站 | 说明 |
|---|---|
| WebGL Fundamentals | 优秀的入门教程 |
| Learn OpenGL | OpenGL 教程（原理相通） |
| Shadertoy | 着色器创意平台 |
| The Book of Shaders | 着色器艺术入门 |
章节导航
| 章节 | 文件名 | 状态 |
|---|---|---|
| 第0章 | 00-教学大纲与目录.md | ✅ |
| 第1章 | 01-WebGL概述与环境搭建.md | ⏳ |
| 第2章 | 02-渲染管线详解.md | ⏳ |
| 第3章 | 03-着色器与GLSL.md | ⏳ |
| 第4章 | 04-缓冲区与顶点数据.md | ⏳ |
| 第5章 | 05-纹理与采样.md | ⏳ |
| 第6章 | 06-矩阵变换与相机.md | ⏳ |
| 第7章 | 07-光照与材质.md | ⏳ |
| 第8章 | 08-帧缓冲与离屏渲染.md | ⏳ |
| 第9章 | 09-混合与深度测试.md | ⏳ |
| 第10章 | 10-WebGL2新特性.md | ⏳ |
| 第11章 | 11-性能优化与调试.md | ⏳ |
| 第12章 | 12-实战案例集.md | ⏳ |
文档版本：v1.0
更新日期：2026-01-29
作者：技术团队