WebGL高级编程

第1章 WebGL简介

1.1 WebGL基础

1.2 浏览器3D图形吸引人的原因

1.3 设计一个图形API

1.3.1 即时模式API

1.3.2 保留模式API

1.4 图形硬件简介

1.4.1 GPU

1.4.2 帧缓存

1.4.3 纹理存储器

1.4.4 视频控制器

1.5 WebGL图形流水线

1.5.1 顶点着色器

1.5.2 图元装配

1.5.3 光栅化

第1章 WebGL简介

1.1 WebGL基础

1.2 浏览器3D图形吸引人的原因

1.3 设计一个图形API

1.3.1 即时模式API

1.3.2 保留模式API

1.4 图形硬件简介

1.4.1 GPU

1.4.2 帧缓存

1.4.3 纹理存储器

1.4.4 视频控制器

1.5 WebGL图形流水线

1.5.1 顶点着色器

1.5.2 图元装配

1.5.3 光栅化

1.5.4 片段着色器

1.5.5 逐片段操作

1.6 WebGL与其他图形技术的比较

1.6.1 OpenGL

1.6.2 OpenGL ES 2.0

1.6.3 Direct3D

1.6.4 HTML5画布

1.6.5 可缩放矢量图形

1.6.6 VRML与X3D

1.7 线性代数简介

1.7.1 坐标系

1.7.2 点与顶点

1.7.3 矢量

1.7.4 矢量的点积或标积

1.7.5 叉积

1.7.6 齐次坐标

1.7.7 矩阵

1.7.8 仿射变换

1.8 小结

第2章 创建基本的WebGL示例

2.1 绘制三角形

2.1.1 创建WebGL上下文

2.1.2 创建顶点着色器和片段着色器

2.1.3 编译着色器

2.1.4 创建程序对象和链接着色器

2.1.5 建立缓冲

2.1.6 绘制场景

2.2 了解WebGL编码风格

2.3 调试WebGL应用程序

2.3.1 使用Chrome开发人员工具

2.3.2 Firebug的使用

2.3.3 WebGL的错误处理与错误代码

2.3.4 WebGL Inspector

2.3.5 WebGL的故障排除

2.4 用DOM API载入着色器

2.5 更高级的综合示例

2.6 小结

第3章 绘制

3.1 使用WebGL绘制图元和绘图方法

3.1.1 图元

3.1.2 顶点组绕顺序的重要性

3.1.3 WebGL的绘图方法

3.2 类型化数组

3.2.1 缓冲与视图

3.2.2 WebGL支持的视图类型

3.3 探讨不同的绘图方法

3.3.1 gl.drawArrays()和gl.TRIANGLES

3.3.2 gl.drawArrays()方法和gl.TRIANGLE_STRIP图元

3.3.3 gl.drawElements()方法和gl.TRIANGLES图元

3.3.4 gl.drawElements()方法和gl.TRIANLE_STRIP图元

3.3.5 总结比较

3.3.6 前期变换顶点缓存和后期变换顶点缓存

3.4 为提高性能交叉存放顶点数据

3.5 使用顶点数组或常量顶点数据

3.6 总结本章的最后一个示例

3.7 小结

第4章 小型JavaScript库与变换

4.1 JavaScript中矩阵和向量的操作

4.1.1 Sylvester库

4.1.2 WebGL-mjs库

4.1.3 glMatrix库

4.2 变换运算

4.3 理解完整的变换流水线

4.4 变换的实践

4.4.1 为对象坐标设置缓冲

4.4.2 用JavaScript创建变换矩阵并上传给着色器

4.4.3 将变换矩阵上传给GPU中的顶点着色器

4.4.4 调用绘图方法

4.5 理解变换顺序的重要性

4.5.1 使用一个固定的全局的坐标系

4.5.2 使用移动的局部的坐标系

4.5.3 变换矩阵的入栈和出栈操作

4.6 一个完整的示例：绘制几个变换后的对象

4.6.1 使用WebGL代码创建立方体

4.6.2 视图变换和模型变换的组织

4.7 小结

第5章 纹理贴图

5.1 理解丢失上下文

5.1.1 理解解决丢失上下文问题所需要的设置

5.1.2 处理丢失上下文问题时需要考虑的几个因素

5.2 2D纹理与立方映射纹理

5.3 载入纹理

5.3.1 创建WebGLTexture对象

5.3.2 绑定纹理

5.3.3 载入图像数据

5.3.4 将纹理上传到GPU

5.3.5 定义纹理参数

5.3.6 理解载入纹理的完整过程

5.3.7 创建一个纹理对象并载入纹理数据

5.4 定义纹理坐标

5.5 着色器中的纹理处理

5.6 处理纹理过滤

5.6.1 纹理伸展

5.6.2 纹理收缩

5.6.3 Mip映射纹理

5.7 理解纹理坐标包装

5.7.1 应用gl.REPEAT包装模式

5.7.2 应用gl.MIRRORED_REPEAT包装模式

5.7.3 应用gl.CLAMP_TO_EDGE包装模式

5.8 一个完整的应用纹理示例

5.9 获得用作纹理的图像

5.9.1 下载免费纹理

5.9.2 用自己拍摄的照片生成纹理

5.9.3 绘制图像

5.9.4 购买纹理

5.10 同域策略与跨域资源共享

5.10.1 同域策略应用于一般的图像

5.10.2 同域策略应用于纹理

5.10.3 跨域资源共享

5.11 小结

第6章 动画与用户输入

6.1 创建动画场景

6.1.1 setInterval()和setTimeout()的使用

6.1.2 使用requestAnimationFrame()函数

6.1.3 帧频不同引起的运动补偿

6.1.4 创建FPS计数器测量动画的平稳性

6.1.5 用FPS作为测量值的缺点

6.2 用户交互事件的处理

6.2.1 DOM Level 0基本事件处理

6.2.2 DOM Level 2——高级事件处理方法

6.2.3 键盘输入

6.2.4 鼠标输入

6.3 综合应用新知识

6.4 小结

第7章 光照

7.1 光源

7.2 局部光照模型的工作原理

7.3 Phong反射模型

7.3.1 环境反射

7.3.2 漫反射

7.3.3 镜面反射

7.3.4 Phong反射模型的完整公式和着色器

7.3.5 光照效果与纹理相结合

7.4 WebGL光照中需要的JavaScript代码

7.4.1 为顶点法线设置缓存

7.4.2 计算法线矩阵并上传给着色器

7.4.3 将光照信息上传给着色器

7.5 将不同的插值方法用于着色

7.5.1 平面着色

7.5.2 Gouraud着色

7.5.3 Phong着色

7.6 矢量必须归一化

7.6.1 顶点着色器中的矢量归一化

7.6.2 片段着色器的矢量归一化

7.7 应用不同类型的光源

7.7.1 平行光

7.7.2 点光源

7.7.3 聚光源

7.8 光强衰减

7.9 光照映射

7.10 小结

第8章 WebGL性能优化

8.1 WebGL底层工作机制

8.1.1 支持WebGL的硬件

8.1.2 关键的软件组成

8.2 WebGL性能优化

8.2.1 避免初学者的典型错误

8.2.2 确定瓶颈位置

8.2.3 有关性能的一般性建议

8.2.4 改善CPU受限的WebGL应用程序性能的建议

8.2.5 改善顶点受限的WebGL应用程序性能的建议

8.2.6 改善像素受限的WebGL应用程序性能的建议

8.3 深入分析融合

8.3.1 融合简介

8.3.2 设置融合函数

8.3.3 绘制顺序与深度缓冲区

8.3.4 绘制包含不透明对象和半透明对象的场景

8.3.5 修改融合公式中的默认运算符

8.3.6 使用预乘alpha值

8.4 深入讨论WebGL

8.4.1 使用WebGL框架

8.4.2 发布到Google Chrome Web Store

8.4.3 使用额外资源

8.5 小结

《WebGL高级编程--开发Web3D图形》向读者介绍如何开发基于WebGL的Web应用程序。虽然WebGL
API可用来硬件加速2D图形和3D图形，但是它的主要作用是用来创建3D图形。3D图形API的一些图书只介绍API本身，并没有对3D图形或如何使用API进行较多的介绍。本书不要求读者具备任何3D图形的理论基础。希望读者通过本书的学习能够掌握3D图形基础知识，以及学会用WebGL
API 开发Web应用程序。
此外，本书还介绍线性代数的部分基础知识，这有助于读者深入理解3D图形和WebGL底层的运行机制。掌握了线性代数的基本知识，读者就可以把重点放在线性代数中3D图形重要的部分。读者不需要去阅读厚达几百页的通用线性代数教材，这些图书通常以通用和抽象的方式介绍每个专题。如果读者属于只想很快开始编写代码的一类用户，不需要阅读线性代码一节的全部内容(主要是第1章的部分内容)。读者可以跳过这部分内容。若后来发现某些问题与线性代数有关，则可以回过头来再仔细阅读相关内容。