第1 章 WebGL 概述...................... 1
WebGL 的優勢 ...........................................3
使用文本編輯器開發三維應用 ...............3
輕鬆發布三維圖形程序 .................................4
充分利用瀏覽器的功能 ...........................5
學習和使用WebGL 很簡單 ...................5
WebGL 的起源 .................................................5
WebGL 程序的結構 ...................................6
總結 .....................................7
第2 章 WebGL 入門.................... 9
Canvas 是什麼？ ........................................10
使用<canvas> 標簽 ................................11
DrawRectangle.js .............................................13
最短的WebGL 程序：清空繪圖區 ....................16
HTML 文件（HelloCanvas.html）.............................16
JavaScript 程序（HelloCanvas.js） ............................17
用示例程序做實驗 ..............................................22
繪製一個點（版本1） ............................................22
HelloPoint1.html ..............................................24
HelloPoint1.js ....................................................24
著色器是什麼？ ...........................................25
使用著色器的WebGL 程序的結構 .................................27
初始化著色器 ...........................................29
頂點著色器 ......................................................31
片元著色器 ...........................................33
繪製操作 .............................................34
WebGL 坐標係統 ....................................35
用示例程序做實驗 ................................37
繪製一個點（版本2） ..............................38
使用attribute 變量..................................38
示例程序（HelloPoint2.js） .........................................39
獲取attribute 變量的存儲位置.......................41
嚮attribute 變量賦值.............................................42
gl.vertexAttrib3f() 的同族函數 .........................44
用示例程序做實驗 ...............................45
通過鼠標點擊繪點 ...........................................46
示例程序（ClickedPoints.js） ...........................47
注冊事件響應函數 ..................................48
響應鼠標點擊事件 ............................50
用示例程序做實驗 ..............................53
改變點的顔色 ............................................55
示例程序（ColoredPoints.js） ..............................56
uniform 變量 ........................................58
獲取uniform 變量的存儲地址 .....................59
嚮uniform 變量賦值 .................................60
gl.uniform4f() 的同族函數 .......................61
總結 ............................62
第3 章 繪製和變換三角形................ 63
繪製多個點 ...............................................64
示例程序（MultiPoint.js） ........................................66
使用緩衝區對象 ....................................69
創建緩衝區對象（gl.createBuffer()） ...................70
綁定緩衝區（gl.bindBuffer()） .....................................71
嚮緩衝區對象中寫入數據（gl.bufferData()）..............72
類型化數組 ........................................74
將緩衝區對象分配給attribute 變量（gl.vertexAttribPointer()） ...............75
開啓attribute 變量（gl.enableVertexAttribArray()） ................77
gl.drawArrays() 的第2 個和第3 個參數 .................78
用示例程序做實驗 ........................................79
Hello Triangle ..................................80
示例程序（HelloTriangle.js） .........................80
基本圖形 .................................................82
用示例程序做實驗 ...........................83
Hello Rectangle（HelloQuad） ...........................84
用示例程序做實驗 ...................................85
移動、鏇轉和縮放 ........................................86
平移 ................................................87
示例程序（TranslatedTriangle.js） ...........................88
鏇轉 ...........................................................91
示例程序（RotatedTriangle.js） ..................................93
變換矩陣：鏇轉 ........................................97
變換矩陣：平移 ...................................100
4×4 的鏇轉矩陣 ..................................101
示例程序（RotatedTriangle_Matrix.js） ...................102
平移：相同的策略 ................................105
變換矩陣：縮放 ...............................106
總結 ...........................................................108
第4 章 高級變換與動畫基礎.............................. 109
平移，然後鏇轉 ...........................................109
矩陣變換庫：cuon-matrix.js ....................110
示例程序（RotatedTriangle_Matrix4.js） ............... 111
復閤變換 .............................................113
示例程序（RotatedTranslatedTriangle.js）.....................115
用示例程序做實驗 ..................................117
動畫 .....................................118
動畫基礎 .........................................119
示例程序（RotatingTriangle.js） .......................119
反復調用繪製函數（tick()） ............................123
按照指定的鏇轉角度繪製三角形（draw()） .............123
請求再次被調用（requestAnimationFrame()） ............125
更新鏇轉角（animate()）................................126
用示例程序做實驗 ............................128
總結 .....................................................130
第5 章 顔色與紋理.............. 131
將非坐標數據傳入頂點著色器 ................131
示例程序（MultiAttributeSize.js） .....................133
創建多個緩衝區對象 .........................134
gl.vertexAttribPointer() 的步進和偏移參數 ...............135
示例程序（MultiAttributeSize_Interleaved.js） ...................136
修改顔色（varying 變量） .......................140
示例程序（MultiAttributeColor.js） .........................141
用示例程序做實驗 .........................144
彩色三角形（ColoredTriangle.js） ............................145
幾何形狀的裝配和光柵化 ................145
調用片元著色器 ............................149
用示例程序做實驗 ..................................149
varying 變量的作用和內插過程 ..............151
在矩形錶麵貼上圖像 ...........................................153
紋理坐標 ...................................................156
將紋理圖像粘貼到幾何圖形上 .....................156
示例程序（TexturedQuad.js） ...............................157
設置紋理坐標（initVertexBuffers()）......................160
配置和加載紋理（initTextures()） ..................160
為WebGL 配置紋理（loadTexture()） .............164
圖像Y 軸反轉 .................................164
激活紋理單元（gl.activeTexture()） ..................165
綁定紋理對象（gl.bindTexture()） ..................166
配置紋理對象的參數（gl.texParameteri()） .........168
將紋理圖像分配給紋理對象（gl.texImage2D()） .....171
將紋理單元傳遞給片元著色器（gl.uniform1i()） .........173
從頂點著色器嚮片元著色器傳輸紋理坐標 .......................174
在片元著色器中獲取紋理像素顔色（texture2D()） ..................174
用示例程序做試驗 ............................175
使用多幅紋理 ...............................................177
示例程序（MultiTexture.js） ............................178
總結 .......................................................183
第6 章 OpenGL ES 著色器語言（GLSL ES）.............. 185
迴顧：基本著色器代碼 ...............................186
GLSL ES 概述 .............................................186
你好，著色器！ ...................................................187
基礎 ......................187
執行次序 .........................................187
注釋 ..................................................187
數據值類型（數值和布爾值） ......................188
變量 .........................................................188
GLSL ES 是強類型語言 ........................189
基本類型 ....................................................189
賦值和類型轉換 .........................190
運算符 ............................................191
矢量和矩陣 .........................................192
賦值和構造 ...............................193
訪問元素 .........................................195
運算符 ............................................197
結構體 .....................................................200
賦值和構造 ...................................200
訪問成員 ...............................................200
運算符 ...........................................201
數組 ..........................................................201
取樣器（紋理） ........................................202
運算符優先級 ..........................................203
程序流程控製：分支和循環 .......................203
if 語句和if-else 語句 ............................203
for 語句 .......................................204
continue、break 和discard 語句 ................205
函數 ..........................................205
規範聲明 ........................................207
參數限定詞 ........................................207
內置函數 .................................................208
全局變量和局部變量 ..............................209
存儲限定字 ...........................................209
const 變量 .....................................209
Attribute 變量 ..............................210
uniform 變量 ..................................211
varying 變量 ..................................211
精度限定字 ..............................................211
預處理指令 .............................................213
總結 ......................................................215
第7 章 進入三維世界................ 217
立方體由三角形構成 .............................217
視點和視綫 ...........................................218
視點、觀察目標點和上方嚮 ........... 219
示例程序（LookAtTriangles.js） ...........................221
LookAtTriangles.js 與RotatedTriangle_Matrix4.js ..........224
從指定視點觀察鏇轉後的三角形 .....................225
示例程序（LookAtRotatedTriangles.js） ...................227
用示例程序做實驗 .................................228
利用鍵盤改變視點 .............................230
示例程序（LookAtTrianglesWithKeys.js） .................230
獨缺一角 ......................................232
可視範圍（正射類型） .............................233
可視空間 ..................................................234
定義盒狀可視空間 ................................235
示例程序（OrthoView.html） ........................236
示例程序（OrthoView.js） ...............................237
JavaScript 修改HTML 元素 ..........................239
頂點著色器的執行流程 ............................239
修改near 和far 值 .............................241
補上缺掉的角（LookAtTrianglesWithKeys_ViewVolume.js） ..........243
用示例程序做實驗 ................................245
可視空間（透視投影） ....................................246
定義透視投影可視空間 .......................247
示例程序（perspectiveview.js） .........................249
投影矩陣的作用 ...................................251
共冶一爐（模型矩陣、視圖矩陣和投影矩陣） .............252
示例程序（PerspectiveView_mvp.js） ........................254
用示例程序做實驗 ................................257
正確處理對象的前後關係 ............................258
隱藏麵消除 .....................................260
示例程序（DepthBuffer.js）..............................262
深度衝突 ................................................263
立方體 ...........................................................266
通過頂點索引繪製物體 ....................268
示例程序（HelloCube.js） ...........................268
嚮緩衝區中寫入頂點的坐標、顔色與索引 ....................271
為立方體的每個錶麵指定顔色 .............274
示例程序（ColoredCube.js） ............................275
用示例程序做實驗 ............................277
總結 ..............................................279
第8 章 光照......... 281
光照原理 ....................................................281
光源類型 .......................................283
反射類型 ............................................284
平行光下的漫反射 ............................286
根據光綫和錶麵的方嚮計算入射角 .................287
法綫：錶麵的朝嚮 .............................288
示例程序（LightedCube.js） ..........................291
環境光下的漫反射 ...................................296
示例程序（LightedCube_ambient.js） .........................298
運動物體的光照效果 .....................................299
魔法矩陣：逆轉置矩陣 .....................301
示例程序（LightedTranslatedRotatedCube.js） .....................302
點光源光 ............................................304
示例程序（PointLightedCube.js） ...............305
更逼真：逐片元光照 ......................................308
示例程序（PointLightedCube_perFragment.js） ........309
總結 ............................310
第9 章 層次模型.......... 311
多個簡單模型組成的復雜模型 .....................311
層次結構模型 ..................................313
單關節模型 ......................................314
示例程序（JointMode.js） ................................315
繪製層次模型（draw()） .....................319
多節點模型 ..........................................321
示例程序（MultiJointModel.js） .........................323
繪製部件（drawBox()）............................326
繪製部件（drawSegments()） .......................327
著色器和著色器程序對象：initShaders() 函數的作用 .................332
創建著色器對象（gl.createShader()） ..................333
指定著色器對象的代碼（gl.shaderSource()） ................334
編譯著色器（gl.compileShader()） ...............334
創建程序對象（gl.createProgram()） ..............................336
為程序對象分配著色器對象（gl.attachShader()） .............337
連接程序對象（gl.linkProgram()） ..........................337
告知WebGL 係統所使用的程序對象（gl.useProgram()） ................339
initShaders() 函數的內部流程 .....................................339
總結 ...........................................................342
第10 章 高級技術......................... 343
用鼠標控製物體鏇轉 .......................................343
如何實現物體鏇轉 ......................................344
示例程序（RotateObject.js） .......................344
選中物體 ........................................347
如何實現選中物體 .........................................347
示例程序（PickObject.js） .................................348
選中一個錶麵 ......................................351
示例程序（PickFace.js）...................................352
HUD（平視顯示器） .................................355
如何實現HUD ...................................355
示例程序（HUD.html） ..............................356
示例程序（HUD.js）...................................357
在網頁上方顯示三維物體 ....................359
霧化（大氣效果） ...................................359
如何實現霧化 ....................................360
示例程序（Fog.js） .....................................361
使用w 分量（Fog_w.js） ...............................363
繪製圓形的點 .................................................364
如何實現圓形的點 ......................................364
示例程序（RoundedPoint.js） ...............................366
α 混閤 .............................................367
如何實現α 混閤 .....................................367
示例程序（LookAtBlendedTriangles.js） .................369
混閤函數 .....................................................369
半透明的三維物體（BlendedCube.js）................371
透明與不透明物體共存 .........................372
切換著色器 ............................373
如何實現切換著色器 .....................................374
示例程序（ProgramObject.js） ............................375
渲染到紋理 .......................................................379
幀緩衝區對象和渲染緩衝區對象 ....................380
如何實現渲染到紋理 ...............................381
示例程序（FramebufferObject.js） ........................382
創建幀緩衝區對象（gl.createFramebuffer()） ............385
創建紋理對象並設置其尺寸和參數 ....................385
創建渲染緩衝區對象（gl.createRenderbuffer()） ...........386
綁定渲染緩衝區並設置其尺寸（gl.bindRenderbuffer()，
gl.renderbufferStorage()） ......................................386
將紋理對象關聯到幀緩衝區對象（gl.bindFramebuffer()，
gl.framebufferTexture2D()） ................................388
將渲染緩衝區對象關聯到幀緩衝區對象（gl.framebufferRenderbuffer()） ...389
檢查幀緩衝區的配置（gl.checkFramebufferStatus()） ..........390
在幀緩衝區進行繪圖 ........................390
繪製陰影 ..................................................392
如何實現陰影 ................................392
示例程序（Shadow.js） ...........................393
提高精度 ........................................399
示例程序（Shadow_highp.js） .........................400
加載三維模型 .....................................401
OBJ 文件格式 ....................................404
MTL 文件格式 ...............................405
示例程序（OBJViewer.js） ........................406
自定義類型對象 ..................................409
示例程序（OBJViewer.js 解析數據部分） .........411
響應上下文丟失 .....................................418
如何響應上下文丟失 ....................419
示例程序（RotatingTriangle_contextLost.js） ................420
總結 .............................................................422
附錄A WebGL 中無須交換緩衝區....................... 423
附錄B GLSL ES 1.0 內置函數..................... 427
角度和三角函數 .....................................428
指數函數 ...............................................429
通用函數 ...................................................430
幾何函數 ...................................................433
矩陣函數 ....................................................434
矢量函數 .......................................................435
紋理查詢函數 ...........................................436
附錄C 投影矩陣....................... 437
正射投影矩陣 ........................................................437
透視投影矩陣 ......................................437
附錄D WebGL/OpenGL ：左手還是右手坐標係？............................ 439
示例程序(CoordinateSystem.js) .............................440
隱藏麵消除和裁剪坐標係統 ......................................443
裁剪坐標係和可視空間 ....................................444
什麼是對的？ .................................................446
總結 .....................................448
附錄E 逆轉置矩陣................... 449
附錄F 從文件中加載著色器............ 453
附錄G 世界坐標係和本地坐標係........... 457
本地坐標係 ......................................................458
世界坐標係 ...........................459
變換與坐標係 ..........................................461
附錄H WebGL 的瀏覽器設置.................. 463
· · · · · · (收起)