WebGL学习实录（二）

WebGL图形流水线

在开发WebGL应用程序时，需要通过编写着色器语言代码与GPU进行沟通。

在javascript编写的程序其中包括以下操作的控制代码：

a）初始化WebGL - 即用Javascript初始化WebGL的上下文。

b）创建数组 - 通过创建数组来保存几何数据

c） 缓冲区对象 - 通过将数组作为参数来创建缓冲区对象(顶点和索引）

d）着色器 - 创建、编译、使用javascript链接着色器

e） 属性 - 创建属性，启用他们并与缓冲区对象相关联。

f） 制服 - 关联制服；

g） 变换矩阵 - 创建变换矩阵

通过创建几何形状所需的数据和把它们传递到着色器中缓存的uniform，将着色器语言指向缓冲区对象，作为输入传递给顶点着色器的属性变量。

 

1) 顶点着色器

通过调用drawArray()和drawElements() 启动渲染过程中，顶点着色器提供的每个顶点执行在缓冲区对象，它计算原始多边形各顶点的位置并存储在不同的gl_position。它还计算其他与顶点相关联的属性，比如颜色、纹理坐标，以及顶点。

 

2）原始汇编

计算位置及每个顶点的其他细节后，下一个阶段就是原始装配阶段。这里把三角形组装并传送给光栅化程序。

 

3）光栅化

在光栅化步骤中，原始的最终图形的像素被确实。两个步骤：

1. 剔除 - 多边形的最初的取向被确定 。所有三角形不使用或者当取向在观看区域不可见时会被丢弃。这个过程被称为剔除。
2. 裁剪 - 如果一个三角形部分在观看区外，则视图区之外的部分被去除。这个过程被称为裁剪。

 

4）片段着色器

负责输出三角形像素的最终颜色。片段着色器将顶点着色器输出的片段作为输入，片段的顶点属性已被光栅化单元进行了插值处理。

主要获取：

1. 从顶点着色器获取不同的变量数据；
2. 从光栅化阶段的元语（片段）
3. 计算顶点之间的每一个像素的颜色值

一些操作会在每个原始的像素的颜色确定后进行：

• 深度
• 颜色缓冲区混合
• 抖色

当所有的片段进行处理后，2d图形形成并显示在屏幕上。

帧缓冲器是渲染管线的最终目的地。

5） 帧缓冲

帧缓冲区的图形内存持有的场景数据的一部分。这个缓冲区包含细节如宽度和表面的高度(以像素为单位)，每个像素的颜色，深度和模版缓冲器。