WebGL編程培訓(xùn)
? WebGL編程培訓(xùn)
課程大綱：
1WebGL概述
1.1?系統(tǒng)需求
1.2?WebGL提供的渲染類型
1.3?WebGL應(yīng)用程序結(jié)構(gòu)
1.4?HTML?5?canvas的生成方式
1.5訪問WebGL上下文環(huán)境
1.6?WebGL狀態(tài)機(jī)
1.7加載3D場景
2渲染幾何體
2.1頂點(diǎn)和索引
2.2?WebGL渲染管線概述
2.3在WebGL中渲染幾何體
2.4將屬性關(guān)聯(lián)至VBO
2.5渲染機(jī)制
2.6整合過程
2.7渲染模式
2.8緩沖區(qū)操控
2.9高級幾何體加載技術(shù)：JSON和AJAX
2.10使用AJAX+JSON加載圓錐體對象
3光照
3.1光照、法線和材質(zhì)
3.2在管線中使用光源、法線和材質(zhì)
3.3著色方案和光照反射模型
3.4OpenGL?ES著色語言ESSL
3.5編寫ESSL程序
3.6返回至WebGL
3.7位置光源
4相機(jī)
4.1?WebGL不存在相機(jī)對象
4.2法線轉(zhuǎn)換
4.3?WebGL實(shí)現(xiàn)方式
4.4模型，視見矩陣
4.5相機(jī)矩陣
4.6透視矩陣
4.7?WebGL示例結(jié)構(gòu)
5實(shí)現(xiàn)方案
5.1?矩陣棧
5.2?3D場景的動(dòng)畫操作
5.3計(jì)時(shí)策略
5.4體系結(jié)構(gòu)更新
5.5連接矩陣棧和JavaScript計(jì)時(shí)器
5.6參數(shù)曲線
5.7優(yōu)化策略
5.8插值方案
6顏色、深度測試以及Alpha混合
6.1?在WebGL中使用顏色
6.2使用對象中的顏色
6.3使用光照顏色
6.4體系結(jié)構(gòu)的更新操作
6.5通過jQuery?Ul實(shí)現(xiàn)互動(dòng)性
6.6有向點(diǎn)光源
6.7使用場景中的顏色值
6.8深度測試
6.9?Alpha混合操作
6.10生成透明對象
7紋理
7.1紋理貼圖
7.2生成并加載紋理
7.3使用紋理坐標(biāo)
7.4著色器中的紋理應(yīng)用
7.5紋理過濾模式
7.6紋理環(huán)繞模式
7.7多重紋理
7.8立方體貼圖
8拾取操作
8.1拾取操作概述
8.2構(gòu)造離屏幀緩沖區(qū)
8.3場景中的顏色賦值
8.4渲染至離屏幀緩沖區(qū)
8.5?canvas上的拾取行為
8.6從離屏幀緩沖區(qū)中讀取像素
8.7尋找擊中對象
8.8處理擊中對象
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虛擬汽車陳列室應(yīng)用程序
9.4著色器實(shí)現(xiàn)
9.5?構(gòu)建場景
9.6配置WebGL屬性
9.7加載汽車模型
9.8渲染操作
10高級話題
10.1后處理技術(shù)
10.2框架更新
10.3測試后處理效果
10.4點(diǎn)精靈對象
10.5火花效果
10.6法線貼圖
10.7法線貼圖示例
10.8片元著色器中的光線跟蹤機(jī)制
10.9場景的光線跟蹤測試