HTML5与WebGL编程_前端开发教程

资源名称：HTML5与WebGL编程

内容简介：

本书介绍如何使用HTML5相关技术，如CSS3和新兴的Web图形标准WebGL，来创建具有高性能、震撼视觉效果的3D Web应用。书中内容分为两部分——基础知识和应用开发技术，不但提供了全面的理论介绍，还包括从简单3D产品可视化到沉浸式游戏及交互训练系统的实践，适合转向3D开发的Web开发人员阅读。

作者简介：

Tony Parisi

Web 3D标准的先驱、企业家、CTO、架构师。VRML和X3D语言的联合作者，这两者已经成为Web 3D图形的ISO标准。另著有《WebGL入门指南》。

译者简介：

潘征

网名此方，目前就职于百度FEX前端研发团队，专注前端复杂应用研发，

http://h5.baidu.com平台研发团队核心成员之一。

资源目录：

前言　　xi

第一部分　基础知识

第1章　绪论　　2

1.1　HTML5：新型的视觉媒介　　4

1.1.1　浏览器平台　　4

1.1.2　浏览器支持情况　　6

1.2　3D图形的基础知识　　6

1.2.1　什么是3D　　6

1.2.2　3D坐标系　　7

1.2.3　网格、多边形与顶点　　8

1.2.4　材质、纹理与光源　　9

1.2.5　变换与矩阵　　9

1.2.6　相机、透视、视口与投影　　10

1.2.7　着色器　　11

第2章　WebGL：实时3D渲染　　13

2.1　WebGL基础　　14

2.2　WebGL API　　15

2.3　WebGL应用剖析　　16

2.4　一个简单的WebGL 示例　　16

2.4.1　Canvas元素和WebGL绘图上下文　　17

2.4.2　视口　　18

2.4.3　缓冲、缓冲数组和类型化数组　　18

2.4.4　矩阵　　19

2.4.5　着色器　　20

2.4.6　绘制图元　　22

2.5　创建3D 几何体　　23

2.6　添加动画　　27

2.7　使用纹理映射　　28

2.8　小结　　34

第3章　Three.js——一款Javaｓｃｒｉｐｔ 3D引擎　　35

3.1　使用Three.js创建的代表性项目　　35

3.2　Three.js概览　　38

3.2.1　初始化Three.js　　40

3.2.2　Three.js工程结构　　40

3.3　一个简单的Three.js程序　　41

3.3.1　创建渲染器　　43

3.3.2　创建场景　　43

3.3.3　运行循环的实现　　45

3.3.4　为场景添加光照　　46

3.4　小结　　48

第4章　Three.js中的图形和渲染　　49

4.1　几何图形和网格　　49

4.1.1　预置的几何形状类型　　49

4.1.2　路径、形状和挤出　　50

4.1.3　几何形状基础类　　52

4.1.4　用于优化网格渲染的BufferGeometry　　55

4.1.5　从建模软件包中导入网格数据　　56

4.2　场景图和空间变换的层级结构　　57

4.2.1　利用场景图来管理复杂场景　　57

4.2.2　Three.js中的场景图　　57

4.2.3　平移、旋转和缩放的表示　　61

4.3　材质　　61

4.3.1　标准网格材质　　61

4.3.2　使用多重纹理增添逼真效果　　63

4.4　光源　　67

4.5　阴影　　69

4.6　着色器　　73

4.6.1　ShaderMaterial类：编写你自己的着色器代码　　74

4.6.2　在Three.js中使用GLSL着色器代码　　75

4.7　渲染　　78

4.7.1　后处理和多道渲染　　79

4.7.2　延迟渲染　　80

4.8　小结　　80

第5章　3D动画　　81

5.1　使用requestAnimationFrame()来驱动动画　　82

5.1.1　在你的应用中使用requestAnimationFrame()　　83

5.1.2　requestAnimationFrame()和性能　　84

5.1.3　基于帧的动画和基于时间的动画　　85

5.2　使用程序更新属性的方式来构建动画　　85

5.3　使用补间来进行动画过渡　　87

5.3.1　插值　　87

5.3.2　Tween.js库　　88

5.3.3　缓动　　90

5.4　使用关键帧来实现复杂动画　　91

5.4.1　Keyframe.js——一个简单的帧动画通用库　　92

5.4.2　使用关键帧创建关节动画　　94

5.5　使用曲线和路径创建平滑自然的运动　　96

5.6　使用变形目标来创建人物和面部动画　　99

5.7　使用蒙皮来构建角色动画　　100

5.8　使用着色器来进行动画　　104

5.9　小结　　109

第6章　CSS3：高级页面效果　　110

6.1　CSS变换　　112

6.1.1　使用3D变换　　113

6.1.2　添加透视　　115

6.1.3　创建变换层级　　117

6.1.4　控制背面渲染　　119

6.1.5　CSS变换属性汇总　　122

6.2　CSS过渡　　122

6.3　CSS动画　　127

6.4　挑战CSS的极限　　130

6.4.1　渲染3D物体　　130

6.4.2　渲染3D环境　　132

6.4.3　使用CSS自定义滤镜来实现高级着色器效果　　134

6.4.4　用Three.js来渲染CSS 3D　　135

6.5　小结　　135

第7章　Canvas：通用2D绘图　　137

7.1　Canvas基础　　137

7.1.1　Canvas元素和2D绘图上下文　　138

7.1.2　Canvas API的功能　　139

7.2　使用Canvas API来渲染3D　　144

7.3　基于Canvas渲染的3D 库　　147

7.3.1　K3D　　147

7.3.2　Three.js的Canvas渲染　　148

7.4　小结　　153

第二部分　应用开发技术

第8章　3D内容制作流程　　156

8.1　3D内容创建过程　　156

8.1.1　建模　　157

8.1.2　纹理映射　　157

8.1.3　动画　　158

8.1.4　技术美工　　159

8.2　3D建模和动画工具　　160

8.2.1　传统3D软件　　160

8.2.2　基于浏览器的集成环境　　164

8.2.3　3D内容仓库和现成素材　　167

8.3　3D文件格式　　168

8.3.1　模型格式　　168

8.3.2　动画格式　　170

8.3.3　全功能的场景格式　　171

8.4　加载3D内容到WebGL应用中　　178

8.4.1　Three.js JSON格式　　179

8.4.2　Three.js的二进制格式　　184

8.4.3　使用Three.js来加载COLLADA场景　　185

8.4.4　使用Three.js来加载gITF场景　　188

8.5　小结　　189

第9章　3D引擎和框架　　190

9.1　3D框架概念　　191

9.1.1　什么是框架　　191

9.1.2　WebGL框架需求　　192

9.2　WebGL框架概况　　194

9.2.1　游戏引擎　　194

9.2.2　展示框架　　196

9.3　Vizi：一个基于组件的用于可视化Web 应用的框架　　198

9.3.1　背景和设计理念　　199

9.3.2　Vizi架构　　200

9.3.3　Vizi入门　　201

9.3.4　一个Vizi应用示例　　202

9.4　小结　　207

第10章　开发一个简单的3D应用　　209

10.1　设计应用　　211

10.2　创建3D内容　　212

10.2.1　导出Maya场景到COLLADA　　213

10.2.2　将COLLADA文件转换glTF格式　　214

10.3　预览和测试3D内容　　214

10.