《TYPESCRIPT图形渲染实战 基于WEBGL的3D架构与实现》求取 ⇩

第1篇数据结构基础2

第1章SystemJS与Webpack2

1.1准备工作3

1.1.1 安装Node.js3

1.1.2 安装Viusal Studio Code4

1.2安装和配置SystemJS5

1.2.1 安装SystemJS5

1.2.2 使用SystemJS7

1.2.3 第一个TypeScript程序8

1.3安装和配置Webpack9

1.3.1 安装Webpack9

1.3.2 配置Webpack11

1.3.3 调用build命令12

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.Webpack16

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.1ArrayBuffer、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版DataView25

2.1.4 C/C＋＋模拟JS/TS中的Float32Array对象26

2.1.5 C/C＋＋版CFloat32Array VS.JS/TS版Float32Array28

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＜T＞泛型接口52

2.5.2 实现AdapterBase＜T＞抽象基类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图形编程基础76

第3章WebGLApplication框架76

3.1 Application体系结构概述77

3.2第一个WebGL Demo78

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.3Application框架实现87

3.3.1 成员变量与构造函数88

3.3.2 启动/查询/停止Application89

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.4HTML页面系统103

3.4.1 HTML页面系统简介103

3.4.2 HTML页面源码104

3.4.3 入口文件main.ts105

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基本几何图元绘制Demo122

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.2GLAttribState类的实现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.3GLProgram相关类的实现166

5.3.1 常用的VS和FS uniform变量166

5.3.2 GLProgram的成员变量和构造函数167

5.3.3 loadShaders方法168

5.3.4 绑定和解绑GLProgram169

5.3.5 载入uniform变量170

5.3.6 GLProgramCaehe类171

5.3.7 GLShaderSource对象172

5.3.8 初始化常用的着色器173

5.4GLMesh相关类的实现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.5GLTexture类的实现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坐标系、文字渲染及空间变换Demo246

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篇开发实战262

第8章解析与渲染Quake3BSP场景262

8.1 Q3BspApplication入口类262

8.2解析Quake3BSP二进制文件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渲染Quake3BSP场景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 Doom3PROC文件格式总览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.4AABB包围盒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类支持Frustum312

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 Demo344

10.5 本章总结346