音像TypeScript图形渲染实战(基于WebGL的3D架构与实现)步磊峰

前言
篇 数据结构基础
章 SystemJS与Webpack
1.1 准备工作
1.1.1 安装Node.is
1.1.2 安装Viusal Studio Code
1.2 安装和配置SystemJS
1.2.1 安装SystemJS
1.2.2 使用SystemJS
1.. 个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中的Float32Arrav对象
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.. TypedArrayList的slice方法和subarray方法
2.2.4 TypedArrayList的方法和属
2.2.5 capacityChangedCallback回调函数
. 封装关联数组
..1 JS/TS中的关联数组
..2 TypeScript索引签名
.. ES 6 Map对象
..4 封装成Dictionary字典对象
..5 测试Dictionary对象
.. 红黑树还是哈希表
2.4 实现SGI STL风格双向循环链表
2.4.1 泛型的ListNode结构
2.4.2 List中的头节点

...

笔者在本书的姊妹篇《TypeScript图形渲染实战：2D架构设计与实现》一书中使用了微软的TypeScript语言，以面向接口及泛型的编程方式，采用HTML 5中的Canvas2D绘图API，实现了一个2D动画精灵系统，并在该精灵系统上演示了精心设计的与图形数学变换相关的Demo。本书中，笔者将继续带领读者学习TypeScript图形渲染的相关知识。本书主要解决的是基于WebGL的3D图形架构与实现。    3D图形编程是一个庞大的主题，从宏观角度，笔者将整个3D图形编程分为三个层次，即画出来、画得美和画得快。本书定位于画出来，目的是让读者使用TypeScript语言及WebGL 3D API编写一个WebGLApplication应用程序框架及WebGLUtilLib封装库，来渲染id Software公司的3及Doom3这两个引擎的场景和骨骼动画格式。通过本书，可以让各位读者了解3D图形渲染底层原始的运行流程。读者能学到什么    本书优选的特点是专注于使用TypeScript语言和WebGL API（应用程序接口），来渲染id Software公司经典的3和Doom3引擎的场景和骨骼蒙皮动画文件格式。全书通过8个完整的Demo来探索和演示3D图形渲染的基础知识。    通过阅读本书，读者能掌握以下知识：* 构建TypeScript的开发、编译及调试环境；* 使用TypeScript封装或实现常用的容器对象；* 实现一个支持刷新、重绘、事件分发与响应、定时回调及异步/同步资源加载的WebGLApplication框架体系；* 使用WebGL 1.x版中内置的各个常用对象；* 将WebGL 1.x中的一些常用操作封装成可重复使用的类库（WebGLUtilLib）；* 使用开源的TSM（TypeScript Vector And Matrix Math Library）数学库；* 用单视口和多视口自由切换来渲染基本的几何体、坐标系，并在WebGL环境中正确地使用Canvas2D进行文本绘制；* 进行远程加载、解析和渲染3 BSP二进制场景文件；* 进行远程加载、解析Doom3 PROC场景文件，并实现基于视锥体与AABB级别的可见测试场景渲染功能；* 深入理解骨骼蒙皮动画的数学原理，并成功地解析和渲染Doom3中的MD5骨骼动画格式。本书有何特色* 深入：凝聚作者15年3D图形编程经验，带领读者探索3D图形编程的知识；* 系统：使用TypeScript构建Application应用程序框架及WebGL渲染框架；* 广泛：涉及数据结构、WebGL渲染API用法、3D数学、二进制文件读取、骨骼动画及场景渲染等内容；* 独特：使用TypeScript和WebGL渲染API来演示3、Doom3引擎的场景和骨骼动画渲染；* 实用：详细讲解8个完整的3D图形Demo，帮读者理解3D图形渲染本质的运行流程。本书内容    篇 数据结构基础（、2章）    章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~0章）    第8章解析与渲染3 BSP场景，首先在3BspParser类的实现中介绍了如何使用DataView对象进行3 BSP二进制文件解析，然后实现3BspScene类。3BspScene类可以将需要渲染的数据编译成GLStaticMesh对象支持的格式，从而正确地显示3 BSP场景。    第9章解析和渲染Doom3 PROC场景，主要介绍了如何解析和渲染Doom3 PROC场景文件。首先实现了用Doom3SceneParser类进行场景文件的解析；然后实现了用Doom3ProcScene类进行场景文件的渲染；对场景的渲染增加视截体的可见测试，从而提升WebGL的绘制效率。    0章解析和渲染Doom3 MD5骨骼蒙皮动画，主要介绍了如何解析和渲染Doom3擎的MD5骨骼蒙皮动画。首先通过问答的方式介绍了骨骼动画中4个与坐标系相关的问题；然后解析并绘制.md5mes件；介绍.md5anim动画文件格式，并实现动画序列的显示播放。本书配套资源获取方式    本书涉及的源代码文件和Demo需要读者自行下载。请登录华章公司www.hzbook.com，在该上搜索到本书，然后单击“资料下载”按钮，即可在页面上找到“配书资源”下载链接。    运行书中的源代码需要进行以下操作：    （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图形框架开发基础的读者，建议从章顺次阅读并演练每一个实例；* 有一定3D图形开发基础的读者，可以根据实际情况有重点地选择阅读各个模块和项目案例；* 对于每一个模块和项目案例，先思考一下实现思路，然后再阅读，学习效果更好；* 可以先对书中的模块和Demo阅读一遍，然后结合本书提供的源码再进行理解，并亲自运行和调试，这样理解起来就更加容易，也会更加深刻。本书作者    本书由步磊峰编写。感谢在本书编写和出版过程中给予了笔者大量帮的各位编辑！    由于作者水平所限，加之写作时间较为仓促，书中可能还存在一些疏漏和不足之处，敬请各位读者批评指正。联系邮箱：hzbook2017@163.com。    编著者