（六）WebGL中drawArrays方法详解

drawArrays 方法是 WebGL 中用于绘制图形的一个重要函数，它可以通过提供顶点数据来在画布上渲染图形。WebGL 是一个低级的图形API，允许开发者通过 JavaScript 控制显卡渲染内容，而 drawArrays 是将顶点数据绘制到画布的基础方法之一。

方法签名

void gl.drawArrays(mode, first, count);

参数解释

1. mode (WebGLRenderingContext 枚举类型):

   • 指定绘制的模式，决定如何连接顶点。常见的模式包括：
     • gl.POINTS：每个顶点绘制为一个点。
     • gl.LINES：每两个顶点绘制为一条线。
     • gl.LINE_STRIP：绘制一条折线，后续的顶点依次连接。
     • gl.LINE_LOOP：与 LINE_STRIP 类似，但最后一个顶点会与第一个顶点连接，形成一个闭环。
     • gl.TRIANGLES：每三个顶点组成一个三角形。
     • gl.TRIANGLE_STRIP：每三个顶点组成一个三角形，后续的顶点与之前的顶点一起组成三角形。
     • gl.TRIANGLE_FAN：以第一个顶点为中心，与后续顶点一起组成三角形扇形。

2. first (GLint):

   • 指定开始绘制的第一个顶点的索引。这个值通常设置为 0，表示从顶点数据的第一个元素开始绘制。

3. count (GLsizei):

   • 要绘制的顶点数量。这意味着 WebGL 会使用从 first 索引开始的 count 个顶点来绘制图形。

示例代码

1. 绘制点（gl.POINTS）

// 假设已经初始化 WebGL 上下文
const vertices = new Float32Array([
    0.0,  0.0, 0.0,   // 顶点 1
    0.5,  0.5, 0.0,   // 顶点 2
   -0.5, -0.5, 0.0,   // 顶点 3
]);

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 设置顶点属性
const positionLocation = gl.getAttribLocation(program, 'a_position');
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLocation);

// 绘制点
gl.drawArrays(gl.POINTS, 0, vertices.length / 3);

这个示例将会把数组中的每个顶点绘制为一个独立的点。

2. 绘制线段（gl.LINES）

const vertices = new Float32Array([
    0.0,  0.0, 0.0,   // 顶点 1
    0.5,  0.5, 0.0,   // 顶点 2
   -0.5, -0.5, 0.0,   // 顶点 3
]);

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 设置顶点属性
const positionLocation = gl.getAttribLocation(program, 'a_position');
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLocation);

// 绘制线段
gl.drawArrays(gl.LINES, 0, vertices.length / 3);

该示例将绘制出由两个顶点组成的线段。

3. 绘制三角形（gl.TRIANGLES）

const vertices = new Float32Array([
    0.0,  0.5, 0.0,   // 顶点 1
   -0.5, -0.5, 0.0,   // 顶点 2
    0.5, -0.5, 0.0,   // 顶点 3
]);

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 设置顶点属性
const positionLocation = gl.getAttribLocation(program, 'a_position');
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLocation);

// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 3);

这段代码将会绘制出一个由三个顶点组成的三角形。

使用场景

drawArrays 常用于以下几种场景：

• 基本几何绘制：例如点、线和三角形，适用于需要低级控制的场合。
• 网格渲染：当顶点数据已经存储在 WebGL 缓冲区中时，可以通过 drawArrays 来绘制整个网格。
• 动态变化：通过修改顶点数据，可以动态地改变绘制内容，而不必重新设置着色器或缓冲区。

进阶使用

• 实例化渲染：drawArraysInstanced 允许绘制多个实例，从而提高渲染效率，适合场景中多个相同对象的渲染。
• 与着色器结合：可以通过在顶点着色器中传递不同的属性数据来控制渲染效果，例如变换矩阵、颜色、纹理坐标等。

小结

drawArrays 是 WebGL 中非常基础且常用的方法，它通过一个简单的接口允许开发者绘制各种基本形状（点、线、三角形等）。理解和掌握 drawArrays 的使用，对于深入 WebGL 开发至关重要。