一、前言
1.1 适用人群
本教程适合已经了解基础的 HTML/CSS/JavaScript，对 WebGL 有基本概念（知道着色器、绘制流程），但希望深入理解其核心性能机制——**缓冲区（Buffer）**的开发者。我们将聚焦于'如何使用缓冲区高效地管理和绘制大量顶点数据'，解决'如何绘制成千上万个点而不卡顿'的核心痛点。
效果如图：
1.2 核心目标
- 理解本质：掌握 WebGL 缓冲区（Buffer）的作用，它如何与 GPU 通信，以及为何它是高性能绘制的基石。
- 掌握方法：学会创建、绑定、配置和数据填充缓冲区，实现单次绘制调用（draw call）渲染多个点。
- 实战应用：通过完整代码示例，从绘制单个点进阶到动态绘制成百上千个随机点，并理解其性能优势。
二、基础知识：什么是 WebGL 缓冲区（Buffer）？
功能说明 在 WebGL 中，缓冲区是 GPU 上的一块内存区域，用于存储顶点数据（如位置、颜色、法线等）。你可以把缓冲区想象成一个**'快递包裹'**，将 JavaScript 中定义的一大包数据（例如数万个点的坐标），一次性批量发送给 GPU。GPU 可以直接从这个'包裹'中快速读取数据进行渲染，避免了逐个发送数据的巨大开销。
核心思想：一次发送，多次使用
流程如下：
-
在 JS 中创建数据数组（如顶点位置） const positions = [x1, y1, z1, x2, y2, z2, ...];
-
创建 WebGL 缓冲区 const buffer = gl.createBuffer();
-
绑定缓冲区并填充数据 gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
-
在着色器中配置如何读取这些数据
为什么需要缓冲区？ 如果不使用缓冲区，绘制 N 个点可能需要 N 次绘制调用和 N 次数据传递。而使用缓冲区，无论点有多少（几千甚至几万），都只需要一次绘制调用。这正是 WebGL 能够处理复杂 3D 场景的根本原因。
三、实战准备：HTML 结构与环境
代码示例：基础 HTML 模板 首先，我们需要一个承载 WebGL 画布的 HTML 文件和一个基础的渲染上下文。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<met
