【WebGL初学系列之一】WebGl基础知识

一：WebGL简单介绍

在今年中，Web技术已经得到了巨大的发展，它们支持服务器和客户端之间的双向通讯，允许用户注册登录等等。而且Web应用程序提供丰富的用户界面，如图形图像，音频和视频等。与原生的应用程序相比，Web应用程序也存在着一定的局限性，其中很重要之一就是web程序无法做到原生态的应用程序那样丰富。自从引入了Html5画布标记以来，这种情景发生了巨大的变化。有了html5的画布标记，我们呢可以创建真正高级的2D图形。但是早期的html5画布只允许定义2D上下文，并不支持3d。随着webgl的到来，开发人员可以在浏览器内部实现3D图形的硬件加速。WebGL具有以下吸引人的特点：

1. WebGL是一个开放的标准，任何人都可以使用，免费。

2. WebGL利用硬件加速，速度的确很快

3. WebGL支持浏览器本地运行，不需要任何插件

4. WebGL是以OpenGL ES2.0为基础的，可以方便OpenGL ES2.0的开发人员

二：计算机图形渲染

应用程序运行在CPU上，并且使用主存，为了显示3D图形，应用程序需要不断调用底层的驱动程序，后者通过总线把图形数据发送到GPU，其关系图如下：

如上图，图形数据通过GPU流水线，有些对象表面中要应用文理，简单理解就是把图像“粘贴到”几何对象表面。这些纹理图像，需要用缓存保存他们，这样GPU可以对纹理图像进行快速访问，就是这里的纹理存储器，经过了整个GPU流水线后，最后送到帧缓存，帧缓存是一个存储器，保存了最终显示到屏幕上的所有信息。对于简单的帧缓存，帧缓存实际就是主存的一部分，但是最新的图形系统，帧缓存属于GPU中转换用的快速图形存储器，或者而是靠近GPU一侧的单独存储芯片。帧缓存中至少由颜色缓存（color buffer）、Z-缓存（Z-buffer）、模板缓存（stencil Buffer）组成。颜色缓存是一个矩形存储器，它以RGB或RGBA格式保存屏幕上每个像素的颜色。在3D场景中，一个对象可能被其他对象遮挡，当整个绘制完成时，颜色缓存不会有属于被隐藏对象的像素信息，这通常是由Z-缓存实现的，Z-缓存的单元数量和颜色缓存中的像素数量相同，Z-缓存的每个单元，存储了离观察者最近图元的距离。而模板缓存用来控制颜色缓存的某个位置的写入操作，一个实际的操作就是用它来处理阴影。而最后视频控制器，以一定的频率逐行扫描颜色缓存，并更新屏幕显示。

三：WebGL图形流水线

  流水线流程如下图：

下面先介绍下WebGL流水线的各个步骤

顶点着色器

我们总是用顶点表示几何对象的角点或交点，顶点着色器是流水线中对顶点进行着色的阶段。顶点着色器是3D建模数据首先达到的地方，顶点着色器是可编程的，用户可以自己设计顶点着色器的源码。在顶点着色器之前，着色器通常先对顶点进行转变，即诚意一个转变矩阵。一个对象的全部顶点都乘以一个转变矩阵，相当于把每个对放置在场景中的某个位置。顶点着色器的组成包括：1. 顶点着色器源代码，这些源代码是用Opengl ES着色语言设计的。2.Attribute变量（属性变量）：它们是用户自定义的变量，它们通常用来包含特定的每个顶点的数据，也有敞亮顶点的功能。当我们需要为多个顶点定义同一个属性时，可以使用这个功能。顶点的位置和顶点颜色就是attribute属性的实例。3.uniform变量：它们用来定义所有顶点都相同的数据。变换矩阵和光源位置都属于uniform变量。4.varying变量：是顶点着色器向片段着色器发送信息的一个手段。5. 内置特殊变量：gl_Position，gl_FrontFaceing，gl_PointSize。

图元装配

WebGL流水线需要把已经着色的顶点装配成三角形、线段、或点精灵等几何图元，然后WebGL需要判断它们是否在屏幕可见的3D区域中，大多数情景，我们称3D可见区域为视椎体，删除完全处于此视椎体之外的图元。

光栅化

光栅化就是将图元转换成片段，然后把片段传给片段着色器。

片段着色器

来自光栅化的片段是需要发送到流水线的第二个可编程阶段，即片段着色器。一个片段实际对应屏幕上的一个像素，但是并非所有的片段都会成为绘制缓存中的像素。因为逐片段操作会在流水线的最后几个步骤中丢弃某些片段。因此，在webGl中需要把片段和像素区分，把最终能够写入到绘制缓存中的片段称为像素。

片段着色器的输入数据包含以下内容：

1.片段着色器的源码（OpenGL ES源码）

2.一些内置的特殊变量（如gl_PointCoord）

3.用户自定义的varying变量，它们的值由定点着色器写入

4.uniform变量，它们是一些特殊变量，对所有片段都是恒量

5.采样器（sampler），它们是一些特殊的uniform变量，用于纹理映射

逐片段操作

在片段着色之后，都要把每个片段传入到流水线的下一个阶段，此阶段包含逐片段操作。顾名思义，这步操作包含几个子操作，来自着色器的每个片段都可以以不同方式影响绘制缓存中的一个像素，具体取决于片段操作的条件和结果。1.裁剪测试，裁剪测试决定片段是否位于裁剪矩形中，如果片段位于裁剪矩形内，则通过测试，如果片段在矩形之外，则被丢弃，而且不会达到绘制缓存。2，多重采样操作，主要是修改片段的alpha值和覆盖值，作为抗锯齿的一个措施。3.深度缓存测试，颜色换粗只存储某个时刻观察者可见对象的颜色，有些对象可能被遮挡。对于传入的片段，把它的z值和深度缓存中的同一个位置的z值进行比较来判断绘制哪个片段和丢弃哪个片段。4，融合，利用融合，把传入片段的颜色和已经在颜色缓存中的片段进行融合，当我们需要创建透明对象时就需要融合。5，抖动，在绘制缓存钱的最后一个操作就是抖动。颜色缓存用有限的二进制位数来表示每个颜色，抖动用来以某种方式排列颜色，得到比实际颜色数更多的颜色。当颜色缓存可用的颜色数有限时，抖动就非常有用。