●前言
篇 数据结构基础
章 SystemJS与Webpack
1.1 准备工作
1.1.1 安装Node.js
1.1.2 安装Viusal Studio Code
1.2 安装和配置SystemJS
1.2.1 安装SystemJS
1.2.2 使用SystemJS
1.2.3 个TypeScript程序
1.3 安装和配置Webpack
1.3.1 安装Webpack
1.3.2 配置Webpack
1.3.3 调用build命令
1.3.4 配置tsconfig.json文件
1.3.5 调用build和dev命令
1.3.6 使用watch命令
1.3.7 联合使用watch和dev命令
1.3.8 使用Webpack压缩打包源码
1.4 SysemJS VS.Webpack
1.5 编译（Compile）VS.转义（Transpile）
1.6 断点调试
1.6.1 安装及配置Debugger for Chrome扩展
1.6.2 断点调试TypeScript程序
1.6.3 VS Code Debug快捷键
1.7 本章总结
第2章 TypeScript封装和实现常用容器
2.1 ArrayBuffer、DataView及类型数组实现原理
2.1.1 C/C++模拟JS/TS中的ArrayBuffer对象
2.1.2 C/C++模拟JS/TS中的DataView对象
2.1.3 C/C++版CDataView VS.JS/TS版DataView
2.1.4 C/C++模拟JS/TS中的Float32Array对象
2.1.5 C/C++版CFloat32Array VS.JS/TS版Float32Array
2.1.6 JS/TS中的类型数组对象
2.2 封装动态类型数组
2.2.1 TypedArrayList的成员变量及构造函数
2.2.2 TypedArrayList的push方法
2.2.3 TypedArrayList的slice方法和subarray方法
2.2.4 TypedArrayList的其他方法和属性
2.2.5 capacityChangedCallback回调函数
2.3 封装关联数组
2.3.1 JS/TS中的关联数组
2.3.2 TypeScript索引签名
2.3.3 ES 6 Map对象
2.3.4 封装成Dictionary字典对象
2.3.5 测试Dictionary对象
2.3.6 红黑树还是哈希表
2.4 实现SGI STL风格双向循环链表
2.4.1 泛型的ListNode结构
2.4.2 List中的头节点
2.4.3 双向循环概念
2.4.4 List的查询与遍历操作
2.4.5 List的插入操作
2.4.6 List的删除操作
2.4.7 List的push/pop/push_front/pop_front操作
2.5 封装队列与栈
2.5.1 声明IAdapter泛型接口
2.5.2 实现AdapterBase抽象基类
2.5.3 实现Queue子类和Stack子类
2.6 实现通用树结构
2.6.1 树结构的内存表示
2.6.2 树节点添加时的要点
2.6.3 树节点isDescendantOf和remove方法的实现
2.6.4 实现addChild等方法
2.6.5 查询树结构的层次关系
2.6.6 广度/深度优先遍历算法
2.6.7 队列及栈在广度/深度优先遍历中的应用
2.6.8 广度/深度线性遍历枚举器
2.6.9 树结构枚举器的实现
2.6.10 测试树结构迭代器
2.6.11 深度优先的递归遍历
2.7 本章总结
第2篇 WebGL图形编程基础
第3章 WebGLApplication框架
3.1 Application体系结构概述
3.2 个WebGL Demo
3.2.1 技术要点描述
3.2.2 Demo的成员变量与构造函数
3.2.3 资源同步加载
3.2.4 立方体、坐标系、三角形及文字渲染
3.2.5 更新操作
3.2.6 键盘输入事件处理
3.2.7 总结Application框架的使用流程
3.3 Application框架实现
3.3.1 成员变量与构造函数
3.3.2 启动/查询/停止Application
3.3.3 不间断地更新操作
3.3.4 CanvasInputEvent及其子类
3.3.5 DOM中的getBoundingRect方法
3.3.6 实现viewportToCanvasCoordinate方法
3.3.7 将DOM Event事件转换为CanvasInputEvent事件
3.3.8 实现EventListenerObject接口进行事件分发
3.3.9 让事件起作用
3.3.10 定时器Timer系统
3.3.11 增删定时器对象
3.3.12 触发多个定时任务的操作
3.3.13 WebGLApplication子类
3.3.14 CameraApplication子类
3.4 HTML页面系统
3.4.1 HTML页面系统简介
3.4.2 HTML页面源码
3.4.3 入口文件main.ts
3.5 异步资源加载及同步操作
3.5.1 使用Promise封装HTTP异步请求
3.5.2 实现AsyncLoadTestApplication类
3.5.3 异步run函数的覆写（override）与测试
3.5.4 Promise.all异步并发加载及同步操作
3.5.5 本书后续的资源加载及同步策略
3.6 本章总结
第4章 WebGL基础
4.1 WebGL中的类
4.2 准备工作
4.2.1 创建WebGLRenderingContext对象
4.2.2 WebGLContextAttributes对象与帧缓冲区
4.2.3 渲染状态
4.2.4 WebGLContextEvent事件
4.3 基本几何图元绘制Demo
4.3.1 视矩阵、投影矩阵、裁剪和视口
4.3.2 GLSL ES着色语言
4.3.3 WebGLShader对象
4.3.4 GLSL ES精度限定符与WebGLShaderPrecisionFormat对象
4.3.5 WebGLProgram对象
4.3.6 WebGLActiveInfo对象
4.3.7 WebGLUniformLocation对象
4.3.8 WebGLBuffer对象
4.3.9 渲染数据存储思考
4.3.10 Interleaved数组的存储、寻址及绘制
4.3.11 drawArrays绘制基本几何图元
4.3.12 详解基本几何图元
4.3.13 drawElements绘制方法
4.4 本章总结
第5章 WebGLUtilLib渲染框架
5.1 WebGLUtilLib框架类结构体系
5.2 GLAttribState类的实现
5.2.1 预定义顶点属性常量值
5.2.2 GLAttribState类的bit位操作
5.2.3 getInterleavedLayoutAttribOffsetMap方法
5.2.4 getSequencedLayoutAttribOffsetMap方法
5.2.5 getSepratedLayoutAttribOffsetMap方法
5.2.6 getVertexByteStride方法
5.2.7 setAttribVertexArrayPointer方法
5.2.8 setAttribVertexArrayState方法
5.3 GLProgram相关类的实现
5.3.1 常用的VS和FS uniform变量
5.3.2 GLProgram的成员变量和构造函数
5.3.3 loadShaders方法
5.3.4 绑定和解绑GLProgram
5.3.5 载入uniform变量
5.3.6 GLProgramCache类
5.3.7 GLShaderSource对象
5.3.8 初始化常用的着色器
5.4 GLMesh相关类的实现
5.4.1 VAO对象与GLMeshBase类
5.4.2 GLStaticMesh类实现细节
5.4.3 GLMeshBuilder类成员变量
5.4.4 GLMeshBuilder类构造方法
5.4.5 GLMeshBuilder类的color、texcoord、normal和vertex方法
5.4.6 GLMeshBuilder类的begin和end方法
5.5 GLTexture类的实现
5.5.1 GLTexture的成员变量和构造函数
5.5.2 GLTexture类的upload方法
5.5.3 mipmap相关的静态方法
5.5.4 GLTexture的bind/unbind、wrap和filter方法
5.5.5 GLTexture的createDefaultTexture静态方法
5.6 本章总结
第6章 3D图形中的数学基础
6.1 坐标系
6.1.1 OpenGL/WebGL中的坐标系
6.1.2 左手坐标系与右手坐标系
6.2 TSM数学库
6.3 向量
6.3.1 向量的概念
6.3.2 向量的大小（或长度）
6.3.3 两个向量之间的距离
6.3.4 单位向量
6.3.5 向量的加法
6.3.6 向量的减法
6.3.7 向量的缩放
6.3.8 负向量
6.3.9 向量的点乘
6.3.10 向量的叉乘
6.4 矩阵
6.4.1 矩阵的定义
6.4.2 矩阵的乘法
6.4.3 单位矩阵
6.4.4 矩阵的转置
6.4.5 矩阵的行列式与求逆
6.5 仿射变换
6.5.1 平移矩阵
6.5.2 缩放矩阵
6.5.3 绕任意轴旋转矩阵
6.6 视图矩阵与投影矩阵
6.6.1 视图（摄像机）矩阵
6.6.2 投影矩阵
6.7 四元数
6.8 平面
6.8.1 构造平面
6.8.2 平面的单位化
6.8.3 点与平面的距离与关系
6.9 矩阵堆栈
6.9.1 构造函数与worldMatrix属性
6.9.2 矩阵的入栈、出栈及load方法
6.9.3 仿射变换操作
6.10 摄像机
6.10.1 成员变量和构造函数
6.10.2 摄像机的移动和旋转
6.10.3 摄像机的更新
6.10.4 摄像机的相关属性
6.11 WebGLCoordSystem类
6.12 本章总结
第7章 多视口渲染基本几何体、坐标系及文字
7.1 使用GLMeshBuilder多视口渲染基本几何体
7.1.1 Demo的需求描述
7.1.2 Demo的成员变量和构造函数
7.1.3 drawByMatrixWithColorShader方法绘制流程
7.1.4 使用INTERLEAVED顶点存储格式绘制三角形
7.1.5 使用SEQUENCED顶点存储格式绘制四边形
7.1.6 使用SEPARATED顶点存储格式绘制立方体
7.1.7 创建多视口的方法
7.1.8 WebGL中的纹理坐标系
7.1.9 drawByMultiViewportsWithTextureShader方法绘制流程
7.1.10 绘制纹理立方体
7.1.11 实现Atlas纹理贴图效果
7.1.12 收尾工作
7.2 坐标系、文字渲染及空间变换Demo
7.2.1 Demo的需求描述
7.2.2 Demo的成员变量和构造函数
7.2.3 生成单视口或多视口坐标系数组
7.2.4 覆写（override）更新和渲染虚方法
7.2.5 覆写（override）键盘事件处理虚方法
7.2.6 drawFullCoordSystem方法
7.2.7 drawFullCoordSystemWithRotatedCube方法
7.2.8 DrawHelper类的drawFullCoordSystem方法
7.2.9 深度测试对坐标系绘制的影响
7.2.10 drawText方法
7.2.11 MathHelper类的obj2GLViewportSpace方法
7.2.12 3D图形中的数学变换流水线
7.3 本章总结
第3篇 开发实战
第8章 解析与渲染Quake3 BSP场景
8.1 Q3BspApplication入口类
8.2 解析Quake3 BSP二进制文件
8.2.1 Quake3BspParser类的常量定义
8.2.2 Q3BSPLump结构定义
8.2.3 解析BSP文件头
8.2.4 解析实体字符串数据
8.2.5 解析材质数据
8.2.6 解析顶点数据
8.2.7 解析顶点索引数据
8.2.8 解析渲染表面数据
8.2.9 Quake3与WebGL坐标系转换
8.3 渲染Quake3 BSP场景
8.3.1 Quake3BspScene的初始化
8.3.2 DrawSurface对象
8.3.3 封装Promise加载所有纹理
8.3.4 生成GLStaticMesh对象
8.3.5 绘制整个BSP场景
8.4 本章总结
第9章 解析和渲染Doom3 PROC场景
9.1 Doom3Application入口类
9.2 解析Doom3 PROC场景
9.2.1 Doom3词法解析规则
9.2.2 IDoom3Tokenizer词法解析器
9.2.3 Doom3 PROC文件格式总览
9.2.4 Doom3ProcParser的parse方法
9.2.5 Doom3Area、Doom3Surface及Doom3Vertex类
9.2.6 Doom3ProcParser的_readArea方法
9.2.7 Doom3ProcParser的_readSurface方法
9.2.8 Doom3ProcParser的_readPortals方法
9.2.9 Doom3ProcParser的_readNodes方法
9.3 使用Doom3ProcScene加载和渲染PROC场景
9.3.1 RenderSurface对象
9.3.2 Doom3ProcScene的draw方法
9.3.3 Doom3ProcScene类的loadTextures方法
9.3.4 Doom3ProcScene的parseDoom3Map方法
9.4 AABB包围盒
9.4.1 AABB包围盒与OBB包围盒的特点
9.4.2 构建AABB包围盒
9.4.3 计算AABB包围盒的9个顶点坐标值
9.4.4 计算变换后的AABB包围盒
9.4.5 AABB包围盒的两个常用碰检算法
9.5 摄像机视截体
9.5.1 摄像机视截体的概念
9.5.2 Frustum类的成员变量和构造函数
9.5.3 buildFromCamera方法的实现
9.5.4 让Camera类支持Frustum
9.5.5 Frustum与包围盒及三角形的可见行测试
9.5.6 让GLStaticMesh支持包围盒
9.5.7 更新Doom3ProcScene的draw方法
9.5.8 将Frustum绘制出来
9.5.9 Doom3ProcScene类增加包围盒绘制方法
9.6 本章总结
0章 解析和渲染Doom3 MD5骨骼蒙皮动画
10.1 骨骼蒙皮动画原理
10.1.1 骨骼蒙皮动画效果演示
10.1.2 骨骼蒙皮动画中的各种坐标系
10.1.3 骨骼蒙皮动画数学关键点的问答
10.2 解析和渲染.md5mesh文件格式
10.2.1 .md5mesh文件解析流程
10.2.2 .md5mesh中的绑定姿态
10.2.3 解析绑定姿态
10.2.4 .md5mesh中的蒙皮数据
10.2.5 解析蒙皮数据
10.2.6 计算顶点最终位置
10.2.7 加载和生成纹理
10.2.8 绘制绑定姿态（BindPose）
10.3 解析和渲染.md5anim文件格式
10.3.1 .md5anim的解析流程
10.3.2 解析.md5anim中的关节层次信息
10.3.3 解析.md5anim中的包围盒数据
10.3.4 解析.md5anim中的baseframe数据
10.3.5 解析.md5anim中的frame数据
10.3.6 帧动作姿态结构
10.3.7 MD5Anim类的buildLocalSkeleton方法
10.3.8 MD5Anim类的updateToModelSpaceSkeleton方法
10.3.9 MD5SkinedMesh类的playAnim方法
10.3.10 MD5SkinedMesh的drawAnimPose方法
10.4 实现MD5SkinedMeshApplication Demo
10.5 本章总结
内容虚线
内容简介
为了让广大3D图形爱好者能够快速地学习WebGL图形编程，本书按照循序渐进的方式，由浅入深地讲解了WebGL图形编程的相关知识点。本书理论结合实践，可以让3D图形爱好者少走弯路，直击3D图形开发中的核心要点。本书共10章，分为3篇。、2章为数据结构基础篇，主要介绍如何构建TypeScript开发调试环境，并以范型编程方式实现和封装了动态类型数组、关联数组、双向链表、队列、栈和树等数据结构。第37章为WebGL图形编程基础篇，围绕着如何建立一个WebGLApplication框架应用体系和WebGLUtilLib渲染体系而展开，并且详细介绍了3D图形编程中的一些常用数学基础知识。第810章为开发实战篇，在使用WebGLApplication框架和WebGLUtilLib框架的基础上实现了对id Software公司开源的Quake3 BSP及Doom3 PROC场景的解析和渲染，并且介绍…
作者简介
步磊峰 著
步磊峰，现为上海斐繁信息科技有限公司技术负责人。计算机图形编程资深爱好者。有超过15年的编程经验。擅长C、C++、C#、Java、JavaScript、TypeScript等编程语言。在作者的程序人生中，曾经写过3D程序、跨平台UI引擎、Java页游服务器和微信服务器，并为靠前的多个大型国营金融机构开发过多款移动端App。个人优选的成就是通过内部培训，为公司培养了20多个C语言、C++及移动端的开发人才。
摘要
笔者在本书的姊妹篇《TypeScript图形渲染实战：2D架构设计与实现》一书中使用了微软最新的TypeScript语言，以面向接口及泛型的编程方式，采用HTML 5中的Canvas2D绘图API，实现了一个2D动画精灵系统，并在该精灵系统上演示了精心设计的与图形数学变换相关的Demo。本书中，笔者将继续带领读者学习TypeScript图形渲染的相关知识。本书主要解决的是基于WebGL的3D图形架构与实现。 3D图形编程是一个庞大的主题，从宏观角度，笔者将整个3D图形编程分为三个层次，即画出来、画得美和画得快。本书定位于画出来，目的是让读者使用TypeScript语言及WebGL 3D API编写一个WebGLApplication应用程序框架及WebGLUtilLib封装库，来渲染id Software公司的Quake3及Doom3这两个引擎…