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

探索HML5 API及创建3D Web图形的相关技术，包括WebGL、Canvas和CSS

使用流行的JavaScript 3D渲染和动画库Three.js及Tween.js

研究3D内容创作流程，创建杀手级3D内容的建模和动画工具

介绍构建3D应用的游戏引擎和框架，包括作者的Vizi框架

使用示例及支持代码，创建有多个物体和复杂交互的3D场景

分析移动浏览器中的WebGL 3D应用会遇到的问题

HTML5与WebGL编程 内容简介

本书全面讲解了使用HTML5和WebGL开发3D应用的Web技术，理论与实践相结合，涵盖桌面和移动两端。全书分两部分：基础知识和应用开发。在详细介绍开发相关理论、工具、框架和库的基础上，作者通过3D产品浏览器、游戏和交互培训系统等案例，生动讲解了3D应用开发的全过程。

本书适合中高级Web及页游开发人员阅读。

HTML5与WebGL编程 目录

前言　　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——一款JavaScript 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．3．1　基于Vizi的预览工具　214

10．3．2　Vizi查看器类　216

10．3．3　Vizi加载类　217

10．4　将3D集成到应用中　220

10．5　开发3D行为和交互　223

10．5．1　Vizi 场景图API方法：findNode()和map()　223

10．5．2　使用Vizi．FadeBehavior来动画透明度　225

10．5．3　使用Vizi．RotateBehavior来自动旋转内容　227

10．5．4　使用Vizi．Picker来实现鼠标悬停时显示信息　227

10．5．5　使用用户界面来控制动画　229

10．5．6　使用颜色选择器来改变颜色　230

10．6　小结　232

第11章　开发一个3D环境　233

11．1　创建环境素材　235

11．2　预览和测试环境　236

11．2．1　以第一人称模式预览场景　237

11．2．2　检查场景图　237

11．2．3　检查对象属性　240

11．2．4　显示边界框　242

11．2．5　预览多个对象　244

11．2．6　使用预览工具来查找场景中的其他问题　246

11．3　使用skybox创建一个3D背景　247

11．3．1　3D skybox　247

11．3．2　Vizi skybox对象　248

11．4　集成3D内容到应用中　250

11．4．1　加载和初始化场景　250

11．4．2　加载和初始化车模型　253

11．5　实现第一人称导航　255

11．5．1　相机控制器　256

11．5．2　第一人称控制器中的数学　257

11．5．3　鼠标视角　258

11．5．4　简单碰撞检测　259

11．6　使用多个相机　260

11．7　创建定时的动画过渡　262

11．8　对象行为脚本　263

11．8．1　基于Vizi．Script实现自定义组件　264

11．8．2　驾驶车的控制器脚本　264

11．9　给环境添加声音　270

11．10　渲染动态纹理　272

11．11　小结　276

第12章　开发移动3D应用　278

12．1　移动3D平台　278

12．2　为移动浏览器开发　280

12．2．1　增加触摸支持　281

12．2．2　在桌面版Chrome上调试移动功能　285

12．3　创建Web应用　287

12．3．1　Web应用开发和测试工具　287

12．3．2　打包成Web应用来发布　288

12．4　开发原生/HTML5混合应用　289

12．4．1　CocoonJS：一种为移动设备构建HTML游戏及应用的技术　290

12．4．2　使用CocoonJS 组装应用　292

12．4．3　WebGL混合开发：问题　298

12．5　移动3D性能　298

12．6　小结　300

附录　资源　301

作者介绍　311

封面介绍　311

HTML5与WebGL编程 精彩文摘

WebGL 是 Web 3D 图形的标准 API，它使得运行在浏览器中的 JavaScript 程序也可以充分利用 3D 渲染硬件的强大能力。在 WebGL 出现之前，为提供硬件加速的 3D 体验，开发者只能借助浏览器插件或编写需要用户下载安装的本地软件。

尽管 WebGL 不属于 HTML5 官方标准，但绝大多数支持 HTML5 的浏览器都支持 WebGL——正如支持 Web Workers、WebSockets 等并未被 W3C 官方作为标准采纳的技术一样。要想将浏览器打造成一流的应用平台，3D 是不可或缺的部分，这是 Google、Apple、Mozilla、Microsoft、Amazon、Opera、Intel、BlackBerry 等各大公司开发者们的共识。

主流的桌面浏览器和绝大多数手机浏览器都支持 WebGL1。WebGL 已经可以运行在类似于你的家用机器和办公机器的数百万台设备上。包括游戏、数据可视化、计算机辅助设备、3D 打印和零售行业在内的许多使用了 WebGL 技术的网站也在蓬勃发展。