WebGL 3D开发实战详解（第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