2.2 顶点、图元和几何体

2.2 顶点、图元和几何体

2.2 顶点、图元和几何体：构建WebGL世界的基石

在WebGL的世界中，我们所看到的一切3D图形，无论是简单的三角形、复杂的模型，还是逼真的场景，都是由最基本的构建块逐步搭建起来的。这些构建块的核心就是顶点 (Vertices)、图元 (Primitives) 和 几何体 (Geometry)。理解这三者之间的关系以及如何在WebGL中有效地使用它们，是掌握WebGL图形编程的关键一步。

本篇文章将深入探讨这三个核心概念，并通过代码示例和图表，帮助你彻底理解它们在WebGL中的作用和实践应用。

2.2.1 顶点 (Vertices)：空间中的坐标点

顶点是构成几何体的最基本单元，你可以将其想象成空间中的一个点。在WebGL（以及大多数3D图形API）中，顶点通常由三维坐标 (x, y, z) 来定义，表示它在3D空间中的位置。除了位置信息，顶点还可以携带其他属性，例如：

• 颜色 (Color)：定义顶点的颜色，可以用于实现平滑着色或顶点颜色效果。

• 法线 (Normal)：定义顶点表面的法线方向，对于光照计算至关重要，决定了表面如何反射光线。

• 纹理坐标 (Texture Coordinates, UVs)：定义顶点在纹理图像上的对应位置，用于将纹理贴图到几何体表面。

顶点属性的数量和类型取决于你的具体需求和着色器的实现。在WebGL中，这些顶点属性数据会被传递给顶点着色器 (Vertex Shader) 进行处理，最终决定顶点在屏幕上的位置以及其他视觉特性。

代码实践：定义顶点数据

在JavaScript中，我们通常使用数组 (Array) 或 类型化数组 (Typed Array) 来存储顶点数据。类型化数组，如 Float32Array，更适合存储大量的数值数据，因为它们在内存管理和性能方面更高效，这在WebGL中尤其重要。

以下代码示例展示了如何定义一个三角形的顶点数据，包括位置和颜色属性：

// 顶点位置数据 (x, y, z)
const vertices = new Float32Array([
  -0.5, -0.5, 0.0,  // 顶点1
   0.5, -0.5, 0.0,  // 顶点2
   0.0,  0.5, 0.0   // 顶点3
]);
// 顶点颜色数据 (r, g, b, a) - 假设所有顶点颜色相同
const colors = new Float32Array([
  1.0, 0.0, 0.0, 1.0,  // 红色
  1.0, 0.0, 0.0, 1.0,  // 红色
  1.0, 0.0, 0.0, 1.0   // 红色
]);
​

在这个例子中，vertices 数组存储了三个顶点的三维坐标，而 colors 数组存储了每个顶点的RGBA颜色值。这些数据将在后续步骤中被传递给WebGL程序。

2.2.2 图元 (Primitives)：连接顶点的基本形状

图元是指利用顶点构建出的基本几何形状，是WebGL绘制图形的基础。WebGL支持以下几种主要的图元类型：

• 点 (Points, gl.POINTS): 最简单的图元，每个顶点都被渲染为一个独立的点。

• 线段 (Lines, gl.LINES): 每两个顶点被连接成一条独立的线段。

• 线条带 (Line Strip, gl.LINE_STRIP): 将一系列顶点依次连接成一条连续的折线。

• 线条环 (Line Loop, gl.LINE_LOOP): 类似于线条带，但首尾顶点也会被连接，形成一个闭合的环形线条。

• 三角形 (Triangles, gl.TRIANGLES): 每三个顶点被组合成一个独立的三角形。这是WebGL中最常用也是最重要的图元，因为复杂的曲面可以被分解成无数个三角形来近似表示。

• 三角形带 (Triangle Strip, gl.TRIANGLE_STRIP): 高效地连接一系列三角形，每个新的三角形都与前一个三角形共享两个顶点，可以减少顶点数据的重复。

• 三角形扇 (Triangle Fan, gl.TRIANGLE_FAN): 从一个中心顶点出发，依次连接其他顶点形成一系列三角形，适用于构建扇形或圆锥形等形状。

理解不同图元的特性对于选择合适的图元类型来构建几何体至关重要。例如，绘制一个简单的立方体，可以使用 gl.TRIANGLES 图元，通过定义立方体每个面的两个三角形来完成。

mermaid 图：顶点与图元的关系

上图清晰地展示了顶点如何通过不同的图元类型被组织成基本的几何形状。

代码实践：使用不同图元绘制

为了演示不同图元的效果，我们可以创建一个简单的WebGL程序，并尝试使用不同的 gl.drawArrays() 方法的第一个参数来绘制相同的顶点数据。

假设我们有以下顶点数据，用于绘制一个正方形的轮廓：

const squareVertices = new Float32Array([
  -0.5,  0.5, 0.0,  // 顶点1 (左上)
  -0.5, -0.5, 0.0,  // 顶点2 (左下)
   0.5, -0.5, 0.0,  // 顶点3 (右下)
   0.5,  0.5, 0.0   // 顶点4 (右上)
]);
​

我们可以分别使用不同的图元类型来绘制这些顶点：

// ... (WebGL 初始化和 Shader 设置代码，此处省略) ...
// 创建顶点缓冲区并绑定数据 (假设已经完成)
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, squareVertices, gl.STATIC_DRAW);
// 设置顶点属性指针 (假设已经完成)
// ...
// 绘制点
gl.drawArrays(gl.POINTS, 0, 4); // 绘制 4 个点
// 绘制线段 (LINES)
gl.drawArrays(gl.LINES, 0, 4); // 绘制 2 条线段 (顶点1-2, 顶点3-4)
// 绘制线条带 (LINE_STRIP)
gl.drawArrays(gl.LINE_STRIP, 0, 4); // 绘制 3 条线段 (顶点1-2, 顶点2-3, 顶点3-4)
// 绘制线条环 (LINE_LOOP)
gl.drawArrays(gl.LINE_LOOP, 0, 4); // 绘制 4 条线段 (顶点1-2, 顶点2-3, 顶点3-4, 顶点4-1)
// 绘制三角形 (TRIANGLES) - 注意这里顶点不足以构成三角形，需要更多顶点或调整顶点顺序
// gl.drawArrays(gl.TRIANGLES, 0, 4); // 无法绘制有效的三角形
// 绘制三角形带 (TRIANGLE_STRIP) - 同上，顶点不足
// gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); // 无法绘制有效的三角形带
// 绘制三角形扇 (TRIANGLE_FAN) - 同上，顶点不足
// gl.drawArrays(gl.TRIANGLE_FAN, 0, 4); // 无法绘制有效的三角形扇
​

运行这段代码，并观察不同 gl.drawArrays() 调用产生的效果，你将直观地理解各种图元类型的绘制方式。为了绘制三角形相关的图元，我们需要提供至少三个顶点，并且通常需要使用顶点索引来更有效地组织顶点数据，这将在下一节几何体中详细介绍。

2.2.3 几何体 (Geometry)：组合图元构建复杂形状

几何体是由一个或多个图元组合而成的、具有特定形状和结构的3D模型。例如，一个立方体几何体可以由12个三角形图元组成（每个面两个三角形）。一个球体几何体可以用大量的三角形或四边形图元近似表示。

几何体的构建方式多种多样，可以手动定义顶点和图元数据，也可以使用建模软件生成，或者通过程序算法生成 (Procedural Geometry)。

几何体的组成要素：

• 顶点数据 (Vertex Data)：包含构成几何体的所有顶点的位置和其他属性信息，例如颜色、法线、纹理坐标等。

• 图元类型 (Primitive Type)：指定使用哪种图元类型来连接顶点，例如 gl.TRIANGLES、gl.LINE_STRIP 等。

• 索引数据 (Index Data, Element Array) (可选但常用)：当几何体中存在大量重复顶点时，可以使用索引数据来指定图元的顶点顺序，从而避免重复存储顶点数据，提高渲染效率和减少内存占用。索引数据是一个整数数组，存储的是顶点数据数组中顶点索引的顺序。

使用索引绘制 (Indexed Drawing)：gl.drawElements()

当使用 gl.TRIANGLES 等图元类型绘制复杂几何体时，经常会遇到多个三角形共享相同顶点的情况。例如，在一个立方体中，每个顶点都属于三个面（即六个三角形）。如果直接使用 gl.drawArrays()，就需要重复定义这些共享顶点多次，造成数据冗余。

顶点索引 (Vertex Indices) 的出现就是为了解决这个问题。我们可以创建一个索引数组，其中存储的是顶点数据数组中顶点的索引，然后使用 gl.drawElements() 函数进行绘制。gl.drawElements() 函数会根据索引数组指定的顺序，从顶点缓冲区中提取顶点，并按照指定的图元类型进行绘制。

代码实践：使用索引绘制一个矩形

假设我们要绘制一个矩形，可以使用两个三角形来构成。如果我们不使用索引，需要定义六个顶点（每个三角形三个顶点，矩形两个三角形）。但实际上，矩形只需要四个顶点。使用索引可以有效地复用这四个顶点。

首先，定义矩形的四个顶点：

const rectangleVertices = new Float32Array([
  -0.5,  0.5, 0.0,  // 顶点0 (左上)
  -0.5, -0.5, 0.0,  // 顶点1 (左下)
   0.5, -0.5, 0.0,  // 顶点2 (右下)
   0.5,  0.5, 0.0   // 顶点3 (右上)
]);
​

然后，定义索引数组，指定如何使用这四个顶点构成两个三角形来绘制矩形：

const rectangleIndices = new Uint16Array([
  0, 1, 2,  // 第一个三角形: 顶点 0, 1, 2
  0, 2, 3   // 第二个三角形: 顶点 0, 2, 3
]);
​

在这个索引数组中：

• 0, 1, 2 表示第一个三角形由顶点索引 0, 1, 2 构成 (对应 rectangleVertices 数组中的前三个顶点)。

• 0, 2, 3 表示第二个三角形由顶点索引 0, 2, 3 构成 (对应 rectangleVertices 数组中的顶点 0, 2, 3)。

现在，我们需要创建索引缓冲区，并将索引数据上传到GPU：

// 创建索引缓冲区
const indexBuffer = gl.createBuffer();
// 绑定索引缓冲区
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
// 将索引数据写入索引缓冲区
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, rectangleIndices, gl.STATIC_DRAW);
​

最后，使用 gl.drawElements() 函数进行绘制：

// ... (WebGL 初始化, Shader 设置, 顶点缓冲区和顶点属性指针设置代码，此处省略) ...
// 绑定顶点缓冲区 (假设已经完成)
// ...
// 绑定索引缓冲区
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
// 绘制索引图元 (使用 TRIANGLES 图元类型，索引数据类型为 UNSIGNED_SHORT)
gl.drawElements(gl.TRIANGLES, rectangleIndices.length, gl.UNSIGNED_SHORT, 0);
​

gl.drawElements() 函数的参数解释：

• gl.TRIANGLES: 指定图元类型为三角形。

• rectangleIndices.length: 指定要绘制的索引数量，即索引数组的长度。

• gl.UNSIGNED_SHORT: 指定索引数据类型为无符号短整型 (对应 Uint16Array)。

• 0: 指定索引数据的偏移量，通常为 0。

通过使用索引绘制，我们仅定义了四个顶点就成功绘制了一个矩形，避免了顶点数据的重复，提高了效率。对于更复杂的几何体，索引绘制的优势将更加明显。

2.2.4 数据组织与缓冲区 (Buffers)：将数据传递给GPU

在WebGL中，顶点数据、索引数据等需要从JavaScript内存传递到GPU内存才能被着色器程序访问和渲染。这个数据传输过程是通过 缓冲区对象 (Buffer Objects) 来实现的。

缓冲区对象 (Buffer Objects) 是WebGL中用于在GPU上存储数据的容器。我们可以创建不同类型的缓冲区，例如：

• 顶点缓冲区 (Vertex Buffer)：用于存储顶点属性数据 (如位置、颜色、法线等)。

• 索引缓冲区 (Index Buffer, Element Array Buffer)：用于存储顶点索引数据。

数据传递步骤：

1. 创建缓冲区 (Create Buffer)：使用 gl.createBuffer() 函数创建一个缓冲区对象。

2. 绑定缓冲区 (Bind Buffer)：使用 gl.bindBuffer() 函数将缓冲区对象绑定到指定的缓冲区类型 (例如 gl.ARRAY_BUFFER 用于顶点缓冲区， gl.ELEMENT_ARRAY_BUFFER 用于索引缓冲区)。

3. 填充数据 (Buffer Data)：使用 gl.bufferData() 函数将 JavaScript 数组或类型化数组中的数据复制到当前绑定的缓冲区对象中。gl.bufferData() 的第三个参数指定了数据的使用方式，常用的有：

   • gl.STATIC_DRAW: 数据将被写入缓冲区一次，并多次绘制，且内容不会经常改变 (例如几何体顶点数据)。

   • gl.DYNAMIC_DRAW: 数据会被写入缓冲区多次，且内容可能会频繁改变 (例如动画或用户交互相关的顶点数据)。

   • gl.STREAM_DRAW: 数据会被写入缓冲区一次，并绘制几次，然后丢弃 (例如粒子系统等临时数据)。

代码实践：创建和使用缓冲区

以下代码片段展示了如何创建顶点缓冲区和索引缓冲区，并将之前定义的矩形顶点数据和索引数据上传到GPU：

// 创建顶点缓冲区
const vertexBuffer = gl.createBuffer();
// 绑定顶点缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 将顶点数据写入顶点缓冲区
gl.bufferData(gl.ARRAY_BUFFER, rectangleVertices, gl.STATIC_DRAW);
// 创建索引缓冲区 (前面代码已创建，此处重复仅为示例完整性)
// const indexBuffer = gl.createBuffer();
// 绑定索引缓冲区 (前面代码已绑定，此处重复仅为示例完整性)
// gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
// 将索引数据写入索引缓冲区 (前面代码已写入，此处重复仅为示例完整性)
// gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, rectangleIndices, gl.STATIC_DRAW);
// ... (后续代码：设置顶点属性指针，绑定缓冲区到属性，调用 gl.drawElements() 或 gl.drawArrays() 进行绘制) ...
​

创建和绑定缓冲区，并将数据上传到GPU是WebGL渲染流程中至关重要的一步。只有将数据正确地传递到GPU，着色器程序才能访问到这些数据并进行后续的渲染操作。

2.2.5 实践代码示例：绘制一个彩色三角形

为了将上述概念整合起来，我们提供一个完整的代码示例，演示如何使用顶点、图元和缓冲区在WebGL中绘制一个彩色三角形。

HTML 文件 (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>WebGL 彩色三角形</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <canvas id="glCanvas"></canvas>
  <script src="main.js"></script>
</body>
</html>
​

JavaScript 文件 (main.js):

const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
  alert('你的浏览器不支持 WebGL!');
  throw new Error('WebGL not supported');
}
// 顶点着色器程序
const vsSource = `
  attribute vec4 aVertexPosition;
  attribute vec4 aVertexColor;
  varying lowp vec4 vColor;
  void main() {
    gl_Position = aVertexPosition;
    vColor = aVertexColor;
  }
`;
// 片段着色器程序
const fsSource = `
  varying lowp vec4 vColor;
  void main() {
    gl_FragColor = vColor;
  }
`;
// 初始化着色器程序
function initShaderProgram(gl, vsSource, fsSource) {
  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
  const shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);
  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert('无法初始化着色器程序: ' + gl.getProgramInfoLog(shaderProgram));
    return null;
  }
  return shaderProgram;
}
// 加载着色器
function loadShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert('着色器编译出错: ' + gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
  }
  return shader;
}
// 初始化缓冲区
function initBuffers(gl) {
  // 顶点位置数据
  const positions = new Float32Array([
    -0.5, -0.5, 0.0, // 顶点 1
     0.5, -0.5, 0.0, // 顶点 2
     0.0,  0.5, 0.0  // 顶点 3
  ]);
  // 顶点颜色数据 (红, 绿, 蓝)
  const colors = new Float32Array([
    1.0, 0.0, 0.0, 1.0, // 红色
    0.0, 1.0, 0.0, 1.0, // 绿色
    0.0, 0.0, 1.0, 1.0, // 蓝色
  ]);
  const positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
  const colorBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
  return {
    position: positionBuffer,
    color: colorBuffer,
  };
}
// 绘制场景
function drawScene(gl, programInfo, buffers) {
  gl.clearColor(0.0, 0.0, 0.0, 1.0); // 清除颜色为黑色
  gl.clear(gl.COLOR_BUFFER_BIT);
  // 设置顶点位置属性
  {
    const numComponents = 3; // 每个顶点位置有 3 个值 (x, y, z)
    const type = gl.FLOAT;    // 数据类型为浮点数
    const normalize = false; // 不进行归一化
    const stride = 0;        // 步长为 0，紧密排列
    const offset = 0;        // 从缓冲区起始位置开始读取
    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
    gl.vertexAttribPointer(
        programInfo.attribLocations.vertexPosition,
        numComponents,
        type,
        normalize,
        stride,
        offset);
    gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
  }
  // 设置顶点颜色属性
  {
    const numComponents = 4; // 每个顶点颜色有 4 个值 (r, g, b, a)
    const type = gl.FLOAT;
    const normalize = false;
    const stride = 0;
    const offset = 0;
    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
    gl.vertexAttribPointer(
        programInfo.attribLocations.vertexColor,
        numComponents,
        type,
        normalize,
        stride,
        offset);
    gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor);
  }
  // 使用着色器程序
  gl.useProgram(programInfo.program);
  // 绘制三角形
  {
    const offset = 0;
    const vertexCount = 3;
    gl.drawArrays(gl.TRIANGLES, offset, vertexCount);
  }
}
// 主渲染循环
function render() {
  // 初始化着色器程序
  const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
  // 获取属性位置
  const programInfo = {
    program: shaderProgram,
    attribLocations: {
      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
      vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
    },
  };
  // 初始化缓冲区
  const buffers = initBuffers(gl);
  // 绘制场景
  drawScene(gl, programInfo, buffers);
}
render(); // 开始渲染
​

将 index.html 和 main.js 放在同一个目录下，用浏览器打开 index.html，你将看到一个彩色的三角形被绘制在画布上，每个顶点分别呈现红色、绿色和蓝色，实现了顶点颜色的平滑插值效果。

2.2.6 总结与要点

本篇文章深入探讨了WebGL中构建图形的三个核心概念：顶点、图元和几何体。我们学习了：

• 顶点 (Vertices) 是空间中的坐标点，可以携带位置、颜色、法线、纹理坐标等属性。

• 图元 (Primitives) 是连接顶点的基本形状，WebGL支持点、线段、线条带、线条环、三角形、三角形带和三角形扇等多种图元类型。

• 几何体 (Geometry) 是由一个或多个图元组合而成的复杂3D模型，可以使用顶点数据和索引数据来高效地表示和绘制。

• 缓冲区对象 (Buffer Objects) 用于将顶点数据、索引数据等从JavaScript内存传递到GPU内存，供着色器程序使用。

• gl.drawArrays() 和 gl.drawElements() 是WebGL中用于绘制图元的关键函数，前者直接使用顶点数组，后者使用顶点索引数组。

理解顶点、图元和几何体是WebGL图形编程的基础。掌握这些概念，并结合缓冲区和绘制函数，你就可以开始构建各种简单的几何形状，并逐步深入到更复杂的3D场景的创建。在后续的学习中，你将进一步学习如何使用着色器程序来控制顶点的变换、光照、纹理等效果，从而创造出更加丰富多彩的WebGL世界。

希望这篇文章能够帮助你扎实地掌握WebGL的基础知识，为后续的深入学习打下坚实的基础。