WebGL進階程式設計：開發Web3D圖形 PDF（中文版帶書簽）

WebGL進階程式設計：開發Web3D圖形

WebGL簡介1

1.1 WebGL基礎1

1.2 浏覽器3D圖形吸引人的原因2

1.3 設計一個圖形API3

1.3.1 即時模式API3

1.3.2 保留模式API3

1.4 圖形硬體簡介4

1.4.1 GPU4

1.4.2 幀緩存5

1.4.3 紋理存儲器6

1.4.4 視訊控制器6

1.5 WebGL圖形流水線6

1.5.1 頂點着色器8

1.5.2 圖元裝配11

1.5.3 光栅化12

1.5.4 片段着色器12

1.5.5 逐片段操作15

1.6 WebGL與其他圖形技術的比較16

1.6.1 OpenGL16

1.6.2 OpenGL ES 2.018

1.6.3 Direct3D19

1.6.4 HTML5畫布21

1.6.5 可縮放矢量圖形25

1.6.6 VRML與X3D26

1.7 線性代數簡介27

1.7.1 坐标系27

1.7.2 點與頂點27

1.7.3 矢量28

1.7.4 矢量的點積或标積29

1.7.5 叉積30

1.7.6 齊次坐标31

1.7.7 矩陣31

1.7.8 仿射變換34

1.8 小結39

第2章建立基本的WebGL示例41

2.1 繪制三角形41

2.1.1 建立WebGL上下文45

2.1.2 建立頂點着色器和片段着色器47

2.1.3 編譯着色器48

2.1.4 建立程式對象和連結着色器48

2.1.5 建立緩沖50

2.1.6 繪制場景51

2.2 了解WebGL編碼風格52

2.3 調試WebGL應用程式53

2.3.1 使用Chrome開發人員工具53

2.3.2 Firebug的使用59

2.3.3 WebGL的錯誤處理與錯誤代碼61

2.3.4 WebGL Inspector64

2.3.5 WebGL的故障排除70

2.4 用DOM API載入着色器71

2.5 ***的綜合示例73

2.6 小結77

第3章繪制79

3.1 使用WebGL繪制圖元和繪圖方法79

3.1.1 圖元80

3.1.2 頂點組繞順序的重要性84

3.1.3 WebGL的繪圖方法85

3.2 類型化數組91

3.2.1 緩沖與視圖91

3.2.2 WebGL支援的視圖類型92

3.3 探讨不同的繪圖方法93

3.3.1 gl.drawArrays()和gl.TRIANGLES94

3.3.2 gl.drawArrays()方法和gl.TRIANGLE_STRIP圖元96

3.3.3 gl.drawElements()方法和gl.TRIANGLES圖元98

3.3.4 gl.drawElements()方法和gl.TRIANLE_STRIP圖元100

3.3.5 總結比較102

3.3.6 前期變換頂點緩存和後期變換頂點緩存102

3.4 為提高性能交叉存放頂點資料104

3.5 使用頂點數組或常量頂點資料113

3.6 總結本章的*後一個示例114

3.7 小結124

第4章小型庫與變換127

4.1 中矩陣和向量的操作127

4.1.1 Sylvester庫128

4.1.2 WebGL-mjs庫132

4.1.3 glMatrix庫135

4.2 變換運算139

4.3 了解完整的變換流水線145

4.4 變換的實踐146

4.4.1 為對象坐标設定緩沖147

4.4.2 用建立變換矩陣并上傳給着色器148

4.4.3 将變換矩陣上傳給GPU中的頂點着色器148

4.4.4 調用繪圖方法149

4.5 了解變換順序的重要性150

4.5.1 使用一個固定的全局的坐标系150

4.5.2 使用移動的局部的坐标系153

4.5.3 變換矩陣的入棧和出棧操作154

4.6 一個完整的示例：繪制幾個變換後的對象157

4.6.1 使用WebGL代碼建立立方體159

4.6.2 視圖變換和模型變換的組織161

4.7 小結162

第5章紋理貼圖163

5.1 了解丢失上下文164

5.1.1 了解解決丢失上下文問題所需要的設定164

5.1.2 處理丢失上下文問題時需要考慮的幾個因素166

5.2 2D紋理與立方映射紋理169

5.3 載入紋理170

5.3.1 建立WebGLTexture對象170

5.3.2 綁定紋理171

5.3.3 載入圖像資料171

5.3.4 将紋理上傳到GPU173

5.3.5 定義紋理參數174

5.3.6 了解載入紋理的完整過程175

5.3.7 建立一個紋理對象并載入紋理資料177

5.4 定義紋理坐标178

5.5 着色器中的紋理處理180

5.6 處理紋理過濾183

5.6.1 紋理伸展184

5.6.2 紋理收縮185

5.6.3 Mip映射紋理186

5.7 了解紋理坐标包裝188

5.7.1 應用gl.REPEAT包裝模式188

5.7.2 應用gl.MIRRORED_REPEAT包裝模式190

5.7.3 應用gl.CLAMP_TO_EDGE包裝模式191

5.8 一個完整的應用紋理示例191

5.9 獲得用作紋理的圖像194

5.9.1 下載下傳免費紋理194

5.9.2 用自己拍攝的照片生成紋理194

5.9.3 繪制圖像195

5.9.4 購買紋理195

5.10 同域政策與跨域資源共享195

5.10.1 同域政策應用于一般的圖像196

5.10.2 同域政策應用于紋理197

5.10.3 跨域資源共享199

5.11 小結200

第6章動畫與使用者輸入203

6.1 建立動畫場景203

6.1.1 setInterval()和setTimeout()的使用205

6.1.2 使用requestAnimationFrame()函數206

6.1.3 幀頻不同引起的運動補償209

6.1.4 建立FPS計數器測量動畫的平穩性210

6.1.5 用FPS作為測量值的缺點212

6.2 使用者互動事件的處理213

6.2.1 DOM Level 0基本事件處理214

6.2.2 DOM Level 2——**事件處理方法215

6.2.3 鍵盤輸入217

6.2.4 滑鼠輸入221

6.3 綜合應用新知識223

6.4 小結229

第7章光照231

7.1 光源231

7.2 局部光照模型的工作原理232

7.3 Phong反射模型232

7.3.1 環境反射233

7.3.2 漫反射234

7.3.3 鏡面反射236

7.3.4 Phong反射模型的完整公式和着色器239

7.3.5 光照效果與紋理相結合243

7.4 WebGL光照中需要的代碼246

7.4.1 為頂點法線設定緩存247

7.4.2 計算法線矩陣并上傳給着色器249

7.4.3 将光照資訊上傳給着色器250

7.5 将不同的插值方法用于着色250

7.5.1 平面着色251

7.5.2 Gouraud着色252

7.5.3 Phong着色253

7.6 矢量必須歸一化256

7.6.1 頂點着色器中的矢量歸一化257

7.6.2 片段着色器的矢量歸一化257

7.7 應用不同類型的光源258

7.7.1 平行光258

7.7.2 點光源259

7.7.3 聚光源259

7.8 光強衰減262

7.9 光照映射265

7.10 小結267

第8章 WebGL性能優化269

8.1 WebGL底層工作機制269

8.1.1 支援WebGL的硬體270

8.1.2 關鍵的軟體組成271

8.2 WebGL性能優化274

8.2.1 避免初學者的典型錯誤274

8.2.2 确定瓶頸位置275

8.2.3 有關性能的一般性建議279

8.2.4 改善CPU受限的WebGL應用程式性能的建議282

8.2.5 改善頂點受限的WebGL應用程式性能的建議283

8.2.6 改善像素受限的WebGL應用程式性能的建議285

8.3 深入分析融合286

8.3.1 融合簡介286

8.3.2 設定融合函數287

8.3.3 繪制順序與深度緩沖區290

8.3.4 繪制包含不透明對象和半透明對象的場景290

8.3.5 修改融合公式中的預設運算符291

8.3.6 使用預乘alpha值292

8.4 深入讨論WebGL292

8.4.1 使用WebGL架構293

8.4.2 釋出到Google Chrome Web Store293

8.4.3 使用額外資源293

8.5 小結294

下載下傳位址：https://pan.baidu.com/s/1ro5Ma0Y4_CVIr0eVft26NQ

關注微信公衆号擷取提取碼：

　　輸入：web1 擷取提取碼