WebGL高级编程：开发Web3D图形

目录

WebGL简介1
1.1 WebGL基础1
1.2 浏览器3D图形吸引人的原因2
1.3 设计一个图形API3
1.3.1 即时模式API3
1.3.2 保留模式API3
1.4 图形硬件简介4
1.4.1 GPU4
1.4.2 帧缓存5
1.4.3 纹理存储器6
1.4.4 视频控制器6
1.5 WebGL图形流水线6
1.5.1 顶点着色器8
1.5.2 图元装配11
1.5.3 光栅化12
1.5.4 片段着色器12
1.5.5 逐片段操作15
1.6 WebGL与其他图形技术的比较16
1.6.1 OpenGL16
1.6.2 OpenGL ES 2.018
1.6.3 Direct3D19
1.6.4 HTML5画布21
1.6.5 可缩放矢量图形25
1.6.6 VRML与X3D26
1.7 线性代数简介27
1.7.1 坐标系27
1.7.2 点与顶点27
1.7.3 矢量28
1.7.4 矢量的点积或标积29
1.7.5 叉积30
1.7.6 齐次坐标31
1.7.7 矩阵31
1.7.8 仿射变换34
1.8 小结39
第2章 创建基本的WebGL示例41
2.1 绘制三角形41
2.1.1 创建WebGL上下文45
2.1.2 创建顶点着色器和片段着色器47
2.1.3 编译着色器48
2.1.4 创建程序对象和链接着色器48
2.1.5 建立缓冲50
2.1.6 绘制场景51
2.2 了解WebGL编码风格52
2.3 调试WebGL应用程序53
2.3.1 使用Chrome开发人员工具53
2.3.2 Firebug的使用59
2.3.3 WebGL的错误处理与错误代码61
2.3.4 WebGL Inspector64
2.3.5 WebGL的故障排除70
2.4 用DOM API载入着色器71
2.5 ***的综合示例73
2.6 小结77
第3章 绘制79
3.1 使用WebGL绘制图元和绘图方法79
3.1.1 图元80
3.1.2 顶点组绕顺序的重要性84
3.1.3 WebGL的绘图方法85
3.2 类型化数组91
3.2.1 缓冲与视图91
3.2.2 WebGL支持的视图类型92
3.3 探讨不同的绘图方法93
3.3.1 gl.drawArrays()和gl.TRIANGLES94
3.3.2 gl.drawArrays()方法和gl.TRIANGLE_STRIP图元96
3.3.3 gl.drawElements()方法和gl.TRIANGLES图元98
3.3.4 gl.drawElements()方法和gl.TRIANLE_STRIP图元100
3.3.5 总结比较102
3.3.6 前期变换顶点缓存和后期变换顶点缓存102
3.4 为提高性能交叉存放顶点数据104
3.5 使用顶点数组或常量顶点数据113
3.6 总结本章的*后一个示例114
3.7 小结124
第4章 小型库与变换127
4.1 中矩阵和向量的操作127
4.1.1 Sylvester库128
4.1.2 WebGL-mjs库132
4.1.3 glMatrix库135
4.2 变换运算139
4.3 理解完整的变换流水线145
4.4 变换的实践146
4.4.1 为对象坐标设置缓冲147
4.4.2 用创建变换矩阵并上传给着色器148
4.4.3 将变换矩阵上传给GPU中的顶点着色器148
4.4.4 调用绘图方法149
4.5 理解变换顺序的重要性150
4.5.1 使用一个固定的全局的坐标系150
4.5.2 使用移动的局部的坐标系153
4.5.3 变换矩阵的入栈和出栈操作154
4.6 一个完整的示例：绘制几个变换后的对象157
4.6.1 使用WebGL代码创建立方体159
4.6.2 视图变换和模型变换的组织161
4.7 小结162
第5章 纹理贴图163
5.1 理解丢失上下文164
5.1.1 理解解决丢失上下文问题所需要的设置164
5.1.2 处理丢失上下文问题时需要考虑的几个因素166
5.2 2D纹理与立方映射纹理169
5.3 载入纹理170
5.3.1 创建WebGLTexture对象170
5.3.2 绑定纹理171
5.3.3 载入图像数据171
5.3.4 将纹理上传到GPU173
5.3.5 定义纹理参数174
5.3.6 理解载入纹理的完整过程175
5.3.7 创建一个纹理对象并载入纹理数据177
5.4 定义纹理坐标178
5.5 着色器中的纹理处理180
5.6 处理纹理过滤183
5.6.1 纹理伸展184
5.6.2 纹理收缩185
5.6.3 Mip映射纹理186
5.7 理解纹理坐标包装188
5.7.1 应用gl.REPEAT包装模式188
5.7.2 应用gl.MIRRORED_REPEAT包装模式190
5.7.3 应用gl.CLAMP_TO_EDGE包装模式191
5.8 一个完整的应用纹理示例191
5.9 获得用作纹理的图像194
5.9.1 下载免费纹理194
5.9.2 用自己拍摄的照片生成纹理194
5.9.3 绘制图像195
5.9.4 购买纹理195
5.10 同域策略与跨域资源共享195
5.10.1 同域策略应用于一般的图像196
5.10.2 同域策略应用于纹理197
5.10.3 跨域资源共享199
5.11 小结200
第6章 动画与用户输入203
6.1 创建动画场景203
6.1.1 setInterval()和setTimeout()的使用205
6.1.2 使用requestAnimationFrame()函数206
6.1.3 帧频不同引起的运动补偿209
6.1.4 创建FPS计数器测量动画的平稳性210
6.1.5 用FPS作为测量值的缺点212
6.2 用户交互事件的处理213
6.2.1 DOM Level 0基本事件处理214
6.2.2 DOM Level 2——**事件处理方法215
6.2.3 键盘输入217
6.2.4 鼠标输入221
6.3 综合应用新知识223
6.4 小结229
第7章 光照231
7.1 光源231
7.2 局部光照模型的工作原理232
7.3 Phong反射模型232
7.3.1 环境反射233
7.3.2 漫反射234
7.3.3 镜面反射236
7.3.4 Phong反射模型的完整公式和着色器239
7.3.5 光照效果与纹理相结合243
7.4 WebGL光照中需要的代码246
7.4.1 为顶点法线设置缓存247
7.4.2 计算法线矩阵并上传给着色器249
7.4.3 将光照信息上传给着色器250
7.5 将不同的插值方法用于着色250
7.5.1 平面着色251
7.5.2 Gouraud着色252
7.5.3 Phong着色253
7.6 矢量必须归一化256
7.6.1 顶点着色器中的矢量归一化257
7.6.2 片段着色器的矢量归一化257
7.7 应用不同类型的光源258
7.7.1 平行光258
7.7.2 点光源259
7.7.3 聚光源259
7.8 光强衰减262
7.9 光照映射265
7.10 小结267
第8章 WebGL性能优化269
8.1 WebGL底层工作机制269
8.1.1 支持WebGL的硬件270
8.1.2 关键的软件组成271
8.2 WebGL性能优化274
8.2.1 避免初学者的典型错误274
8.2.2 确定瓶颈位置275
8.2.3 有关性能的一般性建议279
8.2.4 改善CPU受限的WebGL应用程序性能的建议282
8.2.5 改善顶点受限的WebGL应用程序性能的建议283
8.2.6 改善像素受限的WebGL应用程序性能的建议285
8.3 深入分析融合286
8.3.1 融合简介286
8.3.2 设置融合函数287
8.3.3 绘制顺序与深度缓冲区290
8.3.4 绘制包含不透明对象和半透明对象的场景290
8.3.5 修改融合公式中的默认运算符291
8.3.6 使用预乘alpha值292
8.4 深入讨论WebGL292
8.4.1 使用WebGL框架293
8.4.2 发布到Google Chrome Web Store293
8.4.3 使用额外资源293
8.5 小结294

下载地址：https://pan.baidu.com/s/1ro5Ma0Y4_CVIr0eVft26NQ

关注微信公众号获取提取码：

　　输入：web1     获取提取码