WebGL3D开发实战详解 2版

目 录







第 1章 HTML5开发基础——进入

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引入的新特性 3

1.2.3 HTML5现状 3

1.3 初识HTML5 4

1.3.1 HTML5标签简介 4

1.3.2 基础标签 4

1.3.3 格式标签 6

1.3.4 表单标签 11

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

1.3.6 表格、元信息等标签 21

1.3.7 HTML5中的全局属性 26

1.3.8 HTML5中的事件 30

1.4 初识CSS 32

1.4.1 CSS简介 32

1.4.2 CSS基础语法 33

1.4.3 如何插入样式表 34

1.4.4 使用CSS样式 35

1.5 初识JavaScript 42

1.5.1 JavaScript的名字和版本 42

1.5.2 准备使用JavaScript 42

1.5.3 使用语句 43

1.5.4 使用变量和类型 43

1.5.5 JavaScript运算符 45

1.5.6 使用数组 45

1.5.7 创建自己的JavaScript

对象 46

1.5.8 常用的JavaScript工具 48

1.6 HTML5 Canvas简介 49

1.6.1 文档对象模型和Canvas 49

1.6.2 JavaScript与Canvas 49

1.6.3 HTML5 Canvas版

“Hello World” 50

1.6.4 Canvas中的基础图形 52

1.7 本章小结 53

第 2章 初识WebGL 2.0 54

2.1 WebGL 2.0概述 54

2.1.1 WebGL 2.0简介 54

2.1.2 WebGL 2.0效果展示 55

2.2 初识WebGL 2.0应用 55

2.2.1 WebGL 2.0应用案例部署

运行步骤简介 56

2.2.2 初识WebGL 2.0应用

程序 57

2.3 着色器与渲染管线 62

2.3.1 WebGL 2.0的渲染管线 62

2.3.2 WebGL 2.0中立体物体的

构建 68

2.4 本章小结 69

第3章 着色语言 70

3.1 着色语言概述 70

3.2 着色语言基础 71

3.2.1 数据类型概述 71

3.2.2 数据类型的基本使用 75

3.2.3 运算符 77

3.2.4 构造函数 79

3.2.5 类型转换 80

3.2. 6 限定符 81

3.2.7 插值限定符 85

3.2.8 一致块 86

3.2.9 layout 限定符 87

3.2.10 流程控制 88

3.2.11 函数的声明与使用 90

3.2.12 片元着色器中浮点变量

精度的指定 91

3.2.13 程序的基本结构 92

3.3 特殊的内建变量 92

3.3.1 顶点着色器中的内建

变量 92

3.3.2 片元着色器中的内建

变量 93

3.3.3 内建常量 94

3.3.4 内建uniform变量 94

3.4 着色语言的内置函数 95

3.4.1 角度转换与三角函数 95

3.4.2 指数函数 96

3.4.3 常见函数 97

3.4.4 几何函数 100

3.4.5 矩阵函数 101

3.4.6 向量关系函数 102

3.4.7 纹理采样函数 103

3.4.8 微分函数 106

3.4.9 浮点数的打包与解包

函数 106

3.5 用invariant修饰符避免值变

问题 107

3.6 预处理器 108

3.7 本章小结 109

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

投影及各种变换 110

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

4.2 摄像机的设置 111

4.3 两种投影方式 112

4.3.1 正交投影 112

4.3.2 透视投影 117

4.4 各种变换 119

4.4.1 基本变换的数学知识 119

4.4.2 平移变换 120

4.4.3 旋转变换 121

4.4.4 缩放变换 123

4.4.5 基本变换的实质 124

4.5 所有变换的完整流程 126

4.6 绘制方式 129

4.6.1 几种绘制方式概述 129

4.6.2 点与线段绘制方式 130

4.6.3 三角形条带与扇面绘制

方式 132

4.7 设置合理的视角 136

4.8 卷绕和背面剪裁 141

4.8.1 基本知识 141

4.8.2 简单的案例 142

4.9 本章小结 144

第5章 光照效果 145

5.1 曲面物体的构建 145

5.1.1 球体的构建原理 145

5.1.2 案例效果概述 146

5.1.3 具体开发步骤 147

5.2 基本光照效果 149

5.2.1 光照的基本模型 149

5.2.2 环境光 149

5.2.3 散射光 151

5.2.4 镜面光 156

5.2.5 3种光照通道的合成 159

5.3 定位光与定向光 161

5.4 点法向量和面法向量 163

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

计算 165

5.6 本章小结 168

第6章 纹理映射 169

6.1 初识纹理映射 169

6.1.1 基本原理 169

6.1.2 简单的案例 170

6.2 纹理拉伸 175

6.2.1 两种拉伸方式概述 175

6.2.2 不同拉伸方式的案例 177

6.3 纹理采样 179

6.3.1 纹理采样概述 179

6.3.2 *近点采样 179

6.3.3 线性纹理采样 180

6.3.4 MIN与MAG采样 181

6.3.5 不同纹理采样方式的

案例 182

6.4 MipMap纹理技术 184

6.4.1 基本原理 184

6.4.2 简单的案例 186

6.5 多重纹理与过程纹理 188

6.5.1 案例概述 188

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

策略 189

6.5.3 案例的场景结构 191

6.5.4 开发过程 191

6.6 压缩纹理的使用 193

6.6.1 ETC压缩纹理 194

6.6.2 DXT5 196

6.7 本章小结 197

第7章 3D模型加载 198

7.1 obj模型文件概述 198

7.1.1 obj文件的格式 198

7.1.2 用3ds Max设计3D

模型 199

7.2 加载obj文件 200

7.2.1 加载仅有顶点坐标与面

数据的obj文件 200

7.2.2 加载后自动计算面法

向量 203

7.2.3 加载后自动计算平均法

向量 205

7.2.4 加载纹理坐标 207

7.2.5 加载顶点法向量 209

7.3 双面光照 210

7.4 本章小结 212

第8章 混合与雾 213

8.1 混合技术 213

8.1.1 混合基本知识 213

8.1.2 源因子和目标因子 214

8.1.3 简单混合效果的案例 215

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

8.3 雾 219

8.3.1 雾的原理与优势 219

8.3.2 雾的简单实现 220

8.4 本章小结 222

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

9.1 标志板 223

9.1.1 案例效果与基本原理 223

9.1.2 开发步骤 224

9.2 灰度图地形 227

9.2.1 基本原理 228

9.2.2 普通灰度图地形 228

9.2.3 过程纹理地形 231

9.2.4 MipMap地形 233

9.3 高真实感地形 234

9.3.1 基本思路 234

9.3.2 地形设计工具EarthSculptor

的使用 235

9.3.3 简单的案例 237

9.4 天空盒与天空穹 239

9.4.1 天空盒 239

9.4.2 天空穹 241

9.4.3 天空盒与天空穹的使用

技巧 243

9.5 简单镜像 243

9.5.1 镜像基本原理 243

9.5.2 基本效果案例 244

9.5.3 升级效果的案例 246

9.6 非真实感绘制 247

9.6.1 基本原理与案例效果 247

9.6.2 具体开发步骤 249

9.7 描边效果的实现 250

9.7.1 沿法线挤出轮廓 251

9.7.2 在视空间中挤出 253

9.8 本章小结 254

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

几种剪裁与测试 255

10.1 剪裁测试 255

10.1.1 基本原理与核心代码 255

10.1.2 主次视角的简单案例 255

10.2 模板测试 257

10.2.1 基本原理 257

10.2.2 简单的案例 259

10.3 任意剪裁平面 260

10.3.1 基本原理 260

10.3.2 茶壶被任意平面剪裁的

案例 260

10.4 本章小结 262

第 11章 Three.js引擎基础 263

11.1 Three.js概述 263

11.1.1 Three.js简介 263

11.1.2 Three.js效果展示 264

11.2 初识Three.js应用 264

11.3 Three.js基本组件 266

11.3.1 场景 266

11.3.2 几何对象 268

11.3.3 摄像机 270

11.3.4 摄像机数组 274

11.3.5 光源 275

11.3.6 材质 283

11.4 模型加载 291

11.4.1 Three.js中支持的模型

文件格式 291

11.4.2 导入三维格式文件 296

11.4.3 骨骼动画的加载 300

11.5 贴图的使用 306

11.6 本章小结 316

第 12章 Three.js引擎进阶 317

12.1 粒子系统 317

12.1.1 Sprite粒子系统 317

12.1.2 PointCloud粒子系统 319

12.1.3 火焰粒子特效 321

12.2 混合与雾 325

12.2.1 混合 325

12.2.2 雾 328

12.3 渲染到纹理 329

12.3.1 效果组合器 329

12.3.2 FilmPass通道 330

12.3.3 BloomPass通道 331

12.3.4 DotScreenPass通道 332

12.3.5 SSAOPass通道 333

12.3.6 ShaderPass通道 334

12.4 音频的处理与展示 336

12.4.1 声音可视化 336

12.4.2 声音与距离 338

12.5 杂项 340

12.5.1 任意剪裁平面 340

12.5.2 单个物体的多个实例 341

12.5.3 高真实感的水面 343

12.6 本章小结 346

第 13章 Babylon.js引擎 347

13.1 Babylon.js概述 347

13.1.1 Babylon.js简介 347

13.1.2 Babylon.js效果展示 348

13.2 初识Babylon.js应用 348

13.3 Babylon.js基本组件 350

13.3.1 场景 350

13.3.2 网格对象 352

13.3.3 摄像机与控制 354

13.3.4 光照与阴影 359

13.3.5 材质 363

13.4 模型加载 368

13.4.1 Babylon.js中支持的模型

文件格式 368

13.4.2 资源管理器的使用 373

13.4.3 导入三维格式文件 374

13.5 纹理贴图 377

13.5.1 使用纹理贴图 377

13.5.2 使用法向贴图 379

13.5.3 使用光照贴图制作静态

阴影 380

13.5.4 使用高光贴图 381

13.6 粒子系统 382

13.6.1 精灵与精灵动画 383

13.6.2 粒子与粒子系统 385

13.6.3 粒子发射器 387

13.6.4 粒子动画 389

13.6.5 GPU粒子 389

13.6.6 固体颗粒系统 390

13.7 物理引擎 391

13.7.1 Babylon.js中支持的物理

引擎插件 392

13.7.2 刚体的简单介绍 392

13.7.3 简单的物理场景 393

13.7.4 爆炸效果实现 394

13.7.5 碰撞回调函数 396

13.7.6 为导入模型添加碰撞

效果 396

13.7.7 关节的简介 398

13.7.8 单摆运动的小球 399

13.7.9 布料模拟 399

13.8 渲染到纹理 401

13.8.1 SSAO渲染效果的

实现 401

13.8.2 Bloom渲染效果的

实现 404

13.8.3 颗粒渲染效果的实现 405

13.8.4 色差渲染效果的实现 405

13.8.5 景深渲染效果的实现 406

13.9 本章小结 407

第 14章 Ammo物理引擎 408

14.1 Ammo物理引擎简介 408

14.2 Ammo中的常用类 408

14.2.1 btVector3类——三维

向量类 409

14.2.2 btTransform类——

变换类 409

14.2.3 btRigidBody类——

刚体类 410

14.2.4 btDynamicsWorld类——

物理世界类 410

14.2.5 btDiscreteDynamicsWorld类

——离散物理世界类 411

14.2.6 btSoftRigidDynamicsWorld

类——支持模拟软体的物理

世界类 411

14.2.7 btCollisionShape类——

碰撞形状类 412

14.2.8 btStaticPlaneShape类——

静态平面形状 412

14.2.9 btSphereShape类——

球体形状类 412

14.2.10 btBoxShape类——长方体

盒碰撞形状类 412

14.2.11 btCylinderShape类——

圆柱形状类 413

14.2.12 btCapsuleShape类——

胶囊形状类 413

14.2.13 btConeShape类——

圆锥形状类 413

14.2.14 btCompoundShape类——

复合碰撞形状类 413

14.3 简单的物理场景 414

14.3.1 案例运行效果 414

14.3.2 案例的基本结构 414

14.3.3 介绍主要方法 415

14.4 多种形状刚体的碰撞 417

14.4.1 案例运行效果 417

14.4.2 案例开发过程 418

14.5 旋转的陀螺 419

14.5.1 案例运行效果 419

14.5.2 案例开发过程 419

14.6 触发器——消失的木块 420

14.6.1 案例运行效果 421

14.6.2 案例开发过程 421

14.7 碰撞过滤——物体碰撞下落 422

14.7.1 案例运行效果 422

14.7.2 案例开发过程 423

14.8 关节 424

14.8.1 关节的父类——

btTypedConstraint类 424

14.8.2 铰链关节——

btHingeConstraint类 424

14.8.3 铰链关节的案例——球落

门开 425

14.8.4 齿轮关节——

btGearConstraint类 427

14.8.5 齿轮关节的案例——

转动的齿轮 427

14.8.6 点对点关节——

btPoint2PointConstraint

类 429

14.8.7 点对点关节的案例——

悬挂的物体 430

14.8.8 滑动关节——

btSliderConstraint类 432

14.8.9 滑动关节的案例——6个方

向的物体滑动 432

14.8.10 六自由度关节——

btGeneric6DofConstraint

类 434

14.8.11 六自由度关节的案例——

掉落的蜘蛛 435

14.9 交通工具类的介绍 438

14.9.1 交通工具类——

btRaycastVehicle类 438

14.9.2 交通工具的案例——

移动的小车 439

14.10 软体 443

14.10.1 软体帮助类——

btSoftBodyHelps类 443

14.10.2 软布案例 444

14.10.3 三角形网格软体案例 446

14.10.4 绳索软体案例 448

14.11 本章小结 450

第 15章 在线3D模型交互式编辑

系统 451

15.1 背景以及功能概述 451

15.1.1 开发背景概述 451

15.1.2 系统功能简介 452

15.2 系统的策划及准备工作 455

15.2.1 系统策划 455

15.2.2 数据库设计 456

15.3 系统架构 457

15.3.1 各个类的简介 457

15.3.2 系统架构简介 459

15.4 服务器端相关类 460

15.5 模型编辑页面文件 464

15.6 管理脚本 470

15.6.1 矩阵管理脚本 470

15.6.2 材质管理脚本 474

15.7 工具脚本 478

15.7.1 颜色拾取脚本 478

15.7.2 摄像机旋转脚本 480

15.7.3 添加监听脚本 482

15.8 模型导出脚本 486

15.8.1 obj文件导出脚本 486

15.8.2 stl文件导出脚本 489

15.9 辅助工具脚本 491

15.9.1 初始化相关脚本 491

15.9.2 监听相关脚本 496

15.10 系统的优化与改进 501

15.11 本章小结 502