H5和WebGL 3D开发实战详解

图书目录:

第 1章　HTML 5开发基础—进入

WebGL　世界的第 一道坎　1

1.1　HTML的发展简史　1

1.1.1　HTML的由来　1

1.1.2　HTML的历史　1

1.2　HTML5概述　2

1.2.1　HTML5的新标准　2

1.2.2　HTML5引入的新特性　2

1.2.3　HTML5现状　3

1.3　初识HTML5　4

1.3.1　HTML5标签简介　4

1.3.2　基础标签　4

1.3.3　格式标签　5

1.3.4　表单标签　10

1.3.5　图像、链接、列表标签　17

1.3.6　表格、元信息等标签　20

1.3.7　HTML5中的全局属性　26

1.3.8　HTML5中的事件　29

1.4　初识CSS　31

1.4.1　CSS简介　31

1.4.2　CSS基础语法　32

1.4.3　如何插入样式表　33

1.4.4　使用CSS样式　33

1.5　初识JavaScript　40

1.5.1　JavaScript的名字和

版本　41

1.5.2　准备使用JavaScript　41

1.5.3　使用语句　41

1.5.4　使用变量和类型　42

1.5.5　JavaScript运算符　43

1.5.6　使用数组　44

1.5.7　创建自己的JavaScript

对象　45

1.5.8　常用的JavaScript工具　47

1.6　HTML5 Canvas概述　47

1.6.1　文档对象模型（DOM）和Canvas　48

1.6.2　JavaScript与Canvas　48

1.6.3　HTML5 Canvas版“Hello World”　48

1.6.4　Canvas上的基础图形　50

1.7　本章小结　51

1.8　习题　52

第 2章　初识WebGL　53

2.1　WebGL概述　53

2.1.1　WebGL简介　53

2.1.2　WebGL效果展示　54

2.2　初识WebGL应用　54

2.2.1　WebGL应用案例部署运行

步骤简介　55

2.2.2　初识WebGL应用程序　56

2.3　着色器与渲染管线　61

2.3.1　WebGL的渲染管线　61

2.3.2　WebGL中立体物体的

构建　66

2.4　本章小结　68

2.5　习题　68

第3章　着色语言　69

3.1　着色语言概述　69

3.2　着色语言基础　70

3.2.1　数据类型简介　70

3.2.2　数据类型的基本使用　73

3.2.3　运算符　74

3.2.4　类型转换　76

3.2.5　限定符　77

3.2.6　流程控制　79

3.2.7　函数的声明与使用　81

3.2.8　片元着色器中浮点变量精度

的指定　82

3.2.9　程序的基本结构　82

3.3　特殊的内建变量　83

3.3.1　顶点着色器中的内建变量　83

3.3.2　片元着色器中的内建变量　83

3.4　着色语言的内置函数　84

3.4.1　角度转换与三角函数　85

3.4.2　指数函数　86

3.4.3　常见函数　86

3.4.4　纹理采样函数　88

3.5　本章小结　89

3.6　习题　89

第4章　必知必会的3D开发知识—

投影及各种变换　91

4.1　矩阵数学计算工具脚本Matrix　91

4.2　摄像机的设置　92

4.3　两种投影方式　93

4.3.1　正交投影　93

4.3.2　透视投影　97

4.4　各种变换　100

4.4.1　基本变换的相关数学

知识　100

4.4.2　平移变换　100

4.4.3　旋转变换　102

4.4.4　缩放变换　103

4.4.5　基本变换的实质　105

4.5　所有变换的完整流程　106

4.6　绘制方式　109

4.6.1　各种绘制方式概览　109

4.6.2　点与线段绘制方式　110

4.6.3　三角形条带与扇面绘制

方式　112

4.7　设置合理的视角　116

4.8　卷绕和背面剪裁　120

4.8.1　基本知识　121

4.8.2　一个简单的案例　121

4.9　本章小结　123

4.10　习题　123

第5章　光照效果　125

5.1　曲面物体的构建　125

5.1.1　球体的构建原理　125

5.1.2　案例效果概览　126

5.1.3　具体开发步骤　126

5.2　基本光照效果　129

5.2.1　构建球体的原理　129

5.2.2　环境光　129

5.2.3　散射光　131

5.2.4　镜面光　135

5.2.5　三种光照通道的合成　138

5.3　定位光与定向光　140

5.4　点法向量和面法向量　142

5.5　光照的每顶点计算与每片元

计算　144

5.6　本章小结　146

5.7　习题　146

第6章　纹理映射　147

6.1　初识纹理映射　147

6.1.1　基本原理　147

6.1.2　一个简单的案例　148

6.2　纹理拉伸　153

6.2.1　两种拉伸方式概览　153

6.2.2　不同拉伸方式的案例　154

6.3　纹理采样　156

6.3.1　纹理采样简介　157

6.3.2　**近点采样　157

6.3.3　线性纹理采样　158

6.3.4　MIN与MAG采样　159

6.3.5　不同纹理采样方式的

案例　159

6.4　mipmap纹理技术　161

6.5　多重纹理与过程纹理　162

6.5.1　案例概览　162

6.5.2　将2D纹理映射到球面上的

策略　163

6.5.3　案例的场景结构　164

6.5.4　开发过程　165

6.6　压缩纹理的使用　167

6.6.1　ETC压缩纹理　167

6.6.2　DXT5　169

6.6.3　PVRTC　171

6.7　本章小结　172

6.8　习题　172

第7章　3D模型加载　173

7.1　obj模型文件概述　173

7.1.1　obj文件的格式　173

7.1.2　用3ds Max设计3D模型　174

7.2　加载obj文件　175

7.2.1　加载仅有顶点坐标与面数据

的obj文件　175

7.2.2　加载后自动计算面法

向量　178

7.2.3　加载后自动计算平均

法向量　180

7.2.4　加载纹理坐标　182

7.2.5　加载顶点法向量　184

7.3　本章小结　185

7.4　习题　185

第8章　混合与雾　187

8.1　混合技术　187

8.1.1　混合的基本知识　187

8.1.2　源因子和目标因子　188

8.1.3　简单混合效果案例　189

8.2　地月系云层效果的实现　191

8.3　雾　193

8.3.1　雾的原理与优势　193

8.3.2　雾的简单实现　194

8.4　本章小结　196

8.5　习题　196

第9章　常用3D开发技巧　197

9.1　标志板　197

9.1.1　案例效果与基本原理　197

9.1.2　开发步骤　198

9.2　灰度图地形　201

9.2.1　基本原理　201

9.2.2　普通灰度图地形　202

9.2.3　过程纹理地形　205

9.2.4　mipmap地形　206

9.3　天空盒与天空穹　207

9.3.1　天空盒　207

9.3.2　天空穹　209

9.3.3　天空盒与天空穹的使用

技巧　210

9.4　本章小结　211

9.5　习题　211

第 10章　渲染出更加酷炫的3D场景—

几种剪裁与测试　213

10.1　剪裁测试　213

10.1.1　基本原理与核心代码　213

10.1.2　一个主次视角的简单

案例　213

10.2　模板测试　215

10.2.1　基本原理　215

10.2.2　一个简单的案例　217

10.3　任意剪裁平面　218

10.3.1　基本原理　218

10.3.2　茶壶被任意平面剪裁的

案例　218

10.4　本章小结　220

10.5　习题　220

第 11章　Three.js引擎　221

11.1　Three.js概述　221

11.1.1　Three.js简介　221

11.1.2　Three.js效果展示　222

11.2　初识Three.js应用　222

11.3　Three.js基本组件　224

11.3.1　场景　224

11.3.2　几何对象　226

11.3.3　摄像机　228

11.3.4　光源　232

11.3.5　材质　239

11.4　模型加载　245

11.4.1　Three.js中支持的模型文件

格式　246

11.4.2　导入三维格式文件　251

11.4.3　骨骼动画的加载　254

11.5　贴图的使用　258

11.5.1　使用纹理贴图　259

11.5.2　使用法向贴图　260

11.5.3　使用凹凸贴图　261

11.5.4　使用光照贴图制作静态

阴影　262

11.5.5　使用高光贴图　264

11.6　粒子系统　265

11.7　二次绘制　269

11.7.1　认识效果组合器　269

11.7.2　FilmPass通道　270

11.7.3　BloomPass通道　271

11.7.4　DotScreenPass通道　272

11.7.5　ShaderPass通道　273

11.8　本章小结　276

11.9　习题　276

第 12章　Egret 3D游戏引擎应用

开发　277

12.1　Egret入门　277

12.1.1　Egret简介　277

12.1.2　Egret Engine的安装、部署与

使用插件　278

12.1.3　使用Egret Wing插件调试与

开发程序　279

12.1.4　Egret Engine 3D简介　281

12.2　Egret 3D入门　282

12.2.1　创建3D场景　282

12.2.2　使用鼠标事件　285

12.3　天空盒与模型加载　287

12.3.1　Egret 3D中添加天空盒　287

12.3.2　Egret 3D中加载模型　288

12.4　Egret 3D中的纹理与灯光　291

12.4.1　Egret 3D中的纹理应用　291

12.4.2　Egret 3D中的灯光应用　292

12.5　Egret 3D中的骨骼动画　294

12.5.1　导出Egret引擎的骨骼

动画　294

12.5.2　使用Egret引擎加载骨骼

动画　294

12.6　本章小结　296

12.7　习题　296

第 13章　Ammo物理引擎　297

13.1　Ammo物理引擎概述　297

13.2　Ammo中常用类概述　297

13.2.1　btVector3类—

三维向量类　298

13.2.2　btTransform类—

变换类　298

13.2.3　btRigidBody类—

刚体类　299

13.2.4　btDynamicsWorld类—

物理世界类　299

13.2.5　btDiscreteDynamicsWorld类

—离散物理世界类　300

13.2.6　btSoftRigidDynamicsWorld类—支持模拟软体的物理世界类　300

13.2.7　btCollisionShape类—

碰撞形状类　301

13.2.8　btStaticPlaneShape类—

静态平面形状　301

13.2.9　btSphereShape类—

球体形状类　301

13.2.10　btBoxShape类—

长方体盒碰撞

形状类　301

13.2.11　btCylinderShape类—

圆柱形状类　302

13.2.12　btCapsuleShape类—

胶囊形状类　302

13.2.13　btConeShape类—

圆锥形状类　302

13.2.14　btCompoundShape类—复合碰撞形状类　302

13.3　简单的物理场景　303

13.3.1　案例运行效果　303

13.3.2　案例的基本结构　303

13.3.3　主要方法的介绍　304

13.4　多种形状刚体的碰撞　306

13.4.1　案例运行效果　306

13.4.2　案例开发过程　307

13.5　旋转的陀螺　308

13.5.1　案例运行效果　308

13.5.2　案例开发过程　308

13.6　触发器—消失的箱子　309

13.6.1　案例运行效果　310

13.6.2　案例开发过程　310

13.7　碰撞过滤—物体碰撞下落　311

13.7.1　案例运行效果　311

13.7.2　案例开发过程　312

13.8　关节的介绍　313

13.8.1　关节的父类—

btTypedConstraint类　313

13.8.2　铰链关节—btHingeConstraint类　313

13.8.3　铰链关节的案例—

球落门开　314

13.8.4　齿轮关节—btGearConstraint 类　316

13.8.5　齿轮关节的案例—转动的齿轮　316

13.8.6　点对点关节—btPoint2PointConstraint

类　318

13.8.7　点对点关节的案例—

悬挂的物体　318

13.8.8　滑动关节—

btSliderConstraint类　320

13.8.9　滑动关节的案例—6个

方向的物体滑动　321

13.8.10　六自由度关节—btGeneric6DofConstraint

类　323

13.8.11　六自由度关节的案例—

掉落的蜘蛛　323

13.9　交通工具类的介绍　326

13.9.1　交通工具类—btRaycastVehicle 类　326

13.9.2　交通工具的案例—移动的小车　327

13.10　软体　331

13.10.1　软体帮助类—btSoftBodyHelps 类　331

13.10.2　软布案例　332

13.10.3　三角形网格软体案例　334

13.10.4　绳索软体案例　337

13.11　本章小结　339

13.12　习题　339

第 14章　休闲类游戏—极地大作战　341

14.1　背景以及功能概述　341

14.1.1　游戏背景概述　341

14.1.2　游戏功能简介　342

14.2　游戏的策划及准备工作　343

14.2.1　游戏的策划　343

14.2.2　游戏的准备工作　343

14.3　游戏的架构　344

14.3.1　各个脚本简介　344

14.3.2　游戏架构简介　345

14.4　网页文件example.html　346

14.5　游戏相关脚本　350

14.5.1　初始化资源脚本　350

14.5.2　键盘事件监听脚本　354

14.5.3　添加模型脚本　356

14.5.4　碰撞检测脚本　360

14.6　游戏中相关工具类脚本概述　363

14.7　游戏中着色器的开发　363

14.7.1　带有光照的着色器　363

14.7.2　不带有光照的简单

着色器　365

14.8　游戏的优化与改进　365

参考文献　367