第1章 WebGL简介 1
1.1 WebGL——一个技术定义 2
1.2 3D图形学——入门 4
1.2.1 3D坐标系 4
1.2.2网格、多边形和顶点 5
1.2.3材质、纹理和光源 5
1.2.4变换与矩阵 6
1.2.5相机、透视、视口和投影 6
1.2.6着色器 7
1.3 WebGL原生API 8
1.3.1 WebGL应用结构剖析 9
1.3.2画布元素与绘制上下文 9
1.3.3视口 10
1.3.4 Buffer、 ArrayBuffer和类型化数组 10
1.3.5矩阵 11
1.3.6着色器 12
1.3.7绘制图元 13
1.4本章小结 14
第2章 你的第一个WebGL程序 15
2.1 Three js——一个JavaScript 3D引擎 15
2.2建立ThreE.j s运行环境 17
2.3一个简单的Three js网页 17
2.4一个真实的3D示例 20
2.4.1为场景着色 23
2.4.2添加纹理映射 24
2.4.3旋转物体 25
2.4.4循环重绘和requestAnimationFrame（） 25
2.4.5让页面贴近生活 26
2.5本章小结 27
第3章 图形 28
3.1 SiM.js——一个轻量级的WebGL模拟框架 29
3.2创建网格 30
3.3使用材质、纹理和光源 34
3.3.1光源的种类 35
3.3.2使用多重纹理创建更具真实感的场景 37
3.3.3纹理与透明 42
3.4构建变换层级 42
3.5创建自定义几何体 46
3.6点和线的渲染 49
3.6.1使用粒子系统绘制点 50
3.6.2线的绘制 52
3.7编写着色器 53
3.7.1WebGL着色器基础 53
3.7.2ThreE.js中的着色器 55
3.8本章小结 60
第4章 动画 61
4.1动画基础 61
4.1.1帧动画 61
4.1.2时间动画 62
4.1.3插值与补间动画 62
4.1.4关键帧 63
4.1.5关节动画 64
4.1.6蒙皮动画 64
4.1.7目标变形动画 64
4.2使用Tween js库来创建补间动画 65
4.2.1创建一个基本的补间动画 66
4.2.2带缓动效果的补间动画 68
4.3为带关节的模型制作关键帧动画 71
4.3.1载入模型 71
4.3.2为模型制作动画 73
4.4材质和光源动画 76
4.5纹理动画 78
4.6蒙皮动画和变形动画 80
4.7本章小结 80
第5章 交互 81
5.1点击检测、拾取和投影 81
ThreE.js中的点击检测 82
5.2处理鼠标移入和点击 85
5.3处理拖曳 88
在拖曳中使用补间动画 91
5.4使用点击点和法线信息 91
5.5基于相机的交互 92
5.5.1利用镜头控制制作一个模型浏览器 93
5.5.2场景漫游 95
5.6本章小结 96
第6章 2D与3D的整合 98
6.1整合动态HTML和WebGL 99
6.1.1创建DIV元素弹出层 99
6.1.2利用2D屏幕坐标为3D物体添加注释 103
6.1.3为3D场景添加背景图片 104
6.2在2D页面上插入3D浮层 105
6.3利用2D Canvas创建动态纹理 107
6.4使用视频作为纹理 115
6.5渲染动态3D文字 119
6.6 WebGL中的终极整合 121
6.7本章小结 123
第7章 实战WebGL 124
7.1如何选择运行库和框架 124
7.2载入3D内容 126
7.2.1 COLLADA：数字资产交换格式 126
7.2.2 ThreE.js中的JSON模型文件格式 130
7.2.3 Three j s二进制模型文件格式 134
7.2.4压缩3D模型 135
7.2.5 ThreE.js中的JSON场景文件格式 136
7.3创建3D内容 137
7.3.1从Blender中导出3D内容 137
7.3.2把OBJ文件转换为Three js JSON文件 139
7.3.3把OBJ文件转换为Three js二进制文件 139
7.3.4其他软件或格式的转换 139
7.4浏览器支持度 140
7.4.1检测浏览器的WebGL支持 141
7.4.2在Safari中开启WebGL支持 142
7.5处理丢失上下文事件 143
7.6 WebGL的安全性 146
7.7本章小结 149
第8章 你的第一个WebGL游戏 150
8.1构建游戏的各个部分 151
8.1.1相机、角色和控制 152
8.1.2美术设计 159
8.1.3模型预览器 161
8.1.4创建粒子系统 163
8.1.5添加声音 166
8.2万物归一 167
8.3本章小结 180
后记 181
附录A WebGL在线资源 183