TypeScript圖形渲染實戰:基于WebGL的3D架構與實現 版權信息
- ISBN:9787111642664
- 條形碼:9787111642664 ; 978-7-111-64266-4
- 裝幀:平裝-膠訂
- 冊數:暫無
- 重量:暫無
- 所屬分類:>>
TypeScript圖形渲染實戰:基于WebGL的3D架構與實現 本書特色
為了讓廣大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架構與實現》作為興趣讀物。
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架構與實現 目錄
第1篇 數據結構基礎
第1章 SystemJS與Webpack 2
1.1 準備工作 3
1.1.1 安裝Node.js 3
1.1.2 安裝Viusal Studio Code 4
1.2 安裝和配置SystemJS 5
1.2.1 安裝SystemJS 5
1.2.2 使用SystemJS 7
1.2.3 **個TypeScript程序 8
1.3 安裝和配置Webpack 9
1.3.1 安裝Webpack 9
1.3.2 配置Webpack 11
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. 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圖形渲染實戰:基于WebGL的3D架構與實現 相關資料
《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架構與實現 作者簡介
步磊峰 計算機圖形編程資深愛好者。有超過15年的程序開發經驗。擅長C/C 、C#、Java、Objective-C、JavaScript和TypeScript等編程語言。在作者的程序人生中,曾經編寫過3D程序、跨平臺UI引擎、Java頁游服務器和微信服務器,并為國內的多個大型國營金融機構開發過多款移動端App。個人最大的成就是通過內部培訓,為公司培養了20多個C語言、C 及移動端的開發人才。