[套装书]TypeScript图形渲染实战：基于WebGL的3D架构与实现+TypeScript图形渲染实战：2D架构设计与实现（2册）

1.3.4 配置tsconfig.json文件 12
1.3.5 调用build和dev命令 13
1.3.6 使用watch命令 14
1.3.7 联合使用watch和dev命令 15
1.3.8 使用Webpack压缩打包源码 16
1.4 SysemJS VS. Webpack 16
1.5 编译（Compile）VS.转义（Transpile） 18
1.6 断点调试 19
1.6.1 安装及配置Debugger for Chrome扩展 19
1.6.2 断点调试TypeScript程序 20
1.6.3 VS Code Debug快捷键 21
1.7 本章总结 21
第2章 TypeScript封装和实现常用容器 22
2.1 ArrayBuffer、DataView及类型数组实现原理 23
2.1.1 C/C++模拟JS/TS中的ArrayBuffer对象 23
2.1.2 C/C++模拟JS/TS中的DataView对象 24
2.1.3 C/C++版CDataView VS. JS/TS版DataView 25
2.1.4 C/C++模拟JS/TS中的Float32Array对象 26
2.1.5 C/C++版CFloat32Array VS. JS/TS版Float32Array 28
2.1.6 JS/TS中的类型数组对象 30
2.2 封装动态类型数组 31
2.2.1 TypedArrayList的成员变量及构造函数 31
2.2.2 TypedArrayList的push方法 32
2.2.3 TypedArrayList的slice方法和subarray方法 33
2.2.4 TypedArrayList的其他方法和属性 35
2.2.5 capacityChangedCallback回调函数 36
2.3 封装关联数组 36
2.3.1 JS/TS中的关联数组 37
2.3.2 TypeScript索引签名 37
2.3.3 ES 6 Map对象 38
2.3.4 封装成Dictionary字典对象 39
2.3.5 测试Dictionary对象 42
2.3.6 红黑树还是哈希表 42
2.4 实现SGI STL风格双向循环链表 44
2.4.1 泛型的ListNode结构 45
2.4.2 List中的头节点 45
2.4.3 双向循环概念 46
2.4.4 List的查询与遍历操作 46
2.4.5 List的插入操作 48
2.4.6 List的删除操作 50
2.4.7 List的push / pop / push_front / pop_front操作 51
2.5 封装队列与栈 51
2.5.1 声明IAdapter泛型接口 52
2.5.2 实现AdapterBase抽象基类 52
2.5.3 实现Queue子类和Stack子类 53
2.6 实现通用树结构 54
2.6.1 树结构的内存表示 54
2.6.2 树节点添加时的要点 55
2.6.3 树节点isDescendantOf和remove方法的实现 56
2.6.4 实现addChild等方法 58
2.6.5 查询树结构的层次关系 59
2.6.6 广度/深度优先遍历算法 60
2.6.7 队列及栈在广度/深度优先遍历中的应用 62
2.6.8 广度/深度线性遍历枚举器 63
2.6.9 树结构枚举器的实现 63
2.6.10 测试树结构迭代器 67
2.6.11 深度优先的递归遍历 71
2.7 本章总结 73
第2篇 WebGL图形编程基础
第3章 WebGLApplication框架 76
3.1 Application体系结构概述 77
3.2 第一个WebGL Demo 78
3.2.1 技术要点描述 78
3.2.2 Demo的成员变量与构造函数 80
3.2.3 资源同步加载 82
3.2.4 立方体、坐标系、三角形及文字渲染 83
3.2.5 更新操作 85
3.2.6 键盘输入事件处理 86
3.2.7 总结Application框架的使用流程 87
3.3 Application框架实现 87
3.3.1 成员变量与构造函数 88
3.3.2 启动/查询/停止Application 89
3.3.3 不间断地更新操作 90
3.3.4 CanvasInputEvent及其子类 92
3.3.5 DOM中的getBoundingRect方法 93
3.3.6 实现viewportToCanvasCoordinate方法 94
3.3.7 将DOM Event事件转换为CanvasInputEvent事件 95
3.3.8 实现EventListenerObject接口进行事件分发 96
3.3.9 让事件起作用 97
3.3.10 定时器Timer系统 97
3.3.11 增删定时器对象 98
3.3.12 触发多个定时任务的操作 100
3.3.13 WebGLApplication子类 101
3.3.14 CameraApplication子类 102
3.4 HTML页面系统 103
3.4.1 HTML页面系统简介 103
3.4.2 HTML页面源码 104
3.4.3 入口文件main.ts 105
3.5 异步资源加载及同步操作 107
3.5.1 使用Promise封装HTTP异步请求 107
3.5.2 实现AsyncLoadTestApplication类 109
3.5.3 异步run函数的覆写（override）与测试 110
3.5.4 Promise.all异步并发加载及同步操作 111
3.5.5 本书后续的资源加载及同步策略 114
3.6 本章总结 114
第4章 WebGL基础 116
4.1 WebGL中的类 116
4.2 准备工作 117
4.2.1 创建WebGLRenderingContext对象 117
4.2.2 WebGLContextAttributes对象与帧缓冲区 118
4.2.3 渲染状态 120
4.2.4 WebGLContextEvent事件 121
4.3 基本几何图元绘制Demo 122
4.3.1 视矩阵、投影矩阵、裁剪和视口 122
4.3.2 GLSL ES着色语言 123
4.3.3 WebGLShader对象 126
4.3.4 GLSL ES精度限定符与WebGLShaderPrecisionFormat对象 128
4.3.5 WebGLProgram对象 130
4.3.6 WebGLActiveInfo对象 132
4.3.7 WebGLUniformLocation对象 134
4.3.8 WebGLBuffer对象 137
4.3.9 渲染数据存储思考 140
4.3.10 Interleaved数组的存储、寻址及绘制 141
4.3.11 drawArrays绘制基本几何图元 144
4.3.12 详解基本几何图元 146
4.3.13 drawElements绘制方法 149
4.4 本章总结 152
第5章 WebGLUtilLib渲染框架 153
5.1 WebGLUtilLib框架类结构体系 153
5.2 GLAttribState类的实现 155
5.2.1 预定义顶点属性常量值 156
5.2.2 GLAttribState类的bit位操作 157
5.2.3 getInterleavedLayoutAttribOffsetMap方法 158
5.2.4 getSequencedLayoutAttribOffsetMap方法 160
5.2.5 getSepratedLayoutAttribOffsetMap方法 161
5.2.6 getVertexByteStride方法 162
5.2.7 setAttribVertexArrayPointer方法 163
5.2.8 setAttribVertexArrayState方法 164
5.3 GLProgram相关类的实现 166
5.3.1 常用的VS和FS uniform变量 166
5.3.2 GLProgram的成员变量和构造函数 167
5.3.3 loadShaders方法 168
5.3.4 绑定和解绑GLProgram 169
5.3.5 载入uniform变量 170
5.3.6 GLProgramCache类 171
5.3.7 GLShaderSource对象 172
5.3.8 初始化常用的着色器 173
5.4 GLMesh相关类的实现 174
5.4.1 VAO对象与GLMeshBase类 174
5.4.2 GLStaticMesh类实现细节 175
5.4.3 GLMeshBuilder类成员变量 178
5.4.4 GLMeshBuilder类构造方法 179
5.4.5 GLMeshBuilder类的color、texcoord、normal和vertex方法 181
5.4.6 GLMeshBuilder类的begin和end方法 184
5.5 GLTexture类的实现 187
5.5.1 GLTexture的成员变量和构造函数 187
5.5.2 GLTexture类的upload方法 188
5.5.3 mipmap相关的静态方法 189
5.5.4 GLTexture的bind / unbind、wrap和filter方法 190
5.5.5 GLTexture的createDefaultTexture静态方法 191
5.6 本章总结 192
第6章 3D图形中的数学基础 193
6.1 坐标系 193
6.1.1 OpenGL / WebGL中的坐标系 193
6.1.2 左手坐标系与右手坐标系 194
6.2 TSM数学库 196
6.3 向量 197
6.3.1 向量的概念 197
6.3.2 向量的大小（或长度） 198
6.3.3 两个向量之间的距离 199
6.3.4 单位向量 199
6.3.5 向量的加法 199
6.3.6 向量的减法 200
6.3.7 向量的缩放 201
6.3.8 负向量 202
6.3.9 向量的点乘 202
6.3.10 向量的叉乘 203
6.4 矩阵 204
6.4.1 矩阵的定义 205
6.4.2 矩阵的乘法 205
6.4.3 单位矩阵 206
6.4.4 矩阵的转置 207
6.4.5 矩阵的行列式与求逆 207
6.5 仿射变换 208
6.5.1 平移矩阵 209
6.5.2 缩放矩阵 209
6.5.3 绕任意轴旋转矩阵 210
6.6 视图矩阵与投影矩阵 211
6.6.1 视图（摄像机）矩阵 212
6.6.2 投影矩阵 213
6.7 四元数 214
6.8 平面 215
6.8.1 构造平面 216
6.8.2 平面的单位化 217
6.8.3 点与平面的距离与关系 217
6.9 矩阵堆栈 218
6.9.1 构造函数与worldMatrix属性 219
6.9.2 矩阵的入栈、出栈及load方法 219
6.9.3 仿射变换操作 220
6.10 摄像机 220
6.10.1 成员变量和构造函数 221
6.10.2 摄像机的移动和旋转 222
6.10.3 摄像机的更新 224
6.10.4 摄像机的相关属性 225
6.11 WebGLCoordSystem类 227
6.12 本章总结 228
第7章 多视口渲染基本几何体、坐标系及文字 230
7.1 使用GLMeshBuilder多视口渲染基本几何体 230
7.1.1 Demo的需求描述 230
7.1.2 Demo的成员变量和构造函数 231
7.1.3 drawByMatrixWithColorShader方法绘制流程 233
7.1.4 使用INTERLEAVED顶点存储格式绘制三角形 234
7.1.5 使用SEQUENCED顶点存储格式绘制四边形 235
7.1.6 使用SEPARATED顶点存储格式绘制立方体 236
7.1.7 创建多视口的方法 239
7.1.8 WebGL中的纹理坐标系 240
7.1.9 drawByMultiViewportsWithTextureShader方法绘制流程 240
7.1.10 绘制纹理立方体 242
7.1.11 实现Atlas纹理贴图效果 243
7.1.12 收尾工作 245
7.2 坐标系、文字渲染及空间变换Demo 246
7.2.1 Demo的需求描述 246
7.2.2 Demo的成员变量和构造函数 247
7.2.3 生成单视口或多视口坐标系数组 248
7.2.4 覆写（override）更新和渲染虚方法 249
7.2.5 覆写（override）键盘事件处理虚方法 250
7.2.6 drawFullCoordSystem方法 250
7.2.7 drawFullCoordSystemWithRotatedCube方法 252
7.2.8 DrawHelper类的drawFullCoordSystem方法 254
7.2.9 深度测试对坐标系绘制的影响 255
7.2.10 drawText方法 256
7.2.11 MathHelper类的obj2GLViewportSpace方法 258
7.2.12 3D图形中的数学变换流水线 258
7.3 本章总结 259
第3篇 开发实战
第8章 解析与渲染Quake3 BSP场景 262
8.1 Q3BspApplication入口类 262
8.2 解析Quake3 BSP二进制文件 264
8.2.1 Quake3BspParser类的常量定义 264
8.2.2 Q3BSPLump结构定义 265
8.2.3 解析BSP文件头 266
8.2.4 解析实体字符串数据 267
8.2.5 解析材质数据 269
8.2.6 解析顶点数据 270
8.2.7 解析顶点索引数据 273
8.2.8 解析渲染表面数据 273
8.2.9 Quake3与WebGL坐标系转换 276
8.3 渲染Quake3 BSP场景 277
8.3.1 Quake3BspScene的初始化 278
8.3.2 DrawSurface对象 278
8.3.3 封装Promise加载所有纹理 279
8.3.4 生成GLStaticMesh对象 280
8.3.5 绘制整个BSP场景 282
8.4 本章总结 283
第9章 解析和渲染Doom3 PROC场景 285
9.1 Doom3Application入口类 285
9.2 解析Doom3 PROC场景 286
9.2.1 Doom3词法解析规则 287
9.2.2 IDoom3Tokenizer词法解析器 287
9.2.3 Doom3 PROC文件格式总览 288
9.2.4 Doom3ProcParser的parse方法 289
9.2.5 Doom3Area、Doom3Surface及Doom3Vertex类 290
9.2.6 Doom3ProcParser的_readArea方法 292
9.2.7 Doom3ProcParser的_readSurface方法 293
9.2.8 Doom3ProcParser的_readPortals方法 295
9.2.9 Doom3ProcParser的_readNodes方法 297
9.3 使用Doom3ProcScene加载和渲染PROC场景 298
9.3.1 RenderSurface对象 299
9.3.2 Doom3ProcScene的draw方法 299
9.3.3 Doom3ProcScene类的loadTextures方法 300
9.3.4 Doom3ProcScene的parseDoom3Map方法 301
9.4 AABB包围盒 303
9.4.1 AABB包围盒与OBB包围盒的特点 304
9.4.2 构建AABB包围盒 304
9.4.3 计算AABB包围盒的9个顶点坐标值 306
9.4.4 计算变换后的AABB包围盒 307
9.4.5 AABB包围盒的两个常用碰检算法 307
9.5 摄像机视截体 308
9.5.1 摄像机视截体的概念 308
9.5.2 Frustum类的成员变量和构造函数 309
9.5.3 buildFromCamera方法的实现 310
9.5.4 让Camera类支持Frustum 312
9.5.5 Frustum与包围盒及三角形的可见行测试 313
9.5.6 让GLStaticMesh支持包围盒 314
9.5.7 更新Doom3ProcScene的draw方法 314
9.5.8 将Frustum绘制出来 315
9.5.9 Doom3ProcScene类增加包围盒绘制方法 316
9.6 本章总结 316
第10章 解析和渲染Doom3 MD5骨骼蒙皮动画 318
10.1 骨骼蒙皮动画原理 318
10.1.1 骨骼蒙皮动画效果演示 319
10.1.2 骨骼蒙皮动画中的各种坐标系 320
10.1.3 骨骼蒙皮动画数学关键点的问答 321
10.2 解析和渲染.md5mesh文件格式 322
10.2.1 .md5mesh文件解析流程 323
10.2.2 .md5mesh中的绑定姿态 324
10.2.3 解析绑定姿态 325
10.2.4 .md5mesh中的蒙皮数据 326
10.2.5 解析蒙皮数据 329
10.2.6 计算顶点最终位置 330
10.2.7 加载和生成纹理 331
10.2.8 绘制绑定姿态（BindPose） 332
10.3 解析和渲染.md5anim文件格式 333
10.3.1 .md5anim的解析流程 333
10.3.2 解析.md5anim中的关节层次信息 334
10.3.3 解析.md5anim中的包围盒数据 336
10.3.4 解析.md5anim中的baseframe数据 337
10.3.5 解析.md5anim中的frame数据 338
10.3.6 帧动作姿态结构 339
10.3.7 MD5Anim类的buildLocalSkeleton方法 340
10.3.8 MD5Anim类的updateToModelSpaceSkeleton方法 342
10.3.9 MD5SkinedMesh类的playAnim方法 342
10.3.10 MD5SkinedMesh的drawAnimPose方法 343
10.4 实现MD5SkinedMeshApplication Demo 344
10.5 本章总结 346



---------------------------TypeScript图形渲染实战：2D架构设计与实现---------------------------


前言
第1篇 TypeScript篇
第1章 构建TypeScript开发、编译和调试环境 2
1.1 TypeScript简介 2
1.2 安装TypeScript开发环境 3
1.2.1 安装Node.js 3
1.2.2 安装VS Code 4
1.2.3 NPM全局安装TypeScript 6
1.2.4 第一个TypeScript程序 7
1.3 使用TypeScript编译（转译）器 13
1.3.1 生成tsconfig.json文件 13
1.3.2 解决生成tsconfig.json文件后带来的常见问题 13
1.3.3 自动编译TypeScript文件 15
1.4 模块化开发TypeScript 15
1.4.1 tsconfig.json文件中的target和module命令选项 16
1.4.2 编写Canvas2D类导出给main.ts调用 16
1.4.3 使用lite-server搭建本地服务器 17
1.5 使用SystemJS自动编译加载TypeScript 18
1.5.1 NPM本地安装TypeScript库和SystemJS库 18
1.5.2 SystemJS直接编译TypeScript源码 19
1.6 使用VS Code调试TypeScript源码 20
1.6.1 安装及配置Debugger for Chrome扩展 20
1.6.2 VS Code中单步调试TypeScript 20
1.7 本章总结 22
第2章 使用TypeScript实现 Doom 3词法解析器 24
2.1 Token与Tokenizer 24
2.1.1 Doom3文本文件格式 26
2.1.2 使用IDoom3Token与IDoom3Tokenizer接口 26
2.1.3 ES 6中的模板字符串 28
2.1.4 IDoom3Token与IDoom3Tokenizer接口的定义 29
2.2 IDoom3Token与IDoom3Tokenizer接口的实现 30
2.2.1 Doom3Token类成员变量的声明 30
2.2.2 Doom3Token类变量初始化的问题 31
2.2.3 IDoom3Token接口方法的实现 32
2.2.4 Doom3Token类的非接口方法实现 33
2.2.5 Doom3Tokenzier处理数字和空白符 34
2.2.6 IDoom3Tokenizer接口方法实现 34
2.2.7 Doom3Tokenizer字符处理私有方法 35
2.2.8 核心的getNextToken方法 36
2.2.9 跳过不需处理的空白符和注释 37
2.2.10 实现_getNumber方法解析数字类型 38
2.2.11 实现_getSubstring方法解析子字符串 40
2.2.12 实现_getString方法解析字符串 41
2.2.13 IDoom3Tokenizer词法解析器状态总结 42
2.3 使用工厂模式和迭代器模式 43
2.3.1 微软COM中创建接口的方式 43
2.3.2 Doom3Factory工厂类 43
2.3.3 迭代器模式 44
2.3.4 模拟微软.NetFramework中的泛型迭代器 44
2.3.5 IDoom3Tokenizer扩展 IEnumerator接口 45
2.3.6 修改Doom3Tokenizer源码 45
2.3.7 使用VS Code中的重命名重构方法 46
2.3.8 使用迭代器解析Token 46
2.3.9 面向接口与面向对象编程的个人感悟 47
2.4 从服务器获取资源 47
2.4.1 HTML加载本地资源遇到的问题 48
2.4.2 从服务器加载资源 48
2.4.3 使用XHR向服务器请求资源文件 49
2.4.4 TypeScript中的类型别名 50
2.4.5 使用doGet请求文本文件并解析 51
2.4.6 解决仍有空白字符输出问题 52
2.4.7 实现doGetAsync异步请求方法 52
2.4.8 声明TypeScript中的回调函数 54
2.4.9 调用回调函数 55
2.5 本章总结 57
第2篇 Canvas2D篇
第3章 动画与Application类 60
3.1 requestAnimationFrame方法与动画 60
3.1.1 HTML中不间断的循环 60
3.1.2 requestAnimationFrame与监视器刷新频率 62
3.1.3 基于时间的更新与重绘 65
3.2 Application类及其子类 67
3.2.1 Application类体系结构 67
3.2.2 启动动画循环和停止动画循环 68
3.2.3 Application类中的更新和重绘 69
3.2.4 回调函数的this指向问题 70
3.2.5 函数调用时this指向的Demo演示 71
3.2.6 CanvasInputEvent及其子类 73
3.2.7 使用getBoundingRect方法变换坐标系 75
3.2.8 将DOM Event事件转换为CanvasInputEvent事件 77
3.2.9 EventListenerObject与事件分发 77
3.2.10 让事件起作用 79
3.2.11 Canvas2DApplication子类和WebGLApplication子类 79
3.3 测试及修正Application类 80
3.3.1 继承并覆写Application基类的虚方法 80
3.3.2 测试ApplicationTest类 81
3.3.3 多态（虚函数动态绑定） 82
3.3.4 鼠标单击事件测试 83
3.3.5 CSS盒模型对_viewportToCanvasCoordinate的影响 84
3.3.6 正确的_viewportToCanvasCoordinate方法实现 86
3.4 为Application类增加计时器功能 90
3.4.1 Timer类与TimeCallback回调函数 90
3.4.2 添加和删除Timer（计时器） 91
3.4.3 触发多个定时任务的操作 93
3.4.4 测试Timer功能 95
3.5 本章总结 96
第4章 使用Canvas2D绘图 98
4.1 绘制基本几何体 98
4.1.1 Canvas2DApplication的绘制流程 98
4.1.2 绘制矩形Demo 99
4.1.3 模拟Canvas2D中渲染状态堆栈 100
4.1.4 线段属性与描边操作（stroke） 103
4.1.5 虚线绘制（交替绘制线段） 105
4.1.6 使用颜色描边和填充 108
4.1.7 使用渐变对象描边和填充 110
4.1.8 使用图案对象描边和填充 113
4.1.9 后续要用到的一些常用绘制方法 115
4.2 绘制文本 117
4.2.1 封装fillText方法 117
4.2.2 文本的对齐方式 119
4.2.3 自行实现文本对齐效果 121
4.2.4 计算文本高度算法 122
4.2.5 嵌套矩形定位算法 122
4.2.6 fillRectWithTitle方法的实现 125
4.2.7 自行文本对齐实现Demo 126
4.2.8 font属性 128
4.2.9 实现makeFontString辅助方法 129
4.3 绘制图像 130
4.3.1 drawImage方法 131
4.3.2 Repeat图像填充模式 133
4.3.3 加强版drawImage方法的实现 134
4.3.4 加强版drawImage方法效果演示 136
4.3.5 离屏Canvas的使用 137
4.3.6 操作Canvas中的图像数据 138
4.4 绘制阴影 141
4.5 本章总结 142
第3篇 图形数学篇
第5章 Canvas2D坐标系变换 146
5.1 局部坐标系变换 146
5.1.1 准备工作 146
5.1.2 平移操作演示 149
5.1.3 平移和旋转组合操作演示 150
5.1.4 绘制旋转的轨迹 152
5.1.5 变换局部坐标系的原点 154
5.1.6 测试fillLocalRectWithTitle方法 156
5.1.7 彻底掌控局部坐标系变换 158
5.1.8 通用的原点变换方法 166
5.1.9 公转（Revolution）与自转（Rotation） 169
5.1.10 原点变换的另一种方法 171
5.2 坦克Demo 173
5.2.1 象限（Quadrant）文字绘制 174
5.2.2 坦克形体的绘制 175
5.2.3 坦克及炮塔的旋转 178
5.2.4 计算坦克的朝向 179
5.2.5 坦克朝着目标移动 182
5.2.6 使用键盘控制炮塔的旋转 183
5.2.7 初始朝向的重要性 184
5.2.8 朝向正确的运行 187
5.2.9 坦克朝着目标移动效果的生成代码 189
5.3 本章总结 190
第6章 向量数学及基本形体的点选 192
6.1 向量数学 192
6.1.1 向量的概念 192
6.1.2 向量的大小与方向 194
6.1.3 向量的加减法及几何含义 196
6.1.4 负向量及几何含义 198
6.1.5 向量与标量乘法及几何含义 198
6.1.6 向量标量相乘取代三角函数sin和cos的应用 200
6.1.7 向量的点乘及几何含义 201
6.1.8 向量的夹角及朝向计算 203
6.2 向量投影Demo 203
6.2.1 Demo的需求描述 205
6.2.2 绘制向量 205
6.2.3 向量投影算法 207
6.2.4 投影效果演示代码 208
6.2.5 向量getAngle和getOrientation方法的区别 210
6.3 点与基本几何形体的碰撞检测算法 211
6.3.1 点与线段及圆的碰撞检测 211
6.3.2 点与矩形及椭圆的碰撞检测 213
6.3.3 点与三角形的碰撞检测 213
6.3.4 点与任意凸多边形的碰撞检测 215
6.4 附录：图示代码 217
6.4.1 图6.1向量概念图示源码 217
6.4.2 图6.2和图6.3向量加减法图示源码 218
6.4.3 图6.4负向量图示源码 218
6.4.4 图6.5向量与标量相乘图示源码 219
6.4.5 图6.6向量的点乘图示源码 219
6.4.6 图6.11点与三角形的关系图示源码 220
6.4.7 图6.12和图6.13 凹凸多边形图示源码 221
6.5 本章总结 222
第7章 矩阵数学及贝塞尔曲线 223
7.1 矩阵数学 223
7.1.1 矩阵乘法 223
7.1.2 单位矩阵 225
7.1.3 矩阵求逆 225
7.1.4 用矩阵变换向量 226
7.1.5 平移矩阵及其逆矩阵 227
7.1.6 缩放矩阵及其逆矩阵 228
7.1.7 旋转矩阵及其逆矩阵 230
7.1.8 从两个单位向量构建旋转矩阵 233
7.1.9 使用makeRotationFromVectors方法取代atan2的应用 234
7.1.10 仿射变换 237
7.1.11 矩阵堆栈 237
7.1.12 在坦克Demo中应用矩阵堆栈 239
7.1.13 图7.1旋转矩阵推导图示绘制源码 243
7.2 贝塞尔曲线 245
7.2.1 Demo效果 245
7.2.2 使用Canvas2D内置曲线绘制方法 246
7.2.3 伯恩斯坦多项式推导贝塞尔多项式 249
7.2.4 贝塞尔曲线自绘版 251
7.2.5 鼠标碰撞检测和交互功能 253
7.2.6 实现贝塞尔曲线枚举器 255
7.3 本章总结 257
第4篇 架构与实现篇
第8章 精灵系统 260
8.1 精灵系统的架构与接口 260
8.1.1 应用程序的入口与命令分发 262
8.1.2 IRenderState、ITransformable和ISprite接口 265
8.1.3 IDrawable、IHittable和IShape接口 267
8.2 实现非场景图类型精灵系统 268
8.2.1 Transform2D辅助类 269
8.2.2 ISprite接口的实现 269
8.2.3 Sprite2DManager管理类 272
8.3 IShape形体系统 275
8.3.1 线段Line类 276
8.3.2 BaseShape2D抽象基类 278
8.3.3 Rect类和Grid类 280
8.3.4 Circle类和Ellipse类 281
8.3.5 ConvexPolygon类 282
8.3.6 Scale9Grid类 283
8.3.7 SpriteFactory生产IShape产品 289
8.4 精灵系统测试Demo 290
8.4.1 Demo的运行流程 291
8.4.2 创建各种IShape对象 292
8.4.3 创建网格精灵和事件处理函数 293
8.4.4 非网格精灵的事件处理函数 295
8.4.5 Demo的入口代码 296
8.5 本章总结 296
第9章 优美典雅的树结构 298
9.1 树的数据结构 298
9.1.1 树结构简介 298
9.1.2 树节点添加时的要点 300
9.1.3 树节点isDescendantOf和remove方法的实现 300
9.1.4 实现添加树节点方法 303
9.1.5 树结构的层次关系查询操作 304
9.2 树数据结构的遍历 308
9.2.1 树结构遍历顺序 308
9.2.2 树结构线性遍历算法 309
9.2.3 树结构遍历枚举器 310
9.2.4 树结构枚举器的实现 311
9.2.5 测试树结构枚举器 316
9.2.6 深度优先的递归遍历 320
9.2.7 使用儿子兄弟方式递归遍历算法 321
9.2.8 儿子兄弟方式非递归遍历算法 323
9.3 树数据结构的序列化与反序列化 327
9.3.1 树节点自引用特性导致序列化错误 328
9.3.2 树节点的序列化和反序列化操作 328
9.4 队列与栈的实现 331
9.5 本章总结 332
第10章 场景图系统 334
10.1 实现场景图精灵系统 334
10.1.1 非场景图精灵系统的不足之处 334
10.1.2 树结构场景图系统 336
10.1.3 矩阵堆栈和场景图 338
10.1.4 实现场景图精灵系统概述 338
10.1.5 核心的SpriteNode类 338
10.1.6 实现SpriteNode类的接口方法 340
10.1.7 SpriteNode的findSprite方法实现 342
10.1.8 递归的更新与绘制操作 343
10.1.9 SpriteNodeManager类 344
10.1.10 修改Sprite2D类的getWorldMatrix方法 346
10.1.11 让Sprite2DApplication类支持场景图精灵系统 347
10.2 骨骼层次精灵Demo 348
10.2.1 实现骨骼形体 348
10.2.2 SkeletonPersonTest类 349
10.2.3 事件处理程序 351
10.2.4 使用renderEvent事件 354
10.2.5 本节总结 356
10.3 坦克沿贝塞尔路径运动Demo 357
10.3.1 实现BezierPath形体类 358
10.3.2 需求描述 359
10.3.3 Demo的场景图 361
10.3.4 TankFollowBezierPathDemo类初始化 361
10.3.5 创建锚点、控制点及连线精灵 363
10.3.6 创建二次贝塞尔路径及坦克精灵 364
10.3.7 键盘事件处理方法 365
10.3.8 鼠标事件处理方法 366
10.3.9 坦克沿路径运动的核心算法 367
10.3.10 让坦克动起来 368
10.4 让精灵系统支持裁剪操作 370
10.5 本章总结 372

.　　* 深入理解骨骼蒙皮动画的数学原理，并成功地解析和渲染Doom3中的MD5骨骼动画格式。
　　本书有何特色
　　* 深入：凝聚作者15年3D图形编程经验，带领读者探索3D图形编程的知识；
　　* 系统：使用TypeScript构建Application应用程序框架及WebGL渲染框架；
　　* 广泛：涉及数据结构、WebGL渲染API用法、3D数学、二进制文件读取、骨骼动画及场景渲染等内容；
　　* 独特：使用TypeScript和WebGL渲染API来演示Quake3、Doom3引擎的场景和骨骼动画渲染；
　　* 实用：详细讲解8个完整的3D图形Demo，帮助读者理解3D图形渲染最本质的运行流程。
　　本书内容
　　第1篇 数据结构基础（第1、2章）
　　第1章SystemJS与webpack，以循序渐进的方式介绍了如何构建基于SystemJS和webpack的TypeScript语言开发、编译和调试环境，最终形成一个支持源码自动编译、模块自动载入、服务器端热部署、具有强大断点调试功能、能自动打包的TypeScript开发环境。
　　第2章TypeScript封装和实现常用容器，主要涉及与数据结构相关的知识点。首先讲解了JS/TS中新增的ArrayBuffer、DataView及与类型数组相关的知识点，然后封装和实现了动态类型数组、字典、双向循环列表、队列、栈及通用树结构。
　　第2篇 WebGL图形编程基础（第3~7章）
　　第3章WebGLApplication框架，通过本书第一个WebGL Demo来演示一个支持不停刷新、重绘、事件分发与响应、具有定时效果的WebGLApplication框架体系的使用流程。该框架支持使用ES 6.0标准中的async/await机制进行资源加载。
　　第4章WebGL基础，通过一个WebGL基本几何图元绘制的Demo，详细介绍了WebGLContextEvent、WebGLContextAttribut、WebGLRenderingContext、WebGLShader、WebGLProgram、WebGLShaderPrecisionFormat、WebGLActiveInfo、WebGLUniformLocation和WebGLBuffer这9个类的作用和常用方法。读者可以重点关注WebGLBuffer的3种不同渲染数据存储模式。
　　第5章WebGLUtilLib渲染框架，介绍了多个与WebGL相关的类。其中，GLProgram类用来编译、链接GLSL ES GPU Shader源码，并提供载入uniform变量的相关操作；GLStaticMesh对象用于绘制静态物体；GLMeshBuilder对象可以用于绘制动态物体；GLTexuture类可以在GLStaticMesh或GLMeshBuilder生成的网格对象上进行纹理贴图操作。
　　第6章3D图形中的数学基础，通过介绍开源TSM（TypeScript Vector And Matrix Math Library）数学库，让读者掌握向量、矩阵、四元数等相关的3D数学知识，并在TSM库的基础上实现了平面、摄像机、矩阵堆栈及GLCoordSystem等后续Demo要用到的类。
　　第7章多视口渲染基本几何体、坐标系及文字，使用WebGLApplication框架及WebGLUtilLib库实现了两个Demo。其中，第一个Demo使用GLMeshBuilder类在多视口中渲染基本几何体；第二个Demo则用来演示3D图形中坐标系的各种变换效果，并通过使用Canvas2D来绘制文字，从而解决WebGL中文字绘制的短板问题。
　　第3篇 开发实战（第8~10章）
　　第8章解析与渲染Quake3 BSP场景，首先在Quake3BspParser类的实现中介绍了如何使用DataView对象进行Quake3 BSP二进制文件解析，然后实现Quake3BspScene类。Quake3BspScene类可以将需要渲染的数据编译成GLStaticMesh对象支持的格式，从而正确地显示Quake3 BSP场景。
　　第9章解析和渲染Doom3 PROC场景，主要介绍了如何解析和渲染Doom3 PROC场景文件。首先实现了用Doom3SceneParser类进行场景文件的解析；然后实现了用Doom3ProcScene类进行场景文件的渲染；最后对场景的渲染增加视截体的可见性测试，从而提升WebGL的绘制效率。
　　第10章解析和渲染Doom3 MD5骨骼蒙皮动画，主要介绍了如何解析和渲染Doom3引擎中的MD5骨骼蒙皮动画。首先通过问答的方式介绍了骨骼动画中4个与坐标系相关的问题；然后解析并绘制.md5mesh文件；最后介绍.md5anim动画文件格式，并实现动画序列的显示播放。
　　本书配套资源获取方式
　　本书涉及的源代码文件和Demo需要读者自行下载。请登录华章公司网站www.hzbook.com，在该网站上搜索到本书，然后单击“资料下载”按钮，即可在页面上找到“配书资源”下载链接。
　　运行书中的源代码需要进行以下操作：
　　（1）按照本书第1章中的介绍下载并安装Node.js和VS Code。
　　（2）在VS Code的终端对话框中输入npm install命令，自动下载运行依赖包。
　　（3）下载好依赖包后继续输入npm run watch。
　　（4）在VS Code中新建一个终端面板，输入npm run dev。
　　本书读者对象
　　* 对3D图形编程、WebGL图形开发、游戏开发感兴趣的技术人员；
　　* 想转行做图形开发和WebGL开发的技术人员；
　　* 需要全面学习3D图形开发的技术人员；
　　* 想从其他强类型语言（C、C++、Java、C#、Objective-C等）转HTML 5开发的技术人员；
　　* JavaScript程序员；
　　* 想了解TypeScript的程序员；
　　* 想提高编程水平的人员；
　　* 在校大学生及喜欢计算机编程的自学者；
　　* 专业培训机构的学员。
　　本书阅读建议
　　* 没有3D图形框架开发基础的读者，建议从第1章顺次阅读并演练每一个实例；
　　* 有一定3D图形开发基础的读者，可以根据实际情况有重点地选择阅读各个模块和项目案例；
　　* 对于每一个模块和项目案例，先思考一下实现思路，然后再阅读，学习效果更好；
　　* 可以先对书中的模块和Demo阅读一遍，然后结合本书提供的源码再进行理解，并亲自运行和调试，这样理解起来就更加容易，也会更加深刻。
　　本书作者
　　本书由步磊峰编写。感谢在本书编写和出版过程中给予了笔者大量帮助的各位编辑！
　　由于作者水平所限，加之写作时间较为仓促，书中可能还存在一些疏漏和不足之处，敬请各位读者批评指正。联系邮箱：hzbook2017@163.com。
　　编著者
　　
　　
　　---------------------------TypeScript图形渲染实战：2D架构设计与实现---------------------------
　　
　　
　　TypeScript是由微软公司开发的一种开源编程语言，主要为大型应用而设计。它是JavaScript的一个超集，扩展了JavaScript的语法，任何现有的JavaScript程序都可以不加改变地在TypeScript下工作。
　　本书使用最新的TypeScript语言，以面向接口及泛型的编程方式，采用HTML 5中的Canvas2D绘图API，实现了一个2D动画精灵系统，并在该精灵系统上演示了精心设计的与图形数学变换相关的Demo。该精灵系统是一个具备最小运行环境（更新、重绘、裁剪，以及事件分发和响应），并支持精确点选（点与点、线段、矩形、圆形、椭圆、三角形及凸多边形），采取了享元设计模式，基于场景图管理且兼容非场景图类型，而且易于扩展的系统。
　　本书有何特色
　　1．全程使用TypeScript面向接口的编程语言
　　本书通过TypeScript语言提供的面向接口编程功能实现了：
　　* Doom3引擎中文本格式的词法解析器接口；
　　* 接口一致，且使用了树结构管理（场景图）和线性结构管理（非场景图）的精灵系统，并且能够让场景图类型的精灵系统兼容运行非场景图类型的精灵系统。
　　2．剖析Canvas2D的底层原理
　　本书中的Canvas2D相关章节实现了如下几个重要例子：
　　* 模拟了Canvas2D中的渲染状态堆栈和矩阵变换堆栈，并且在实例中使用自己的矩阵变换堆栈来运行相关例子；
　　* 实现了类似于Canvas2D文本绘制的各种对齐算法；
　　* 实现了加强版的drawImage方法，使其支持repeat/repeat-x/repeat-y填充模式的算法（类似于Canvsas2D中的图案填充），并且使用加强版的drawImage实现了九宫格缩放算法（Scale9Grid）。
　　3．详解图形数学及点与基本几何形体的碰撞检测算法
　　图形编程的最大“拦路虎”是涉及图形数学变换。书中以图形数学变换为核心实现了以下例子：
　　* 将平移、缩放和旋转的不同顺序组合绘制出来；
　　* 通过绘制各种轨迹来观察和理解物体原点变换的奥秘所在；
　　* 贝塞尔曲线原理动画；
　　* 坦克方向正确地朝着鼠标指针位置移动（三角函数版）；
　　* 坦克方向正确地朝着鼠标指针位置移动（使用向量缩放来避免使用sin / cos三角函数）；
　　* 坦克方向正确地朝着鼠标指针位置移动（使用从两个方向以向量构建的旋转矩阵来避免使用三角函数atan2，并且用自己实现的矩阵堆栈来替换Canvas2D中的矩阵堆栈）；
　　* 坦克沿着多条贝塞尔曲线围成的封闭路径朝向正确地运动；
　　* 点投影到向量上的动画效果（涉及向量的所有操作）；
　　* 使用鼠标精确点选旋转中的精灵（测试点与线段、矩形、圆形、椭圆、三角形，以及凸多边形碰撞检测算法及凸多边形判断算法）；
　　* 太阳系模拟动画；
　　* 骨骼层次精灵动画。
　　4．提供了几何原理图的生成源代码
　　本书图形数学相关章节中的几何原理图都是使用Canvas2D直接绘制出来的，并提供了绘制源代码。主要有如下图示：
　　* 向量方向与大小概念图示；
　　* 向量的加减法图示；
　　* 负向量图示；
　　* 向量与标量乘法图示；
　　* 向量点乘图示；
　　* 点与三角形关系图示；
　　* 凹多边形、凸多边形及三角形扇形化图示；
　　* 旋转矩阵推导图示。
　　5．精准地使用设计模式
　　本书中用到的设计模式如下：
　　* 使用工厂模式生产各种接口（精灵系统的精灵ISprite和所有基本形体IShape都是由SpriteFactory制造生产的）；
　　* 使用迭代器模式抽象所有具有迭代功能的类或接口（IDoom3Tokenizer、贝塞尔曲线迭代器、树结构深度优先和广度优先的8个线性遍历迭代器）；
　　* 使用模板方法设计模式（Application类通过模板方法模式规定了整个入口类的运行流程）；
　　* 使用适配器模式（在树结构中为了统一线性遍历算法，将队列和栈数据结构适配成一致的操作接口）；
　　* 使用享元设计模式（实现的精灵系统使用享元模式，多个精灵可以共享同一个形体，但是可以有不同的渲染状态、大小、位置和方向等）。
　　6．详尽地描述了树的数据结构要点
　　本书专门用一章来介绍树的数据结构，并且详尽地描述了树结构的各种重要算法。
　　* 基于队列的广度优先方式的4种非递归遍历算法（先根、后根、从左到右、从右到左）；
　　* 基于栈的深度优先方式的4种非递归遍历算法；
　　* 基于“父亲+儿子”数组方式的深度优先的4种递归遍历算法；
　　* 基于“父亲+儿子兄弟”方式的深度优先的4种递归遍历算法；
　　* 基于“父亲+儿子兄弟”方式的深度优先的非递归遍历算法；
　　* 基于JSON的序列化和反序列化算法。
　　7．提供完善的技术支持和售后服务
　　本书提供了专门的售后服务邮箱hzbook2017@163.com。读者在阅读本书的过程中若有疑问，可以通过该邮箱获得帮助。
　　本书内容及知识体系
　　第1篇 TypeScript篇（第1、2章）
　　第1章构建TypeScript开发、编译和调试环境，主要介绍了TypeScript语言的开发、编译和调试环境的搭建，最终形成一个支持源码自动编译、模块自动载入、服务器端热部署及具有强大断点调试功能的TypeScript快捷开发环境。
　　第2章使用TypeScript实现词法解析器，用TypeScript语言，以面向接口的方式实现了一个Doom3（原id Software公司毁灭战士3游戏引擎）词法解析器；并在此基础上实现了工厂和迭代器两种设计模式，使其支持接口的生成及使用迭代方式进行Token解析输出；同时封装了XMLHttpRequest类，用来支持从服务器端下载要解析的文件。本章还系统地介绍了后续章节中要用到的一些TypeScript常用的语法知识。
　　第2篇 Canvas2D篇（第3、4章）
　　第3章动画与Application类，详细介绍了requestAnimationFrame方法与屏幕刷新频率之间的关系；并在此基础上封装了一个支持基于时间的刷新、重绘，以及事件的分发和处理的Application类；还实现了能正确处理CSS盒模型的坐标变换功能；最后添加了支持不同帧率运行的计时器，模拟了setTimeout和setInterval方法的实现。
　　第4章使用Canvas2D绘图，主要介绍了Canvas2D中矢量图形、文本、图像及阴影绘制的相关内容，实现了一个本章及后续章节都要使用的基于Canvas2D的演示和测试环境。本章需要读者重点关注渲染状态堆栈的实现原理，以及各种文本对齐方式的算法和支持Repeat模式的drawImage实现等内容。
　　第3篇 图形数学篇（第5～7章）
　　第5章Canvas2D坐标系变换是本书的精华，通过多个例子演示了Canvas2D中局部坐标系变换的相关知识点，让读者知道变换顺序的重要性，理解变换及掌握原点变换的几种方式；并且通过太阳自转和月亮自公转的例子，介绍了Canvas2D中矩阵堆栈层次变换的用法；最后通过一个坦克跟随鼠标指针朝向正确地运动Demo，深入讲解了一些常用三角函数的应用。
　　第6章向量数学及基本形体的点选，首先讲述了向量的一些基本操作，然后通过向量的加法和缩放操作替换第5章坦克Demo中使用的sin/cos函数。为了演示向量的一些基本操作，特意实现了点投影到向量的动画效果Demo；给出了点与线段、圆、矩形、椭圆、三角形及凸多边形等基本形体之间的碰撞检测算法；最后给出了本章所有几何图示的生成源代码，便于读者更加深入地理解向量各个操作背后的几何含义。
　　第7章矩阵数学及贝塞尔曲线，首先讲述了矩阵的相关知识，重点推导了旋转矩阵；然后将第5章中的坦克Demo用矩阵方式重写，演示如何通过两个单位向量构建旋转矩阵，从而消除对atan2函数的使用；接着模拟了Canvas2D中的矩阵堆栈，并用自己实现的矩阵堆栈重写坦克Demo；最后介绍了贝塞尔曲线多项式的推导过程，并实现了一个曲线动画的Demo。
　　第4篇 架构与实现篇（第8～10章）
　　第8章精灵系统，以面向接口编程的方式实现了一个精灵系统，并在该系统上实现了一个Demo，用来测试系统的点与各个基本形体之间的精确碰撞检测。该系统具有必要的功能（更新、绘制、鼠标和键盘事件的分发与响应），使用了非场景图类型，支持精确点选，基于保留模式，并采用了享元设计模式。
　　第9章优美典雅的树结构，主要介绍了树结构的增、删、改、查，以及各种遍历算法，最后实现了树结构的JSON序列化和反序列化算法。本章重在灵活应用TypeScript泛型编程，涉及不少泛型编程的细节。
　　第10章场景图系统，融合前面章节所讲知识，以面向接口的编程方式实现了一个精灵系统。该系统具有必要的功能（更新、重绘、裁剪及事件分发和响应），使用了场景图类型（建立在第9章的树结构上），支持精确点选，基于非立即渲染模式（保留模式），采用了享元设计模式，兼容运行第8章的非场景图类型。在此基础上，通过骨骼层次精灵动画，演示了场景图的层次变换功能及享元模式的优点；最后实现了坦克沿着贝塞尔路径朝向正确运行的Demo，以演示该精灵系统的综合特点。
　　本书配套资源获取方式
　　本书涉及的源代码文件和Demo需要读者自行下载。请登录华章公司网站www.hzbook.com，在该网站上搜索到本书，然后单击“资料下载”按钮即可在页面上找到“配书资源”下载链接。
　　运行书中的源代码需要进行以下操作：
　　（1）按照本书第1章中的介绍下载并安装Node.js和VS Code。
　　（2）在VS Code的终端对话框中输入npm install命令，自动下载运行依赖包。
　　（3）下载好依赖包后继续输入npm run dev即可自动运行Demo。
　　本书读者对象
　　* 对图形、游戏和UI开发感兴趣的技术人员；
　　* 想转行到图形开发领域的技术人员；
　　* 需要全面学习图形开发技术的人员；
　　* 想从C/C++、Java、C#、Objective-C等语言转HTML 5开发的技术人员；
　　* JavaScript程序员；
　　* 想学习TypeScript的程序员；
　　* 想提高编程水平的人员；
　　* 在校大学生及喜欢计算机编程的自学者；
　　* 专业培训机构的学员。
　　本书阅读建议
　　* 没有图形框架开发基础的读者，建议从第1章顺次阅读并演练每一个实例。
　　* 有一定图形开发基础的读者，可以根据实际情况有重点地选择阅读各个模块和项目案例。对于每一个模块和项目案例，先思考一下实现思路，然后阅读，效果更佳。
　　* 可以先阅读书中的模块和Demo，再结合配套源代码理解并调试，这样更加容易理解，而且也会理解得更加深刻。
　　本书作者
　　本书由步磊峰编写。感谢在本书编写和出版过程中给予了笔者大量帮助的各位编辑！
　　由于笔者水平所限，加之写作时间较为仓促，书中可能还存在一些疏漏和不足之处，敬请各位读者批评指正。
　　步磊峰
　　

.　　—— 跨平台开源UI引擎FairyGUI作者萧应棠
　　
　　
　　
　　---------------------------TypeScript图形渲染实战：2D架构设计与实现---------------------------
　　
　　
　　大咖力荐
　　本书从图形基础算法原理出发，用非常浅显的语言讲解相关知识点，然后深入浅出地分析经典案例，一步步带你领略图形算法及架构的精彩世界。
　　——中国工业设计研究院西南中心院长覃霁
　　作者通过通俗易懂的讲解，将他十几年图形编程经验的精华浓缩至本书中。书中对TypeScript编程语言、2D图形及其数学基础都有较为全面的剖析，能够让广大读者较为系统地掌握HTML 5图形开发的核心技术。
　　——上海灵禅网络科技股份有限公司CEO兰海文
　　本书涉猎广泛，内容深刻，讲解深入浅出，囊括了TypeScript基本语法、图形渲染机制、图形学、数据结构、设计模式等内容，是一本不可多得的HTML 5图形开发书籍。
　　——上海凯英网络科技有限公司副总裁何鑫
　　本书带给读者全面的TypeScript语言讲解及Canvas2D绘图API开发案例，从而帮助读者构建出计算机图形学中数学变换的知识体系。对于热衷于图形学或游戏开发的相关读者而言，本书不仅是一本通俗易懂的TypeScript入门书，更是一本优秀的图形学工具书。
　　——成都手领科技有限公司创始人兼CTO、迷雾侦探/AI-LIMIT游戏技术负责人张锐
　　一本优秀的计算机图书，能够让读者从其文字中感受到作者的态度。相信读者也能够从本书中体会到作者多年来所坚持的技术钻研精神。
　　——《全局光照技术》作者秦春林
　　传统图形编程都是基于DirectX/OpenGL。而Web时代，HTML 5+Canvas2D/WebGL+TypeScript的组合才是最佳的图形编程方案。作者以多年的实战经验编写了本书，让读者能够较为轻松地理解图形编程的奥秘和编写技巧。阅读本书后，不但能让老的图形程序员容光焕发，精神饱满，收获满满，而且也能让萌新程序员通过本书一览大佬庖丁解牛的风姿，从而获得巨大的提升。
　　——《Go语言从入门到进阶实战》作者、慕课网讲师、资深全栈游戏开发者徐波