书名：TypeScript图形渲染实战：基于WebGL的3D架构与实现pdf/doc/txt格式电子书下载

推荐语：凝聚作者15年图形编程经验！7位大咖力荐！详解TypeScript及基于WebGL的3D架构与实现；精讲8个图形编程案例,涵盖3D图形数学基础

作者：步磊峰著

出版社：机械工业出版社

出版时间：2020-01-01

书籍编号：30562004

ISBN：9787111642664

正文语种：中文

字数：517182

版次：1

所属分类：计算机-程序设计

版权信息

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

作者：步磊峰

出版社：机械工业出版社

出版日期：2020-01-01

ISBN：9787111642664

版权所有 · 侵权必究

前言

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

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

读者能学到什么

本书最大的特点是专注于使用TypeScript语言和WebGL API（应用程序接口），来渲染id Software公司最经典的Quake3和Doom3引擎的场景和骨骼蒙皮动画文件格式。全书通过8个完整的Demo来探索和演示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骨骼动画格式。

本书有何特色

·深入：凝聚作者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。

编著者

第1篇　数据结构基础

·第1章　SystemJS与Webpack

·第2章　TypeScript封装和实现常用容器

第1章　SystemJS与Webpack

在本书的姊妹篇《TypeScript图形渲染实战：2D架构设计与实现》一书中，第1章以循序渐进的方式讲解了如何使用SystemJS构建一个能直接启动HTML的页面、能自动进行TypeScript编译（转译）、能解决跨域问题、能支持热更新、能进行严格类型检测、能使用断点调试源码的TypeScript运行环境。

为了完整性，在本书的第1章中会快速地了解一下SystemJS的安装和使用流程，然后使用Webpack来构建TypeScript开发、编译、调试及打包环境，最终我们也会得到一个与SystemJS具有类似功能并且支持打包压缩源码的TypeScript运行环境。

接下来会总结SystemJS和Webpack之间的区别，大家可以自行决定使用哪种技术。最后还会带领大家了解一下编译（Compile）与转译（Transpile）之间的区别与联系。本章内容的思维导图如图1.1所示。

图1.1　本章内容思维导图

1.1　准备工作

在使用SystemJS或Webpack进行TypeScript开发前，必须要预先安装Node.js运行环境和Visual Studio Code代码编辑器。

1.1.1　安装Node.js

Node.js官方（https://nodejs.org/）说明如图1.2所示。

图1.2　Node.js官方说明

在安装Node.js时，一般会提供两个版本：LTS版和Current版。其中，LTS是Long Term Support（官方长期支持版）的缩写，在生产环境中，请使用LTS版。

本书以MS Windows(x64)系统为演示环境，Mac OS、Linux系统的安装和使用与Windows相似。如图1.2所示，单击10.15.3 LTS按钮开始下载Node.js安装包，在本书编写时，最新的稳定版是10.15.3LTS。

下载完Windows系统安装包后，双击进入如图1.3所示的安装界面，一直单击Next按钮，直到安装完成。

打开Windows中的CMD程序，输入相应命令：node-v及npm-v。若成功安装，则会显示如图1.4所示的内容。

至此，已经成功安装了Node.js运行环境。接下来安装Visual Studio Code代码编辑器。

图1.3　Node.js安装界面

图1.4　测试Node.js和NPM安装是否成功

1.1.2　安装Viusal Studio Code

Visual Studio Code是一个运行在桌面系统上的，并且可用于Windows、Mac OS X和Linux平台的轻量级且功能强大的源代码编辑器。它直接内置了对JavaScript、TypeScript和Node.js的支持，并具有其他语言（C/C++、C＃、Python和PHP

....