👉 目录大纲 ​

一、前言 ​

• 1. 导读

  • 初心

  • 写作动力

二、WebGL基础 ​

• 1. 初识WebGL

  • WebGL 是什么？

  • WebGL 三要素

  • canvas

  • 第一个 WebGL 程序

  • WebGL 坐标

• 2. WebGL绘制点

  • 什么是着色器？

  • 编写简单的着色器代码

  • 清空绘图区

  • 绘制一个点

• 3. WebGL绘制动态点

  • 动态传递顶点坐标

  • attribute 变量

  • 鼠标交互绘制点

  • 缓存颜色缓冲区

• 4. 绘制动态颜色点

  • uniform 变量

  • varying 变量

  • uniform 、 varying 之间的区别

• 5. WebGL绘制线和三角

  • 缓冲区对象

  • 使用WebGL缓冲区

  • 绘制线和三角

• 6. WebGL绘制基本图形

  • 绘制LINE的组合图形

  • 绘制TRIANGLE的组合图形

三、WebGL颜色和纹理 ​

• 1. 绘制彩色的三角

  • 多个缓冲区对象

  • gl.vertexAttribPointer的神奇参数

• 2. 为什么会出现颜色渐变

  • 图形装配和光栅化

  • 片元着色器是如何工作的？

  • varying 变量的内插过程

• 3. 实战消除锯齿

  • 什么是锯齿

  • 实战准备阶段

  • 实战 gl_FragCoord 消除锯齿

• 4. 初探纹理图像

  • 什么是纹理图像

  • 纹理坐标

  • 第一张纹理图片

• 5. 深入纹理细节之FILTER

  • FILTER配置详解

  • 解惑TEXTURE_MIN_FILTER

  • 金字塔纹理MIPMAP

• 6. 深入WRAP和多纹理

  • WRAP参数详解

  • 多幅纹理

四、WebGL二维动画 ​

• 1. 会动的三角形

  • 平移

  • 缩放

  • 旋转

• 2. 图形学的数学基础

  • 认识矢量

  • 1. 矢量加减法

  • 2. 矢量乘法

  • 认识矩阵

  • 1. 矩阵基本运算

  • 2. 矩阵乘法

  • WebGL中的矢量和矩阵

• 3. 用矩阵实战图形变换

  • 为什么要用矩阵？

  • 矩阵的应用推导

  • 矩阵实战平移

  • 实战其他的变换

• 4. 图形的复合变换

  • 复合变换和矩阵

  • JavaScript与矩阵

  • 三角形的平移&旋转

• 5. 图形的2D动画

  • 什么是动画？

  • WebGL实现动画

五、WebGL三维世界 ​

• 1. 打开3D世界的大门

  • 如何绘制3D图形

  • 绘制第一个立方体

• 2. 深入立方体的绘制

  • 构造立方体数据

  • 实战线立方体

  • 深度测试

• 3. 奇妙的相机

  • 什么是相机？

  • 了解视图矩阵

  • 用相机观察图形

• 4. 进阶——推导视图矩阵

  • 理解视图矩阵

  • 推导视图矩阵

• 5. 实战相机渲染引擎

  • 用js实现视图矩阵

  • 实战视图矩阵变换

• 6. 正交投影

  • 了解投影变换

  • 正交投影

  • 推导正交投影矩阵

  • 实战正交投影矩阵

• 7. 透视投影

  • 了解透视投影

  • 透视投影矩阵

  • 如何表示透视投影？

  • 实战透视投影

• 8. 粒子动画——实战MVP变换

  • 实战目标

  • 模型矩阵Model

  • 视图矩阵View

  • 投影矩阵Projection

六、WebGL光照 ​

• 1. 初识光照

  • 光照的本质

  • 光源类型

  • 反射类型

  • 法线

  • 实战平行光的漫反射效果

• 2. 环境光的漫反射

  • 环境反射

  • 实战漫反射和环境反射

• 3. 初识点光源

  • 点光源

  • 实战点光源的漫反射

• 4. 光照效果与旋转

  • 物体发生旋转会怎么样

  • 旋转物体光照的正确打开方式

• 5. 逐片元的点光源

  • 逐顶点的不足

  • 实战逐片元光照

七、模型与实战 ​

• 1. 认识三维模型

  • 什么是三维模型

  • 认识 OBJ 文件

  • 实战导入三维模型

• 2. 模型渲染器