|
關(guān)于我們
 書(shū)單推薦 新書(shū)推薦 |
TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn) 
定 價(jià)：109 元
9 7 6 8 4 7 2 1 6 1 6 1 4  為了讓廣大3D圖形愛(ài)好者能夠快速地學(xué)習(xí)WebGL圖形編程，《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》按照循序漸進(jìn)的方式，由淺入深地講解了WebGL圖形編程的相關(guān)知識(shí)點(diǎn)。《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》理論結(jié)合實(shí)踐，可以讓3D圖形愛(ài)好者少走彎路，直擊3D圖形開(kāi)發(fā)中的核心要點(diǎn)。 《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》共10章，分為3篇。第1、2章為數(shù)據(jù)結(jié)構(gòu)基礎(chǔ)篇，主要介紹如何構(gòu)建TypeScript開(kāi)發(fā)調(diào)試環(huán)境，并以范型編程方式實(shí)現(xiàn)和封裝了動(dòng)態(tài)類(lèi)型數(shù)組、關(guān)聯(lián)數(shù)組、雙向鏈表、隊(duì)列、棧和樹(shù)等數(shù)據(jù)結(jié)構(gòu)。第3~7章為WebGL圖形編程基礎(chǔ)篇，圍繞著如何建立一個(gè)WebGLApplication框架應(yīng)用體系和WebGLUtilLib渲染體系而展開(kāi)，并且詳細(xì)介紹了3D圖形編程中的一些常用數(shù)學(xué)基礎(chǔ)知識(shí)。第8~10章為開(kāi)發(fā)實(shí)戰(zhàn)篇，在使用WebGLApplication框架和WebGLUtilLib框架的基礎(chǔ)上實(shí)現(xiàn)了對(duì)Id Software公司開(kāi)源的Quake3 BSP及Doom3 PROC場(chǎng)景的解析和渲染，并且介紹了Doom3 MD5骨骼蒙皮動(dòng)畫(huà)原理、解析與渲染的相關(guān)知識(shí)點(diǎn)。 《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》特別適合對(duì)3D圖形開(kāi)發(fā)、WebGL圖形編程、游戲開(kāi)發(fā)等感興趣的技術(shù)人員閱讀，還適合JavaScript程序員及想從C、C 、Java、C#等強(qiáng)類(lèi)型語(yǔ)言轉(zhuǎn)HTML 5開(kāi)發(fā)的程序員閱讀。另外，編程愛(ài)好者、高校學(xué)生及培訓(xùn)機(jī)構(gòu)的學(xué)員也可以將《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》作為興趣讀物。 筆者在《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》的姊妹篇《TypeScript圖形渲染實(shí)戰(zhàn)：2D架構(gòu)設(shè)計(jì)與實(shí)現(xiàn)》一書(shū)中使用了微軟最新的TypeScript語(yǔ)言，以面向接口及泛型的編程方式，采用HTML 5中的Canvas2D繪圖API，實(shí)現(xiàn)了一個(gè)2D動(dòng)畫(huà)精靈系統(tǒng)，并在該精靈系統(tǒng)上演示了精心設(shè)計(jì)的與圖形數(shù)學(xué)變換相關(guān)的Demo�！禩ypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》中，筆者將繼續(xù)帶領(lǐng)讀者學(xué)習(xí)TypeScript圖形渲染的相關(guān)知識(shí)。《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》主要解決的是基于WebGL的3D圖形架構(gòu)與實(shí)現(xiàn)。 3D圖形編程是一個(gè)龐大的主題，從宏觀角度，筆者將整個(gè)3D圖形編程分為三個(gè)層次，即畫(huà)出來(lái)、畫(huà)得美和畫(huà)得快�！禩ypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》定位于畫(huà)出來(lái)，目的是讓讀者使用TypeScript語(yǔ)言及WebGL 3D API編寫(xiě)一個(gè)WebGLApplication應(yīng)用程序框架及WebGLUtilLib封裝庫(kù)，來(lái)渲染id Software公司的Quake3及Doom3這兩個(gè)引擎的場(chǎng)景和骨骼動(dòng)畫(huà)格式。通過(guò)《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》，可以讓各位讀者了解3D圖形渲染底層最原始的運(yùn)行流程。 讀者能學(xué)到什么 《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》最大的特點(diǎn)是專(zhuān)注于使用TypeScript語(yǔ)言和WebGL API（應(yīng)用程序接口），來(lái)渲染id Software公司最經(jīng)典的Quake3和Doom3引擎的場(chǎng)景和骨骼蒙皮動(dòng)畫(huà)文件格式。全書(shū)通過(guò)8個(gè)完整的Demo來(lái)探索和演示3D圖形渲染的基礎(chǔ)知識(shí)。 通過(guò)閱讀《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》，讀者能掌握以下知識(shí)： ? 構(gòu)建TypeScript的開(kāi)發(fā)、編譯及調(diào)試環(huán)境； ? 使用TypeScript封裝或?qū)崿F(xiàn)常用的容器對(duì)象； ? 實(shí)現(xiàn)一個(gè)支持刷新、重繪、事件分發(fā)與響應(yīng)、定時(shí)回調(diào)及異步/同步資源加載的WebGLApplication框架體系； ? 使用WebGL 1.x版中內(nèi)置的各個(gè)常用對(duì)象； ? 將WebGL 1.x中的一些常用操作封裝成可重復(fù)使用的類(lèi)庫(kù)（WebGLUtilLib）； ? 使用開(kāi)源的TSM（TypeScript Vector And Matrix Math Library）數(shù)學(xué)庫(kù)； ? 用單視口和多視口自由切換來(lái)渲染基本的幾何體、坐標(biāo)系，并在WebGL環(huán)境中正確地使用Canvas2D進(jìn)行文本繪制； ? 進(jìn)行遠(yuǎn)程加載、解析和渲染Quake3 BSP二進(jìn)制場(chǎng)景文件； ? 進(jìn)行遠(yuǎn)程加載、解析Doom3 PROC場(chǎng)景文件，并實(shí)現(xiàn)基于視錐體與AABB級(jí)別的可見(jiàn)性測(cè)試場(chǎng)景渲染功能； ? 深入理解骨骼蒙皮動(dòng)畫(huà)的數(shù)學(xué)原理，并成功地解析和渲染Doom3中的MD5骨骼動(dòng)畫(huà)格式。 《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》有何特色 ? 深入：凝聚作者15年3D圖形編程經(jīng)驗(yàn)，帶領(lǐng)讀者探索3D圖形編程的知識(shí)； ? 系統(tǒng)：使用TypeScript構(gòu)建Application應(yīng)用程序框架及WebGL渲染框架； ? 廣泛：涉及數(shù)據(jù)結(jié)構(gòu)、WebGL渲染API用法、3D數(shù)學(xué)、二進(jìn)制文件讀取、骨骼動(dòng)畫(huà)及場(chǎng)景渲染等內(nèi)容； ? 獨(dú)特：使用TypeScript和WebGL渲染API來(lái)演示Quake3、Doom3引擎的場(chǎng)景和骨骼動(dòng)畫(huà)渲染； ? 實(shí)用：詳細(xì)講解8個(gè)完整的3D圖形Demo，幫助讀者理解3D圖形渲染最本質(zhì)的運(yùn)行流程。 《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》內(nèi)容 第1篇 數(shù)據(jù)結(jié)構(gòu)基礎(chǔ)（第1、2章） 第1章SystemJS與webpack，以循序漸進(jìn)的方式介紹了如何構(gòu)建基于SystemJS和webpack的TypeScript語(yǔ)言開(kāi)發(fā)、編譯和調(diào)試環(huán)境，最終形成一個(gè)支持源碼自動(dòng)編譯、模塊自動(dòng)載入、服務(wù)器端熱部署、具有強(qiáng)大斷點(diǎn)調(diào)試功能、能自動(dòng)打包的TypeScript開(kāi)發(fā)環(huán)境。 第2章TypeScript封裝和實(shí)現(xiàn)常用容器，主要涉及與數(shù)據(jù)結(jié)構(gòu)相關(guān)的知識(shí)點(diǎn)。首先講解了JS/TS中新增的ArrayBuffer、DataView及與類(lèi)型數(shù)組相關(guān)的知識(shí)點(diǎn)，然后封裝和實(shí)現(xiàn)了動(dòng)態(tài)類(lèi)型數(shù)組、字典、雙向循環(huán)列表、隊(duì)列、棧及通用樹(shù)結(jié)構(gòu)。 第2篇 WebGL圖形編程基礎(chǔ)（第3~7章） 第3章WebGLApplication框架，通過(guò)本書(shū)第一個(gè)WebGL Demo來(lái)演示一個(gè)支持不停刷新、重繪、事件分發(fā)與響應(yīng)、具有定時(shí)效果的WebGLApplication框架體系的使用流程。該框架支持使用ES 6.0標(biāo)準(zhǔn)中的async/await機(jī)制進(jìn)行資源加載。 第4章WebGL基礎(chǔ)，通過(guò)一個(gè)WebGL基本幾何圖元繪制的Demo，詳細(xì)介紹了WebGLContextEvent、WebGLContextAttribut、WebGLRenderingContext、WebGLShader、WebGLProgram、WebGLShaderPrecisionFormat、WebGLActiveInfo、WebGLUniformLocation和WebGLBuffer這9個(gè)類(lèi)的作用和常用方法。讀者可以重點(diǎn)關(guān)注WebGLBuffer的3種不同渲染數(shù)據(jù)存儲(chǔ)模式。 第5章WebGLUtilLib渲染框架，介紹了多個(gè)與WebGL相關(guān)的類(lèi)。其中，GLProgram類(lèi)用來(lái)編譯、鏈接GLSL ES GPU Shader源碼，并提供載入uniform變量的相關(guān)操作；GLStaticMesh對(duì)象用于繪制靜態(tài)物體；GLMeshBuilder對(duì)象可以用于繪制動(dòng)態(tài)物體；GLTexuture類(lèi)可以在GLStaticMesh或GLMeshBuilder生成的網(wǎng)格對(duì)象上進(jìn)行紋理貼圖操作。 第6章3D圖形中的數(shù)學(xué)基礎(chǔ)，通過(guò)介紹開(kāi)源TSM（TypeScript Vector And Matrix Math Library）數(shù)學(xué)庫(kù)，讓讀者掌握向量、矩陣、四元數(shù)等相關(guān)的3D數(shù)學(xué)知識(shí)，并在TSM庫(kù)的基礎(chǔ)上實(shí)現(xiàn)了平面、攝像機(jī)、矩陣堆棧及GLCoordSystem等后續(xù)Demo要用到的類(lèi)。 第7章多視口渲染基本幾何體、坐標(biāo)系及文字，使用WebGLApplication框架及WebGLUtilLib庫(kù)實(shí)現(xiàn)了兩個(gè)Demo。其中，第一個(gè)Demo使用GLMeshBuilder類(lèi)在多視口中渲染基本幾何體；第二個(gè)Demo則用來(lái)演示3D圖形中坐標(biāo)系的各種變換效果，并通過(guò)使用Canvas2D來(lái)繪制文字，從而解決WebGL中文字繪制的短板問(wèn)題。 第3篇 開(kāi)發(fā)實(shí)戰(zhàn)（第8~10章） 第8章解析與渲染Quake3 BSP場(chǎng)景，首先在Quake3BspParser類(lèi)的實(shí)現(xiàn)中介紹了如何使用DataView對(duì)象進(jìn)行Quake3 BSP二進(jìn)制文件解析，然后實(shí)現(xiàn)Quake3BspScene類(lèi)。Quake3BspScene類(lèi)可以將需要渲染的數(shù)據(jù)編譯成GLStaticMesh對(duì)象支持的格式，從而正確地顯示Quake3 BSP場(chǎng)景。 第9章解析和渲染Doom3 PROC場(chǎng)景，主要介紹了如何解析和渲染Doom3 PROC場(chǎng)景文件。首先實(shí)現(xiàn)了用Doom3SceneParser類(lèi)進(jìn)行場(chǎng)景文件的解析；然后實(shí)現(xiàn)了用Doom3ProcScene類(lèi)進(jìn)行場(chǎng)景文件的渲染；最后對(duì)場(chǎng)景的渲染增加視截體的可見(jiàn)性測(cè)試，從而提升WebGL的繪制效率。 第10章解析和渲染Doom3 MD5骨骼蒙皮動(dòng)畫(huà)，主要介紹了如何解析和渲染Doom3引擎中的MD5骨骼蒙皮動(dòng)畫(huà)。首先通過(guò)問(wèn)答的方式介紹了骨骼動(dòng)畫(huà)中4個(gè)與坐標(biāo)系相關(guān)的問(wèn)題；然后解析并繪制.md5mesh文件；最后介紹.md5anim動(dòng)畫(huà)文件格式，并實(shí)現(xiàn)動(dòng)畫(huà)序列的顯示播放。 《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》配套資源獲取方式 《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》涉及的源代碼文件和Demo需要讀者自行下載。請(qǐng)登錄華章公司網(wǎng)站www.hzbook.com，在該網(wǎng)站上搜索到本書(shū)，然后單擊資料下載按鈕，即可在頁(yè)面上找到配書(shū)資源下載鏈接。 運(yùn)行書(shū)中的源代碼需要進(jìn)行以下操作： （1）按照本書(shū)第1章中的介紹下載并安裝Node.js和VS Code。 （2）在VS Code的終端對(duì)話(huà)框中輸入npm install命令，自動(dòng)下載運(yùn)行依賴(lài)包。 （3）下載好依賴(lài)包后繼續(xù)輸入npm run watch。 （4）在VS Code中新建一個(gè)終端面板，輸入npm run dev。 《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》讀者對(duì)象 ? 對(duì)3D圖形編程、WebGL圖形開(kāi)發(fā)、游戲開(kāi)發(fā)感興趣的技術(shù)人員； ? 想轉(zhuǎn)行做圖形開(kāi)發(fā)和WebGL開(kāi)發(fā)的技術(shù)人員； ? 需要全面學(xué)習(xí)3D圖形開(kāi)發(fā)的技術(shù)人員； ? 想從其他強(qiáng)類(lèi)型語(yǔ)言（C、C 、Java、C#、Objective-C等）轉(zhuǎn)HTML 5開(kāi)發(fā)的技術(shù)人員； ? JavaScript程序員； ? 想了解TypeScript的程序員； ? 想提高編程水平的人員； ? 在校大學(xué)生及喜歡計(jì)算機(jī)編程的自學(xué)者； ? 專(zhuān)業(yè)培訓(xùn)機(jī)構(gòu)的學(xué)員。 《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》閱讀建議 ? 沒(méi)有3D圖形框架開(kāi)發(fā)基礎(chǔ)的讀者，建議從第1章順次閱讀并演練每一個(gè)實(shí)例； ? 有一定3D圖形開(kāi)發(fā)基礎(chǔ)的讀者，可以根據(jù)實(shí)際情況有重點(diǎn)地選擇閱讀各個(gè)模塊和項(xiàng)目案例； ? 對(duì)于每一個(gè)模塊和項(xiàng)目案例，先思考一下實(shí)現(xiàn)思路，然后再閱讀，學(xué)習(xí)效果更好； ? 可以先對(duì)書(shū)中的模塊和Demo閱讀一遍，然后結(jié)合《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》提供的源碼再進(jìn)行理解，并親自運(yùn)行和調(diào)試，這樣理解起來(lái)就更加容易，也會(huì)更加深刻。 《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》作者 《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》由步磊峰編寫(xiě)。感謝在《TypeScript圖形渲染實(shí)戰(zhàn)：基于WebGL的3D架構(gòu)與實(shí)現(xiàn)》編寫(xiě)和出版過(guò)程中給予了筆者大量幫助的各位編輯！ 由于作者水平所限，加之寫(xiě)作時(shí)間較為倉(cāng)促，書(shū)中可能還存在一些疏漏和不足之處，敬請(qǐng)各位讀者批評(píng)指正。 …… 步磊峰 計(jì)算機(jī)圖形編程資深?lèi)?ài)好者。有超過(guò)15年的程序開(kāi)發(fā)經(jīng)驗(yàn)。擅長(zhǎng)C/C 、C#、Java、Objective-C、JavaScript和TypeScript等編程語(yǔ)言。在作者的程序人生中，曾經(jīng)編寫(xiě)過(guò)3D程序、跨平臺(tái)UI引擎、Java頁(yè)游服務(wù)器和微信服務(wù)器，并為國(guó)內(nèi)的多個(gè)大型國(guó)營(yíng)金融機(jī)構(gòu)開(kāi)發(fā)過(guò)多款移動(dòng)端App。個(gè)人最大的成就是通過(guò)內(nèi)部培訓(xùn)，為公司培養(yǎng)了20多個(gè)C語(yǔ)言、C 及移動(dòng)端的開(kāi)發(fā)人才。
第1篇 數(shù)據(jù)結(jié)構(gòu)基礎(chǔ)
第1章 SystemJS與Webpack 2
1.1 準(zhǔn)備工作 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 第一個(gè)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ǎn)調(diào)試 19
1.6.1 安裝及配置Debugger for Chrome擴(kuò)展 19
1.6.2 斷點(diǎn)調(diào)試TypeScript程序 20
1.6.3 VS Code Debug快捷鍵 21
1.7 本章總結(jié) 21
第2章 TypeScript封裝和實(shí)現(xiàn)常用容器 22
2.1 ArrayBuffer、DataView及類(lèi)型數(shù)組實(shí)現(xiàn)原理 23
2.1.1 C/C 模擬JS/TS中的ArrayBuffer對(duì)象 23
2.1.2 C/C 模擬JS/TS中的DataView對(duì)象 24
2.1.3 C/C 版CDataView VS. JS/TS版DataView 25
2.1.4 C/C 模擬JS/TS中的Float32Array對(duì)象 26
2.1.5 C/C 版CFloat32Array VS. JS/TS版Float32Array 28
2.1.6 JS/TS中的類(lèi)型數(shù)組對(duì)象 30
2.2 封裝動(dòng)態(tài)類(lè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對(duì)象 38
2.3.4 封裝成Dictionary字典對(duì)象 39
2.3.5 測(cè)試Dictionary對(duì)象 42
2.3.6 紅黑樹(shù)還是哈希表 42
2.4 實(shí)現(xiàn)SGI STL風(fēng)格雙向循環(huán)鏈表 44
2.4.1 泛型的ListNode結(jié)構(gòu) 45
2.4.2 List中的頭節(jié)點(diǎn) 45
2.4.3 雙向循環(huán)概念 46
2.4.4 List的查詢(xún)與遍歷操作 46
2.4.5 List的插入操作 48
2.4.6 List的刪除操作 50
2.4.7 List的push / pop / push_front / pop_front操作 51
2.5 封裝隊(duì)列與棧 51
2.5.1 聲明IAdapter< T >泛型接口 52
2.5.2 實(shí)現(xiàn)AdapterBase< T >抽象基類(lèi) 52
2.5.3 實(shí)現(xiàn)Queue子類(lèi)和Stack子類(lèi) 53
2.6 實(shí)現(xiàn)通用樹(shù)結(jié)構(gòu) 54
2.6.1 樹(shù)結(jié)構(gòu)的內(nèi)存表示 54
2.6.2 樹(shù)節(jié)點(diǎn)添加時(shí)的要點(diǎn) 55
2.6.3 樹(shù)節(jié)點(diǎn)isDescendantOf和remove方法的實(shí)現(xiàn) 56
2.6.4 實(shí)現(xiàn)addChild等方法 58
2.6.5 查詢(xún)樹(shù)結(jié)構(gòu)的層次關(guān)系 59
2.6.6 廣度/深度優(yōu)先遍歷算法 60
2.6.7 隊(duì)列及棧在廣度/深度優(yōu)先遍歷中的應(yīng)用 62
2.6.8 廣度/深度線(xiàn)性遍歷枚舉器 63
2.6.9 樹(shù)結(jié)構(gòu)枚舉器的實(shí)現(xiàn) 63
2.6.10 測(cè)試樹(shù)結(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 第一個(gè)WebGL Demo 78
3.2.1 技術(shù)要點(diǎn)描述 78
3.2.2 Demo的成員變量與構(gòu)造函數(shù) 80
3.2.3 資源同步加載 82
3.2.4 立方體、坐標(biāo)系、三角形及文字渲染 83
3.2.5 更新操作 85
3.2.6 鍵盤(pán)輸入事件處理 86
3.2.7 總結(jié)Application框架的使用流程 87
3.3 Application框架實(shí)現(xiàn) 87
3.3.1 成員變量與構(gòu)造函數(shù) 88
3.3.2 啟動(dòng)/查詢(xún)/停止Application 89
3.3.3 不間斷地更新操作 90
3.3.4 CanvasInputEvent及其子類(lèi) 92
3.3.5 DOM中的getBoundingRect方法 93
3.3.6 實(shí)現(xiàn)viewportToCanvasCoordinate方法 94
3.3.7 將DOM Event事件轉(zhuǎn)換為CanvasInputEvent事件 95
3.3.8 實(shí)現(xiàn)EventListenerObject接口進(jìn)行事件分發(fā) 96
3.3.9 讓事件起作用 97
3.3.10 定時(shí)器Timer系統(tǒng) 97
3.3.11 增刪定時(shí)器對(duì)象 98
3.3.12 觸發(fā)多個(gè)定時(shí)任務(wù)的操作 100
3.3.13 WebGLApplication子類(lèi) 101
3.3.14 CameraApplication子類(lèi) 102
3.4 HTML頁(yè)面系統(tǒng) 103
3.4.1 HTML頁(yè)面系統(tǒng)簡(jiǎn)介 103
3.4.2 HTML頁(yè)面源碼 104
3.4.3 入口文件main.ts 105
3.5 異步資源加載及同步操作 107
3.5.1 使用Promise封裝HTTP異步請(qǐng)求 107
3.5.2 實(shí)現(xiàn)AsyncLoadTestApplication類(lèi) 109
3.5.3 異步run函數(shù)的覆寫(xiě)（override）與測(cè)試 110
3.5.4 Promise.all異步并發(fā)加載及同步操作 111
3.5.5 本書(shū)后續(xù)的資源加載及同步策略 114
3.6 本章總結(jié) 114
第4章 WebGL基礎(chǔ) 116
4.1 WebGL中的類(lèi) 116
4.2 準(zhǔn)備工作 117
4.2.1 創(chuàng)建WebGLRenderingContext對(duì)象 117
4.2.2 WebGLContextAttributes對(duì)象與幀緩沖區(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著色語(yǔ)言 123
4.3.3 WebGLShader對(duì)象 126
4.3.4 GLSL ES精度限定符與WebGLShaderPrecisionFormat對(duì)象 128
4.3.5 WebGLProgram對(duì)象 130
4.3.6 WebGLActiveInfo對(duì)象 132
4.3.7 WebGLUniformLocation對(duì)象 134
4.3.8 WebGLBuffer對(duì)象 137
4.3.9 渲染數(shù)據(jù)存儲(chǔ)思考 140
4.3.10 Interleaved數(shù)組的存儲(chǔ)、尋址及繪制 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框架類(lèi)結(jié)構(gòu)體系 153
5.2 GLAttribState類(lèi)的實(shí)現(xiàn) 155
5.2.1 預(yù)定義頂點(diǎn)屬性常量值 156
5.2.2 GLAttribState類(lèi)的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)類(lèi)的實(shí)現(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類(lèi) 171
5.3.7 GLShaderSource對(duì)象 172
5.3.8 初始化常用的著色器 173
5.4 GLMesh相關(guān)類(lèi)的實(shí)現(xiàn) 174
5.4.1 VAO對(duì)象與GLMeshBase類(lèi) 174
5.4.2 GLStaticMesh類(lèi)實(shí)現(xiàn)細(xì)節(jié) 175
5.4.3 GLMeshBuilder類(lèi)成員變量 178
5.4.4 GLMeshBuilder類(lèi)構(gòu)造方法 179
5.4.5 GLMeshBuilder類(lèi)的color、texcoord、normal和vertex方法 181
5.4.6 GLMeshBuilder類(lèi)的begin和end方法 184
5.5 GLTexture類(lèi)的實(shí)現(xiàn) 187
5.5.1 GLTexture的成員變量和構(gòu)造函數(shù) 187
5.5.2 GLTexture類(lèi)的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 坐標(biāo)系 193
6.1.1 OpenGL / WebGL中的坐標(biāo)系 193
6.1.2 左手坐標(biāo)系與右手坐標(biāo)系 194
6.2 TSM數(shù)學(xué)庫(kù) 196
6.3 向量 197
6.3.1 向量的概念 197
6.3.2 向量的大�。ɑ蜷L(zhǎng)度） 198
6.3.3 兩個(gè)向量之間的距離 199
6.3.4 單位向量 199
6.3.5 向量的加法 199
6.3.6 向量的減法 200
6.3.7 向量的縮放 201
6.3.8 負(fù)向量 202
6.3.9 向量的點(diǎn)乘 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 視圖（攝像機(jī)）矩陣 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 點(diǎn)與平面的距離與關(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 攝像機(jī) 220
6.10.1 成員變量和構(gòu)造函數(shù) 221
6.10.2 攝像機(jī)的移動(dòng)和旋轉(zhuǎn) 222
6.10.3 攝像機(jī)的更新 224
6.10.4 攝像機(jī)的相關(guān)屬性 225
6.11 WebGLCoordSystem類(lèi) 227
6.12 本章總結(jié) 228
第7章 多視口渲染基本幾何體、坐標(biāo)系及文字 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頂點(diǎn)存儲(chǔ)格式繪制三角形 234
7.1.5 使用SEQUENCED頂點(diǎn)存儲(chǔ)格式繪制四邊形 235
7.1.6 使用SEPARATED頂點(diǎn)存儲(chǔ)格式繪制立方體 236
7.1.7 創(chuàng)建多視口的方法 239
7.1.8 WebGL中的紋理坐標(biāo)系 240
7.1.9 drawByMultiViewportsWithTextureShader方法繪制流程 240
7.1.10 繪制紋理立方體 242
7.1.11 實(shí)現(xiàn)Atlas紋理貼圖效果 243
7.1.12 收尾工作 245
7.2 坐標(biāo)系、文字渲染及空間變換Demo 246
7.2.1 Demo的需求描述 246
7.2.2 Demo的成員變量和構(gòu)造函數(shù) 247
7.2.3 生成單視口或多視口坐標(biāo)系數(shù)組 248
7.2.4 覆寫(xiě)（override）更新和渲染虛方法 249
7.2.5 覆寫(xiě)（override）鍵盤(pán)事件處理虛方法 250
7.2.6 drawFullCoordSystem方法 250
7.2.7 drawFullCoordSystemWithRotatedCube方法 252
7.2.8 DrawHelper類(lèi)的drawFullCoordSystem方法 254
7.2.9 深度測(cè)試對(duì)坐標(biāo)系繪制的影響 255
7.2.10 drawText方法 256
7.2.11 MathHelper類(lèi)的obj2GLViewportSpace方法 258
7.2.12 3D圖形中的數(shù)學(xué)變換流水線(xiàn) 258
7.3 本章總結(jié) 259
第3篇 開(kāi)發(fā)實(shí)戰(zhàn)
第8章 解析與渲染Quake3 BSP場(chǎng)景 262
8.1 Q3BspApplication入口類(lèi) 262
8.2 解析Quake3 BSP二進(jìn)制文件 264
8.2.1 Quake3BspParser類(lèi)的常量定義 264
8.2.2 Q3BSPLump結(jié)構(gòu)定義 265
8.2.3 解析BSP文件頭 266
8.2.4 解析實(shí)體字符串?dāng)?shù)據(jù) 267
8.2.5 解析材質(zhì)數(shù)據(jù) 269
8.2.6 解析頂點(diǎn)數(shù)據(jù) 270
8.2.7 解析頂點(diǎn)索引數(shù)據(jù) 273
8.2.8 解析渲染表面數(shù)據(jù) 273
8.2.9 Quake3與WebGL坐標(biāo)系轉(zhuǎn)換 276
8.3 渲染Quake3 BSP場(chǎng)景 277
8.3.1 Quake3BspScene的初始化 278
8.3.2 DrawSurface對(duì)象 278
8.3.3 封裝Promise加載所有紋理 279
8.3.4 生成GLStaticMesh對(duì)象 280
8.3.5 繪制整個(gè)BSP場(chǎng)景 282
8.4 本章總結(jié) 283
第9章 解析和渲染Doom3 PROC場(chǎng)景 285
9.1 Doom3Application入口類(lèi) 285
9.2 解析Doom3 PROC場(chǎng)景 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類(lèi) 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場(chǎng)景 298
9.3.1 RenderSurface對(duì)象 299
9.3.2 Doom3ProcScene的draw方法 299
9.3.3 Doom3ProcScene類(lèi)的loadTextures方法 300
9.3.4 Doom3ProcScene的parseDoom3Map方法 301
9.4 AABB包圍盒 303
9.4.1 AABB包圍盒與OBB包圍盒的特點(diǎn) 304
9.4.2 構(gòu)建AABB包圍盒 304
9.4.3 計(jì)算AABB包圍盒的9個(gè)頂點(diǎn)坐標(biāo)值 306
9.4.4 計(jì)算變換后的AABB包圍盒 307
9.4.5 AABB包圍盒的兩個(gè)常用碰檢算法 307
9.5 攝像機(jī)視截體 308
9.5.1 攝像機(jī)視截體的概念 308
9.5.2 Frustum類(lèi)的成員變量和構(gòu)造函數(shù) 309
9.5.3 buildFromCamera方法的實(shí)現(xiàn) 310
9.5.4 讓Camera類(lèi)支持Frustum 312
9.5.5 Frustum與包圍盒及三角形的可見(jiàn)行測(cè)試 313
9.5.6 讓GLStaticMesh支持包圍盒 314
9.5.7 更新Doom3ProcScene的draw方法 314
9.5.8 將Frustum繪制出來(lái) 315
9.5.9 Doom3ProcScene類(lèi)增加包圍盒繪制方法 316
9.6 本章總結(jié) 316
第10章 解析和渲染Doom3 MD5骨骼蒙皮動(dòng)畫(huà) 318
10.1 骨骼蒙皮動(dòng)畫(huà)原理 318
10.1.1 骨骼蒙皮動(dòng)畫(huà)效果演示 319
10.1.2 骨骼蒙皮動(dòng)畫(huà)中的各種坐標(biāo)系 320
10.1.3 骨骼蒙皮動(dòng)畫(huà)數(shù)學(xué)關(guān)鍵點(diǎn)的問(wè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 計(jì)算頂點(diǎn)最終位置 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 幀動(dòng)作姿態(tài)結(jié)構(gòu) 339
10.3.7 MD5Anim類(lèi)的buildLocalSkeleton方法 340
10.3.8 MD5Anim類(lèi)的updateToModelSpaceSkeleton方法 342
10.3.9 MD5SkinedMesh類(lèi)的playAnim方法 342
10.3.10 MD5SkinedMesh的drawAnimPose方法 343
10.4 實(shí)現(xiàn)MD5SkinedMeshApplication Demo 344
10.5 本章總結(jié) 346
你還可能感興趣
我要評(píng)論
|
