?WebGL編程培訓(xùn)課程

課程大綱：

1WebGL概述

1.1?系統(tǒng)需求

1.2?WebGL提供的渲染類(lèi)型

1.3?WebGL應(yīng)用程序結(jié)構(gòu)

1.4?HTML?5?canvas的生成方式

1.5訪(fǎng)問(wèn)WebGL上下文環(huán)境

1.6?WebGL狀態(tài)機(jī)

1.7加載3D場(chǎng)景

2渲染幾何體

2.1頂點(diǎn)和索引

2.2?WebGL渲染管線(xiàn)概述

2.3在WebGL中渲染幾何體

2.4將屬性關(guān)聯(lián)至VBO

2.5渲染機(jī)制

2.6整合過(guò)程

2.7渲染模式

2.8緩沖區(qū)操控

2.9高級(jí)幾何體加載技術(shù)：JSON和AJAX

2.10使用AJAX+JSON加載圓錐體對(duì)象

3光照

3.1光照、法線(xiàn)和材質(zhì)

3.2在管線(xiàn)中使用光源、法線(xiàn)和材質(zhì)

3.3著色方案和光照反射模型

3.4OpenGL?ES著色語(yǔ)言ESSL

3.5編寫(xiě)ESSL程序

3.6返回至WebGL

3.7位置光源

4相機(jī)

4.1?WebGL不存在相機(jī)對(duì)象

4.2法線(xiàn)轉(zhuǎn)換

4.3?WebGL實(shí)現(xiàn)方式

4.4模型，視見(jiàn)矩陣

4.5相機(jī)矩陣

4.6透視矩陣

4.7?WebGL示例結(jié)構(gòu)

5實(shí)現(xiàn)方案

5.1?矩陣棧

5.2?3D場(chǎng)景的動(dòng)畫(huà)操作

5.3計(jì)時(shí)策略

5.4體系結(jié)構(gòu)更新

5.5連接矩陣棧和JavaScript計(jì)時(shí)器

5.6參數(shù)曲線(xiàn)

5.7優(yōu)化策略

5.8插值方案

6顏色、深度測(cè)試以及Alpha混合

6.1?在WebGL中使用顏色

6.2使用對(duì)象中的顏色

6.3使用光照顏色

6.4體系結(jié)構(gòu)的更新操作

6.5通過(guò)jQuery?Ul實(shí)現(xiàn)互動(dòng)性

6.6有向點(diǎn)光源

6.7使用場(chǎng)景中的顏色值

6.8深度測(cè)試

6.9?Alpha混合操作

6.10生成透明對(duì)象

7紋理

7.1紋理貼圖

7.2生成并加載紋理

7.3使用紋理坐標(biāo)

7.4著色器中的紋理應(yīng)用

7.5紋理過(guò)濾模式

7.6紋理環(huán)繞模式

7.7多重紋理

7.8立方體貼圖

8拾取操作

8.1拾取操作概述

8.2構(gòu)造離屏幀緩沖區(qū)

8.3場(chǎng)景中的顏色賦值

8.4渲染至離屏幀緩沖區(qū)

8.5?canvas上的拾取行為

8.6從離屏幀緩沖區(qū)中讀取像素

8.7尋找擊中對(duì)象

8.8處理?yè)糁袑?duì)象

8.9體系結(jié)構(gòu)的更新操作

8.10拾取器的體系結(jié)構(gòu)

8.11實(shí)現(xiàn)唯一顏色標(biāo)記

9整合方案

9.1創(chuàng)建WebGL應(yīng)用程序

9.2體系結(jié)構(gòu)回顧

9.3虛擬汽車(chē)陳列室應(yīng)用程序

9.4著色器實(shí)現(xiàn)

9.5?構(gòu)建場(chǎng)景

9.6配置WebGL屬性

9.7加載汽車(chē)模型

9.8渲染操作

10高級(jí)話(huà)題

10.1后處理技術(shù)

10.2框架更新

10.3測(cè)試后處理效果

10.4點(diǎn)精靈對(duì)象

10.5火花效果

10.6法線(xiàn)貼圖

10.7法線(xiàn)貼圖示例

10.8片元著色器中的光線(xiàn)跟蹤機(jī)制

10.9場(chǎng)景的光線(xiàn)跟蹤測(cè)試