TypeScript圖形渲染實戰(zhàn)：基于WebGL的3D架構(gòu)與實現(xiàn)

第1篇  數(shù)據(jù)結(jié)構(gòu)基礎(chǔ) 第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  調(diào)用build命令 12 1.3.4  配置tsconfig.json文件 12 1.3.5  調(diào)用build和dev命令 13 1.3.6  使用watch命令 14 1.3.7  聯(lián)合使用watch和dev命令 15 1.3.8  使用Webpack壓縮打包源碼 16 1.4  SysemJS VS. Webpack 16 1.5  編譯（Compile）VS.轉(zhuǎn)義（Transpile） 18 1.6  斷點調(diào)試 19 1.6.1  安裝及配置Debugger for Chrome擴展 19 1.6.2  斷點調(diào)試TypeScript程序 20 1.6.3  VS Code Debug快捷鍵 21 1.7  本章總結(jié) 21 第2章  TypeScript封裝和實現(xiàn)常用容器 22 2.1  ArrayBuffer、DataView及類型數(shù)組實現(xiàn)原理 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中的類型數(shù)組對象 30 2.2  封裝動態(tài)類型數(shù)組 31 2.2.1  TypedArrayList的成員變量及構(gòu)造函數(shù) 31 2.2.2  TypedArrayList的push方法 32 2.2.3  TypedArrayList的slice方法和subarray方法 33 2.2.4  TypedArrayList的其他方法和屬性 35 2.2.5  capacityChangedCallback回調(diào)函數(shù) 36 2.3  封裝關(guān)聯(lián)數(shù)組 36 2.3.1  JS/TS中的關(guān)聯(lián)數(shù)組 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  實現(xiàn)SGI STL風格雙向循環(huán)鏈表 44 2.4.1  泛型的ListNode結(jié)構(gòu) 45 2.4.2  List中的頭節(jié)點 45 2.4.3  雙向循環(huán)概念 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  實現(xiàn)AdapterBase抽象基類 52 2.5.3  實現(xiàn)Queue子類和Stack子類 53 2.6  實現(xiàn)通用樹結(jié)構(gòu) 54 2.6.1  樹結(jié)構(gòu)的內(nèi)存表示 54 2.6.2  樹節(jié)點添加時的要點 55 2.6.3  樹節(jié)點isDescendantOf和remove方法的實現(xiàn) 56 2.6.4  實現(xiàn)addChild等方法 58 2.6.5  查詢樹結(jié)構(gòu)的層次關(guān)系 59 2.6.6  廣度/深度優(yōu)先遍歷算法 60 2.6.7  隊列及棧在廣度/深度優(yōu)先遍歷中的應(yīng)用 62 2.6.8  廣度/深度線性遍歷枚舉器 63 2.6.9  樹結(jié)構(gòu)枚舉器的實現(xiàn) 63 2.6.10  測試樹結(jié)構(gòu)迭代器 67 2.6.11  深度優(yōu)先的遞歸遍歷 71 2.7  本章總結(jié) 73 第2篇  WebGL圖形編程基礎(chǔ) 第3章  WebGLApplication框架 76 3.1  Application體系結(jié)構(gòu)概述 77 3.2  個WebGL Demo 78 3.2.1  技術(shù)要點描述 78 3.2.2  Demo的成員變量與構(gòu)造函數(shù) 80 3.2.3  資源同步加載 82 3.2.4  立方體、坐標系、三角形及文字渲染 83 3.2.5  更新操作 85 3.2.6  鍵盤輸入事件處理 86 3.2.7  總結(jié)Application框架的使用流程 87 3.3  Application框架實現(xiàn) 87 3.3.1  成員變量與構(gòu)造函數(shù) 88 3.3.2  啟動/查詢/停止Application 89 3.3.3  不間斷地更新操作 90 3.3.4  CanvasInputEvent及其子類 92 3.3.5  DOM中的getBoundingRect方法 93 3.3.6  實現(xiàn)viewportToCanvasCoordinate方法 94 3.3.7  將DOM Event事件轉(zhuǎn)換為CanvasInputEvent事件 95 3.3.8  實現(xiàn)EventListenerObject接口進行事件分發(fā) 96 3.3.9  讓事件起作用 97 3.3.10  定時器Timer系統(tǒng) 97 3.3.11  增刪定時器對象 98 3.3.12  觸發(fā)多個定時任務(wù)的操作 100 3.3.13  WebGLApplication子類 101 3.3.14  CameraApplication子類 102 3.4  HTML頁面系統(tǒng) 103 3.4.1  HTML頁面系統(tǒng)簡介 103 3.4.2  HTML頁面源碼 104 3.4.3  入口文件main.ts 105 3.5  異步資源加載及同步操作 107 3.5.1  使用Promise封裝HTTP異步請求 107 3.5.2  實現(xiàn)AsyncLoadTestApplication類 109 3.5.3  異步run函數(shù)的覆寫（override）與測試 110 3.5.4  Promise.all異步并發(fā)加載及同步操作 111 3.5.5  本書后續(xù)的資源加載及同步策略 114 3.6  本章總結(jié) 114 第4章  WebGL基礎(chǔ) 116 4.1  WebGL中的類 116 4.2  準備工作 117 4.2.1  創(chuàng)建WebGLRenderingContext對象 117 4.2.2  WebGLContextAttributes對象與幀緩沖區(qū) 118 4.2.3  渲染狀態(tài) 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  渲染數(shù)據(jù)存儲思考 140 4.3.10  Interleaved數(shù)組的存儲、尋址及繪制 141 4.3.11  drawArrays繪制基本幾何圖元 144 4.3.12  詳解基本幾何圖元 146 4.3.13  drawElements繪制方法 149 4.4  本章總結(jié) 152 第5章  WebGLUtilLib渲染框架 153 5.1  WebGLUtilLib框架類結(jié)構(gòu)體系 153 5.2  GLAttribState類的實現(xiàn) 155 5.2.1  預(yù)定義頂點屬性常量值 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相關(guān)類的實現(xiàn) 166 5.3.1  常用的VS和FS uniform變量 166 5.3.2  GLProgram的成員變量和構(gòu)造函數(shù) 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相關(guān)類的實現(xiàn) 174 5.4.1  VAO對象與GLMeshBase類 174 5.4.2  GLStaticMesh類實現(xiàn)細節(jié) 175 5.4.3  GLMeshBuilder類成員變量 178 5.4.4  GLMeshBuilder類構(gòu)造方法 179 5.4.5  GLMeshBuilder類的color、texcoord、normal和vertex方法 181 5.4.6  GLMeshBuilder類的begin和end方法 184 5.5  GLTexture類的實現(xiàn) 187 5.5.1  GLTexture的成員變量和構(gòu)造函數(shù) 187 5.5.2  GLTexture類的upload方法 188 5.5.3  mipmap相關(guān)的靜態(tài)方法 189 5.5.4  GLTexture的bind / unbind、wrap和filter方法 190 5.5.5  GLTexture的createDefaultTexture靜態(tài)方法 191 5.6  本章總結(jié) 192 第6章  3D圖形中的數(shù)學(xué)基礎(chǔ) 193 6.1  坐標系 193 6.1.1  OpenGL / WebGL中的坐標系 193 6.1.2  左手坐標系與右手坐標系 194 6.2  TSM數(shù)學(xué)庫 196 6.3  向量 197 6.3.1  向量的概念 197 6.3.2  向量的大?。ɑ蜷L度） 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  矩陣的轉(zhuǎn)置 207 6.4.5  矩陣的行列式與求逆 207 6.5  仿射變換 208 6.5.1  平移矩陣 209 6.5.2  縮放矩陣 209 6.5.3  繞任意軸旋轉(zhuǎn)矩陣 210 6.6  視圖矩陣與投影矩陣 211 6.6.1  視圖（攝像機）矩陣 212 6.6.2  投影矩陣 213 6.7  四元數(shù) 214 6.8  平面 215 6.8.1  構(gòu)造平面 216 6.8.2  平面的單位化 217 6.8.3  點與平面的距離與關(guān)系 217 6.9  矩陣堆棧 218 6.9.1  構(gòu)造函數(shù)與worldMatrix屬性 219 6.9.2  矩陣的入棧、出棧及l(fā)oad方法 219 6.9.3  仿射變換操作 220 6.10  攝像機 220 6.10.1  成員變量和構(gòu)造函數(shù) 221 6.10.2  攝像機的移動和旋轉(zhuǎn) 222 6.10.3  攝像機的更新 224 6.10.4  攝像機的相關(guān)屬性 225 6.11  WebGLCoordSystem類 227 6.12  本章總結(jié) 228 第7章  多視口渲染基本幾何體、坐標系及文字 230 7.1  使用GLMeshBuilder多視口渲染基本幾何體 230 7.1.1  Demo的需求描述 230 7.1.2  Demo的成員變量和構(gòu)造函數(shù) 231 7.1.3  drawByMatrixWithColorShader方法繪制流程 233 7.1.4  使用INTERLEAVED頂點存儲格式繪制三角形 234 7.1.5  使用SEQUENCED頂點存儲格式繪制四邊形 235 7.1.6  使用SEPARATED頂點存儲格式繪制立方體 236 7.1.7  創(chuàng)建多視口的方法 239 7.1.8  WebGL中的紋理坐標系 240 7.1.9  drawByMultiViewportsWithTextureShader方法繪制流程 240 7.1.10  繪制紋理立方體 242 7.1.11  實現(xiàn)Atlas紋理貼圖效果 243 7.1.12  收尾工作 245 7.2  坐標系、文字渲染及空間變換Demo 246 7.2.1  Demo的需求描述 246 7.2.2  Demo的成員變量和構(gòu)造函數(shù) 247 7.2.3  生成單視口或多視口坐標系數(shù)組 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圖形中的數(shù)學(xué)變換流水線 258 7.3  本章總結(jié) 259 第3篇  開發(fā)實戰(zhàn) 第8章  解析與渲染Quake3 BSP場景 262 8.1  Q3BspApplication入口類 262 8.2  解析Quake3 BSP二進制文件 264 8.2.1  Quake3BspParser類的常量定義 264 8.2.2  Q3BSPLump結(jié)構(gòu)定義 265 8.2.3  解析BSP文件頭 266 8.2.4  解析實體字符串數(shù)據(jù) 267 8.2.5  解析材質(zhì)數(shù)據(jù) 269 8.2.6  解析頂點數(shù)據(jù) 270 8.2.7  解析頂點索引數(shù)據(jù) 273 8.2.8  解析渲染表面數(shù)據(jù) 273 8.2.9  Quake3與WebGL坐標系轉(zhuǎn)換 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  本章總結(jié) 283 第9章  解析和渲染Doom3 PROC場景 285 9.1  Doom3Application入口類 285 9.2  解析Doom3 PROC場景 286 9.2.1  Doom3詞法解析規(guī)則 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  構(gòu)建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類的成員變量和構(gòu)造函數(shù) 309 9.5.3  buildFromCamera方法的實現(xiàn) 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  本章總結(jié) 316 第10章  解析和渲染Doom3 MD5骨骼蒙皮動畫 318 10.1  骨骼蒙皮動畫原理 318 10.1.1  骨骼蒙皮動畫效果演示 319 10.1.2  骨骼蒙皮動畫中的各種坐標系 320 10.1.3  骨骼蒙皮動畫數(shù)學(xué)關(guān)鍵點的問答 321 10.2  解析和渲染.md5mesh文件格式 322 10.2.1  .md5mesh文件解析流程 323 10.2.2  .md5mesh中的綁定姿態(tài) 324 10.2.3  解析綁定姿態(tài) 325 10.2.4  .md5mesh中的蒙皮數(shù)據(jù) 326 10.2.5  解析蒙皮數(shù)據(jù) 329 10.2.6  計算頂點終位置 330 10.2.7  加載和生成紋理 331 10.2.8  繪制綁定姿態(tài)（BindPose） 332 10.3  解析和渲染.md5anim文件格式 333 10.3.1  .md5anim的解析流程 333 10.3.2  解析.md5anim中的關(guān)節(jié)層次信息 334 10.3.3  解析.md5anim中的包圍盒數(shù)據(jù) 336 10.3.4  解析.md5anim中的baseframe數(shù)據(jù) 337 10.3.5  解析.md5anim中的frame數(shù)據(jù) 338 10.3.6  幀動作姿態(tài)結(jié)構(gòu) 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  實現(xiàn)MD5SkinedMeshApplication Demo 344 10.5  本章總結(jié) 346