WebGL高级编程 开发Web 3D图形PDF电子书下载

第1章WebGL简介 1

1.1 WebGL基础 1

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

1.3设计一个图形API 3

1.3.1即时模式API 3

1.3.2保留模式API 3

1.4图形硬件简介 4

1.4.1 GPU 4

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 OpenGL 16

1.6.2 OpenGL ES 2.0 18

1.6.3 Direct3D 19

1.6.4 HTML5画布 21

1.6.5可缩放矢量图形 25

1.6.6 VRML与X3D 26

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 Inspector 64

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（）和g1.TRIANGLES 94

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章 小型JavaScript库与变换 127

4.1 JavaScript中矩阵和向量的操作 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用JavaScript创建变换矩阵并上传给着色器 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将纹理上传到GPU 173

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光照中需要的JavaScript代码 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深入讨论WebGL 292

8.4.1使用WebGL框架 293

8.4.2发布到Google Chrome Web Store 293

8.4.3使用额外资源 293

8.5小结 294