WebGL编程培训课程-中心

 WebGL编程培训课程

课程大纲：

1WebGL概述

1.1 系统需求

1.2 WebGL提供的渲染类型

1.3 WebGL应用程序结构

1.4 HTML 5 canvas的生成方式

1.5访问WebGL上下文环境

1.6 WebGL状态机

1.7加载3D场景

2渲染几何体

2.1顶点和索引

2.2 WebGL渲染管线概述

2.3在WebGL中渲染几何体

2.4将属性关联至VBO

2.5渲染机制

2.6整合过程

2.7渲染模式

2.8缓冲区操控

2.9高级几何体加载技术：JSON和AJAX

2.10使用AJAX+JSON加载圆锥体对象

3光照

3.1光照、法线和材质

3.2在管线中使用光源、法线和材质

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

3.4OpenGL ES着色语言ESSL

3.5编写ESSL程序

3.6返回至WebGL

3.7位置光源

4相机

4.1 WebGL不存在相机对象

4.2法线转换

4.3 WebGL实现方式

4.4模型，视见矩阵

4.5相机矩阵

4.6透视矩阵

4.7 WebGL示例结构

5实现方案

5.1 矩阵栈

5.2 3D场景的动画操作

5.3计时策略

5.4体系结构更新

5.5连接矩阵栈和JavaScript计时器

5.6参数曲线

5.7优化策略

5.8插值方案

6颜色、深度测试以及Alpha混合

6.1 在WebGL中使用颜色

6.2使用对象中的颜色

6.3使用光照颜色

6.4体系结构的更新操作

6.5通过jQuery Ul实现互动性

6.6有向点光源

6.7使用场景中的颜色值

6.8深度测试

6.9 Alpha混合操作

6.10生成透明对象

7纹理

7.1纹理贴图

7.2生成并加载纹理

7.3使用纹理坐标

7.4着色器中的纹理应用

7.5纹理过滤模式

7.6纹理环绕模式

7.7多重纹理

7.8立方体贴图

8拾取操作

8.1拾取操作概述

8.2构造离屏帧缓冲区

8.3场景中的颜色赋值

8.4渲染至离屏帧缓冲区

8.5 canvas上的拾取行为

8.6从离屏帧缓冲区中读取像素

8.7寻找击中对象

8.8处理击中对象

8.9体系结构的更新操作

8.10拾取器的体系结构

8.11实现唯一颜色标记

9整合方案

9.1创建WebGL应用程序

9.2体系结构回顾

9.3虚拟汽车陈列室应用程序

9.4着色器实现

9.5 构建场景

9.6配置WebGL属性

9.7加载汽车模型

9.8渲染操作

10高级话题

10.1后处理技术

10.2框架更新

10.3测试后处理效果

10.4点精灵对象

10.5火花效果

10.6法线贴图

10.7法线贴图示例

10.8片元着色器中的光线跟踪机制

10.9场景的光线跟踪测试