清除缓冲区并绘制图形

前文中已经准备好了webgl程序和绘制所用的数据，但是在绘制图像之前，还要对画布进行处理。

清除缓冲区

由于图像的绘制是一帧一帧绘制，每一帧针对当前的状态，计算屏幕上每个像素的颜色，得到最终的绘制结果。这些状态被保存在一个叫帧缓冲区的地方。帧缓冲区不仅能存储颜色数据，还会存储一些其他的数据。webgl的帧缓冲区至少由以下三个部分构成：

颜色缓冲顾名思义，存储的是当前帧每个像元的颜色，深度缓冲保存的是当前帧每个像元的深度信息。

所谓的深度，可以理解为相机离这个点的距离。由于图像最终是绘制在同一个平面上的，因此我们是无法判断两个物体哪个近哪个远的，使用了深度缓冲就可以解决这个问题。

模板缓冲则类似一个筛子，可以把需要绘制的地方绘制出来，而不需要的地方就不进行绘制。

在进行新的一帧的绘制的时候，我们需要把帧缓冲区中上一帧的数据进行清除，然后把当前帧的信息再次写入，才能得到正确的绘制结果。

清除三个缓冲区对应以下接口：

void WebGLRenderingContext.clearColor(r, g, b, a)

设置颜色缓冲区的值（0-1），默认都为0

void WebGLRenderingContext.clearDepth(depth)

设置深度缓冲区的值（0-1），默认为1

void WebGLRenderingContext.clearStencil(s)

设置模板缓冲区的值（0或1），默认0

void WebGLRenderingContext.clear(mask)

清除指定的缓冲区（将指定的缓冲区设置为设定的值）

mask：GLbitfield，指定被清除的缓冲区，可以为以下值
- WebGLRenderingContext.COLOR_BUFFER_BIT，颜色缓冲区
- WebGLRenderingContext.DEPTH_BUFFER_BIT，深度缓冲区
- WebGLRenderingContext.STENCIL_BUFFER_BIT，模板缓冲区

当一次执行多个缓冲区的清除时，可以使用或（|）符号来连接

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

如果要得到设置的缓冲区的值，可以使用WebGLRenderingContext.getParameter接口

any WebGLRenderingContext.getParameter(pname)

获取参数

pname：要获取的参数名
- WebGLRenderingContext.COLOR_CLEAR_VALUE：颜色缓冲区值
- WebGLRenderingContext.DEPTH_CLEAR_VALUE：深度缓冲区值
- WebGLRenderingContext.STENCIL_CLEAR_VALUE：模板缓冲区值

最后，开始绘制图形，webgl中有两种绘制图形的方式，接口如下：

void WebGLRenderingContext.drawArrays(mode, first, count)

从向量数组中绘制图元

void WebGLRenderingContext.drawElements(mode, count, type, offset)

从数组数据渲染图元

mode：GLenum，指定绘制图元的方式，可以是以下值
- WebGLRenderingContext.POINTS，绘制一系列点
- WebGLRenderingContext.LINE_STRIP，绘制一个线条，即，绘制一系列线段，上一点连接下一点
- WebGLRenderingContext.LINE_LOOP，绘制一个线圈，即，绘制一系列线段，上一点连接下一点，并且最后一个与第一个点相连
- WebGLRenderingContext.LINES，绘制一系列单独的线段，每两个点作为端点，线段之间不连接
- WebGLRenderingContext.TRIANGLE_STRIP，绘制一个三角带
- WebGLRenderingContext.TRIANGLE_FAN，绘制一个三角扇
- WebGLRenderingContext.TRIANGLES，绘制一系列三角形，每三个点作为顶点
count：GLint，指定要渲染的元素数量
type：GLenum，指定元素数组缓冲区中的值的类型，可能的值
- WebGLRenderingContext.UNSIGNED_BYTE
- WebGLRenderingContext.UNSIGNED_SHORT
- 当使用OES_element_index_uint扩展时
  - WebGLRenderingContext.UNSIGNED_INT
offset：GLintptr，指定元素数组缓冲的字节偏移量，必须是type类型字节数的整数倍

标签：04,缓冲,WebGL,WebGLRenderingContext,void,缓冲区,绘制,线段
From： https://www.cnblogs.com/masakulayou/p/17577000.html