HTML5与WebGL编程 PDF 高清版

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

目录

• 前言　　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