本书系统地介绍了HTML5的基本知识和新特性、WebGL的基本知识，并引导读者完成了WebGL的基础案例。同时，本书也对在WebGL中，实现可编程渲染管线着色器的语言进行了系统介绍，帮助读者进行着色器的高级开发打下坚实的基础。另外，本书介绍了3D开发的多种投影、变换原理及实现，以及点、线段、三角形三大类的绘制方式。 本书适合程序开发人员、游戏开发人员和虚拟现实开发者阅读，也可作为大专院校相关专业师生的学习用书，以及培训学校的教材。

1，按照新标准改版 2，加大VR和AR技术讲解 3，更新了切合现实需求的大案例 内容丰富，由浅入深；结构清晰，讲解到位；书中案例完全提供；既可自学，也适合作为教材。

吴亚峰，有十多年的Java开发与培训经验。主要的研究方向为VulKan、OpenGL ES、手机游戏，以及VR/AR。同时是3D游戏、VR/AR独立软件工程师，并兼任百纳科技软件培训中心首席培训师。近十年来为数十家著名企业培养了上千名高级软件开发人员，曾编写过《OpenGL ES 3x游戏开发》（上下卷）、《Unity 案例开发大全》（第一版，第二版）、《VR与AR开发高级教程——基于Unity》《H5和WebGL 3D开发实战详解》《Android应用案例开发大全》（第一版～第四版）、《Android游戏开发大全》（第一版～第四版）等畅销技术图书。2008年初开始关注Android平台下的3D应用开发，并开发出一系列优秀的Android应用程序与3D游戏。 于复兴，北京科技大学硕士，从业于计算机软件领域十余年，在软件开发和计算机教学方面有着丰富的经验。工作期间曾主持科研项目“PSP流量可视化检测系统研究与实现”，主持研发了多项省市级项目，同时为多家单位设计开发了管理信息系统，并在各种科技刊物上发表了多篇相关论文。2012年开始关注HTML5平台下的应用开发，参与开发了多款手机娱乐、游戏应用。 索依娜，2003年开始从事计算机领域教学及软件开发工作，曾参与编写《Android核心技术与实例详解》《Android平板电脑开发实战详解和典型案例》等技术图书。近几年曾主持市级科研项目一项，发表论文8篇，拥有多项软件著作权，多项发明及实用新型专利。同时多次指导学生参加国家级、省级计算机设计大赛并获奖。

目 录 第 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