TypeScript图形渲染实战：基于WebGL的3D架构与实现

资深图形编程专家15年开发经验的深度分享

详解TypeScript编程及基于WebGL的3D架构与实现

深入：凝聚作者15年图形编程经验，带领读者深入探索图形编程的知识

系统：用TypeScript语言实现WebGLApplication框架和WebGLUtilLib渲染库

广泛：涵盖常用的数据结构、3D图形数学基础、多视口渲染、文字绘制、Quake3 BSP场景渲染、Doom3 PROC场景渲染、骨骼蒙皮动画原理及渲染等内容

独特：精讲8个完整的有较高价值的绘图案例，帮助读者理解3D图形编程的基础核心要点

实用：不局限于TypeScript和WebGL范畴，可以使用其他各种编程语言应用到3D图形编程的各个领域

7位重量级大咖力荐：

中国工业设计研究院西南中心院长 覃霁

上海灵禅网络科技股份有限公司CEO 兰海文

上海凯英网络科技有限公司副总裁 何鑫

成都手领科技有限公司创始人兼CTO、迷雾侦探/AI-LIMIT游戏技术负责人 张锐

《全局光照技术》作者 秦春林

《Go语言从入门到进阶实战》作者、慕课网讲师、资深全栈游戏开发者 徐波

跨平台开源UI引擎FairyGUI作者 萧应棠

《TypeScript图形渲染实战：基于WebGL的3D架构与实现》核心内容：

SystemJS与webpack

TypeScript封装和实现常用容器

WebGLApplication框架

WebGL基础

WebGLUtilLib渲染框架

3D图形中的数学基础

多视口渲染基本几何体、坐标系及文字

解析与渲染Quake3 BSP场景

解析与渲染Doom3 PROC场景

解析与渲染Doom3 MD5骨骼蒙皮动画

超值赠送：

本书源代码文件（需要下载）

本书Demo（需要下载）

为了让广大3D图形爱好者能够快速地学习WebGL图形编程，《TypeScript图形渲染实战：基于WebGL的3D架构与实现》按照循序渐进的方式，由浅入深地讲解了WebGL图形编程的相关知识点。《TypeScript图形渲染实战：基于WebGL的3D架构与实现》理论结合实践，可以让3D图形爱好者少走弯路，直击3D图形开发中的核心要点。

《TypeScript图形渲染实战：基于WebGL的3D架构与实现》共10章，分为3篇。第1、2章为数据结构基础篇，主要介绍如何构建TypeScript开发调试环境，并以范型编程方式实现和封装了动态类型数组、关联数组、双向链表、队列、栈和树等数据结构。第3~7章为WebGL图形编程基础篇，围绕着如何建立一个WebGLApplication框架应用体系和WebGLUtilLib渲染体系而展开，并且详细介绍了3D图形编程中的一些常用数学基础知识。第8~10章为开发实战篇，在使用WebGLApplication框架和WebGLUtilLib框架的基础上实现了对Id Software公司开源的Quake3 BSP及Doom3 PROC场景的解析和渲染，并且介绍了Doom3 MD5骨骼蒙皮动画原理、解析与渲染的相关知识点。

《TypeScript图形渲染实战：基于WebGL的3D架构与实现》特别适合对3D图形开发、WebGL图形编程、游戏开发等感兴趣的技术人员阅读，还适合JavaScript程序员及想从C、C++、Java、C#等强类型语言转HTML 5开发的程序员阅读。另外，编程爱好者、高校学生及培训机构的学员也可以将《TypeScript图形渲染实战：基于WebGL的3D架构与实现》作为兴趣读物。

步磊峰 计算机图形编程资深爱好者。有超过15年的程序开发经验。擅长C/C++、C#、Java、Objective-C、JavaScript和TypeScript等编程语言。在作者的程序人生中，曾经编写过3D程序、跨平台UI引擎、Java页游服务器和微信服务器，并为国内的多个大型国营金融机构开发过多款移动端App。个人大的成就是通过内部培训，为公司培养了20多个C语言、C++及移动端的开发人才。

《TypeScript图形渲染实战：基于WebGL的3D架构与实现》从图形基础算法原理出发，用非常浅显易懂的语言讲解相关知识点，然后深入浅出地分析经典案例，一步步带带领读者领略3D图形算法及架构的精彩世界。

——中国工业设计研究院西南中心院长 覃霁

作者通过通俗易懂的讲解，将他十几年图形编程经验的精华浓缩至《TypeScript图形渲染实战：基于WebGL的3D架构与实现》中。书中对TypeScript编程语言、3D图形及其数学基础都有较为全面的剖析，能够让广大读者较为系统地掌握HTML 5 WebGL图形开发的核心技术。

——上海灵禅网络科技股份有限公司CEO 兰海文

《TypeScript图形渲染实战：基于WebGL的3D架构与实现》涉猎广泛，内容深刻，讲解深入浅出，囊括了TypeScript基本语法、图形渲染机制、图形学、数据结构、设计模式等内容，是一本不可多得的HTML 5图形开发书籍。

——上海凯英网络科技有限公司副总裁 何鑫

《TypeScript图形渲染实战：基于WebGL的3D架构与实现》带给读者多个WebGL绘图API开发案例。对于热衷于图形学或游戏开发的相关读者而言，《TypeScript图形渲染实战：基于WebGL的3D架构与实现》不仅是一本通俗易懂的TypeScript入门书，更是一本优秀的3D图形学工具书。

——成都手领科技有限公司创始人兼CTO、迷雾侦探/AI-LIMIT游戏技术负责人 张锐

一本优秀的计算机图书，能够让读者从其文字中感受到作者的态度。相信读者也能够从《TypeScript图形渲染实战：基于WebGL的3D架构与实现》中体会到作者多年来所坚持的技术钻研精神。

——《全局光照技术》作者 秦春林

传统图形编程都是基于DirectX/OpenGL。而Web时代，HTML 5+Canvas2D/WebGL+TypeScript的组合才是佳的图形编程方案。作者基于多年的实战经验编写了《TypeScript图形渲染实战：基于WebGL的3D架构与实现》，让读者能够较为轻松地理解图形编程的奥秘和编写技巧。阅读完《TypeScript图形渲染实战：基于WebGL的3D架构与实现》后，不但能让萌新程序员一览大佬庖丁解牛的风姿，从而获得巨大的提升，而且也能让老的图形程序员巩固提升，收获满满。

——《Go语言从入门到进阶实战》作者、慕课网讲师、资深全栈游戏开发者 徐波

《TypeScript图形渲染实战：基于WebGL的3D架构与实现》介绍的TypeScript与WebGL相关技术可以构建你梦想中的3D WebApplication。全书通过8个完整的图形编程案例，可以让你了解并掌握3D图形编程的数学基础与核心技术。

—— 跨平台开源UI引擎FairyGUI作者 萧应棠

笔者在《TypeScript图形渲染实战：基于WebGL的3D架构与实现》的姊妹篇《TypeScript图形渲染实战：2D架构设计与实现》一书中使用了微软最新的TypeScript语言，以面向接口及泛型的编程方式，采用HTML 5中的Canvas2D绘图API，实现了一个2D动画精灵系统，并在该精灵系统上演示了精心设计的与图形数学变换相关的Demo。《TypeScript图形渲染实战：基于WebGL的3D架构与实现》中，笔者将继续带领读者学习TypeScript图形渲染的相关知识。《TypeScript图形渲染实战：基于WebGL的3D架构与实现》主要解决的是基于WebGL的3D图形架构与实现。

3D图形编程是一个庞大的主题，从宏观角度，笔者将整个3D图形编程分为三个层次，即画出来、画得美和画得快。《TypeScript图形渲染实战：基于WebGL的3D架构与实现》定位于画出来，目的是让读者使用TypeScript语言及WebGL 3D API编写一个WebGLApplication应用程序框架及WebGLUtilLib封装库，来渲染id Software公司的Quake3及Doom3这两个引擎的场景和骨骼动画格式。通过《TypeScript图形渲染实战：基于WebGL的3D架构与实现》，可以让各位读者了解3D图形渲染底层最原始的运行流程。

读者能学到什么

《TypeScript图形渲染实战：基于WebGL的3D架构与实现》最大的特点是专注于使用TypeScript语言和WebGL API（应用程序接口），来渲染id Software公司最经典的Quake3和Doom3引擎的场景和骨骼蒙皮动画文件格式。全书通过8个完整的Demo来探索和演示3D图形渲染的基础知识。

通过阅读《TypeScript图形渲染实战：基于WebGL的3D架构与实现》，读者能掌握以下知识：

 构建TypeScript的开发、编译及调试环境；

 使用TypeScript封装或实现常用的容器对象；

 实现一个支持刷新、重绘、事件分发与响应、定时回调及异步/同步资源加载的WebGLApplication框架体系；

 使用WebGL 1.x版中内置的各个常用对象；

 将WebGL 1.x中的一些常用操作封装成可重复使用的类库（WebGLUtilLib）；

 使用开源的TSM（TypeScript Vector And Matrix Math Library）数学库；

 用单视口和多视口自由切换来渲染基本的几何体、坐标系，并在WebGL环境中正确地使用Canvas2D进行文本绘制；

 进行远程加载、解析和渲染Quake3 BSP二进制场景文件；

 进行远程加载、解析Doom3 PROC场景文件，并实现基于视锥体与AABB级别的可见性测试场景渲染功能；

 深入理解骨骼蒙皮动画的数学原理，并成功地解析和渲染Doom3中的MD5骨骼动画格式。

《TypeScript图形渲染实战：基于WebGL的3D架构与实现》有何特色

 深入：凝聚作者15年3D图形编程经验，带领读者探索3D图形编程的知识；

 系统：使用TypeScript构建Application应用程序框架及WebGL渲染框架；

 广泛：涉及数据结构、WebGL渲染API用法、3D数学、二进制文件读取、骨骼动画及场景渲染等内容；

 独特：使用TypeScript和WebGL渲染API来演示Quake3、Doom3引擎的场景和骨骼动画渲染；

 实用：详细讲解8个完整的3D图形Demo，帮助读者理解3D图形渲染最本质的运行流程。

《TypeScript图形渲染实战：基于WebGL的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动画文件格式，并实现动画序列的显示播放。

《TypeScript图形渲染实战：基于WebGL的3D架构与实现》配套资源获取方式

《TypeScript图形渲染实战：基于WebGL的3D架构与实现》涉及的源代码文件和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。

《TypeScript图形渲染实战：基于WebGL的3D架构与实现》读者对象

 对3D图形编程、WebGL图形开发、游戏开发感兴趣的技术人员；

 想转行做图形开发和WebGL开发的技术人员；

 需要全面学习3D图形开发的技术人员；

 想从其他强类型语言（C、C++、Java、C#、Objective-C等）转HTML 5开发的技术人员；

 JavaScript程序员；

 想了解TypeScript的程序员；

 想提高编程水平的人员；

 在校大学生及喜欢计算机编程的自学者；

 专业培训机构的学员。

《TypeScript图形渲染实战：基于WebGL的3D架构与实现》阅读建议

 没有3D图形框架开发基础的读者，建议从第1章顺次阅读并演练每一个实例；

 有一定3D图形开发基础的读者，可以根据实际情况有重点地选择阅读各个模块和项目案例；

 对于每一个模块和项目案例，先思考一下实现思路，然后再阅读，学习效果更好；

 可以先对书中的模块和Demo阅读一遍，然后结合《TypeScript图形渲染实战：基于WebGL的3D架构与实现》提供的源码再进行理解，并亲自运行和调试，这样理解起来就更加容易，也会更加深刻。

《TypeScript图形渲染实战：基于WebGL的3D架构与实现》作者

《TypeScript图形渲染实战：基于WebGL的3D架构与实现》由步磊峰编写。感谢在《TypeScript图形渲染实战：基于WebGL的3D架构与实现》编写和出版过程中给予了笔者大量帮助的各位编辑！

由于作者水平所限，加之写作时间较为仓促，书中可能还存在一些疏漏和不足之处，敬请各位读者批评指正。

……