在 WebGL 中绘制基本形：三角形、线段、点

2024-02-12 18:43:57

利用缓冲区对象在 WebGL 中绘制图形

在上一节中，我们探索了缓冲区对象，这是在 WebGL 中高效传递大量顶点数据的强大工具。本节，我们将深入了解如何利用缓冲区对象绘制各种图形，包括三角形、线段和点。

三角形

三角形是 WebGL 中最基本的图形之一，只需要三个顶点坐标即可定义它们的形状。使用缓冲区对象绘制三角形，首先需要定义顶点坐标并将其存储在 Float32Array 中。

const vertices = [
  0, 1, 0,    // 三角形顶点 1
  -1, -1, 0,   // 三角形顶点 2
  1, -1, 0     // 三角形顶点 3
];

接下来，创建一个缓冲区对象，并使用 gl.bindBuffer() 将其绑定到 gl.ARRAY_BUFFER。然后，使用 gl.bufferData() 将顶点数据写入缓冲区对象，指定使用 gl.STATIC_DRAW 标志，表示数据在绘制过程中不会发生变化。

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

要将缓冲区对象中的数据传递给顶点着色器，需要设置顶点属性。使用 gl.getAttribLocation() 获取顶点着色器中的 "position" 属性的位置，并使用 gl.vertexAttribPointer() 指定如何解释缓冲区对象中的数据。

const positionAttribute = gl.getAttribLocation(program, "position");
gl.vertexAttribPointer(positionAttribute, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionAttribute);

最后，使用 gl.drawArrays() 绘制三角形，指定 gl.TRIANGLES 表示要绘制三角形，以及起始顶点索引和顶点数量。

gl.drawArrays(gl.TRIANGLES, 0, 3);

线段

线段是通过两个顶点坐标确定的另一种常见图形。绘制线段的过程与绘制三角形类似，但只需要两个顶点坐标。

const vertices = [
  0, 1, 0,    // 线段端点 1
  1, -1, 0     // 线段端点 2
];

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

const positionAttribute = gl.getAttribLocation(program, "position");
gl.vertexAttribPointer(positionAttribute, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionAttribute);

gl.drawArrays(gl.LINES, 0, 2);

点

点是最简单的 WebGL 图形，只需要一个顶点坐标即可定义。绘制点的过程与绘制其他图形类似，但只需要一个顶点坐标。

const vertices = [
  0, 0, 0    // 点坐标
];

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

const positionAttribute = gl.getAttribLocation(program, "position");
gl.vertexAttribPointer(positionAttribute, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionAttribute);