526互联

【WebGL系列-04】清除缓冲区并绘制图形

发布时间 2023-07-24 13:45:47作者: 李煎饼_GISer

清除缓冲区并绘制图形

前文中已经准备好了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)

从向量数组中绘制图元

  • mode：GLenum，指定绘制图元的方式，可以是以下值：
    • WebGLRenderingContext.POINTS，绘制一系列点
    • WebGLRenderingContext.LINE_STRIP，绘制一个线条，即，绘制一系列线段，上一点连接下一点
    • WebGLRenderingContext.LINE_LOOP，绘制一个线圈，即，绘制一系列线段，上一点连接下一点，并且最后一个与第一个点相连
    • WebGLRenderingContext.LINES，绘制一系列单独的线段，每两个点作为端点，线段之间不连接
    • WebGLRenderingContext.TRIANGLE_STRIP，绘制一个三角带
    • WebGLRenderingContext.TRIANGLE_FAN，绘制一个三角扇
    • WebGLRenderingContext.TRIANGLES，绘制一系列三角形，每三个点作为顶点
  • 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类型字节数的整数倍