WebGL編程指南

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